/* =========================================================
Rarity Index ׳’ג‚¬ג€ Mikmak 2
========================================================= */
:root {
--bg: #0b0d10;
--bg-soft: #0f1318;
--panel: #12171d;
--panel-2: #161c24;
--panel-3: #1a212a;
--line: rgba(255, 255, 255, 0.085);
--line-strong: rgba(255, 255, 255, 0.16);
--text: #e9eef4;
--text-2: #b5c0cb;
--muted: #7f8b98;
--muted-2: #5f6b77;
--accent: #e3b341;
--accent-soft: rgba(227, 179, 65, 0.12);
--accent-line: rgba(227, 179, 65, 0.4);
--legendary: #e6b23c;
--legendary-soft: rgba(230, 178, 60, 0.12);
--legendary-line: rgba(230, 178, 60, 0.42);
--legendary-glow: rgba(240, 178, 62, 0.5);
--epic: #a06bff;
--epic-soft: rgba(160, 107, 255, 0.12);
--epic-line: rgba(160, 107, 255, 0.44);
--epic-glow: rgba(160, 107, 255, 0.45);
--rare: #4d8bf5;
--rare-soft: rgba(77, 139, 245, 0.12);
--rare-line: rgba(77, 139, 245, 0.42);
--rare-glow: rgba(77, 139, 245, 0.42);
--regular: #94a1af;
--regular-soft: rgba(148, 161, 175, 0.1);
--regular-line: rgba(148, 161, 175, 0.3);
--regular-glow: rgba(148, 161, 175, 0.24);
--danger: #e17878;
--success: #67c39d;
--radius: 20px;
--radius-sm: 12px;
--shell: 1320px;
--header-h: 76px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--font: "Heebo", "Segoe UI", Arial, sans-serif;
--mono: "IBM Plex Mono", "Consolas", monospace;
}
[data-rarity="legendary"] {
--rarity-color: var(--legendary);
--rarity-soft: var(--legendary-soft);
--rarity-line: var(--legendary-line);
--rarity-glow: var(--legendary-glow);
}
[data-rarity="epic"] {
--rarity-color: var(--epic);
--rarity-soft: var(--epic-soft);
--rarity-line: var(--epic-line);
--rarity-glow: var(--epic-glow);
}
[data-rarity="rare"] {
--rarity-color: var(--rare);
--rarity-soft: var(--rare-soft);
--rarity-line: var(--rare-line);
--rarity-glow: var(--rare-glow);
}
[data-rarity="regular"] {
--rarity-color: var(--regular);
--rarity-soft: var(--regular-soft);
--rarity-line: var(--regular-line);
--rarity-glow: var(--regular-glow);
}
[data-rarity="unknown"] {
--rarity-color: #b0a08a;
--rarity-soft: rgba(176, 160, 138, 0.1);
--rarity-line: rgba(176, 160, 138, 0.3);
--rarity-glow: rgba(176, 160, 138, 0.3);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
margin: 0;
min-width: 320px;
background:
radial-gradient(1100px 700px at 88% -12%, rgba(227, 179, 65, 0.075), transparent 62%),
radial-gradient(900px 620px at 4% 9%, rgba(91, 189, 178, 0.045), transparent 58%),
var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.modal-open {
overflow: hidden;
}
::selection {
background: rgba(227, 179, 65, 0.35);
color: #fff;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select {
font: inherit;
}
button {
color: inherit;
}
img,
svg {
display: block;
max-width: 100%;
}
.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.icon {
width: 18px;
height: 18px;
flex: none;
}
.grain {
position: fixed;
inset: 0;
z-index: 80;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
mix-blend-mode: overlay;
}
.shell {
width: min(var(--shell), calc(100% - 64px));
margin-inline: auto;
}
.skip-link {
position: fixed;
top: 12px;
inset-inline-start: 12px;
z-index: 200;
padding: 10px 16px;
border-radius: 10px;
background: var(--text);
color: var(--bg);
font-weight: 600;
transform: translateY(-160%);
transition: transform 0.2s var(--ease);
}
.skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(11, 13, 16, 0.72);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
flex: none;
}
.brand-mark {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid var(--accent-line);
border-radius: 11px;
color: var(--accent);
background: linear-gradient(145deg, rgba(227, 179, 65, 0.16), rgba(227, 179, 65, 0.03));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.brand-mark svg {
width: 25px;
height: 25px;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.12;
}
.brand-text strong {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand-text span {
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
}
.main-nav {
display: flex;
align-items: center;
gap: 4px;
}
.main-nav a {
position: relative;
padding: 8px 13px;
border-radius: 8px;
color: var(--text-2);
font-size: 13.5px;
font-weight: 500;
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.main-nav a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.04);
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
.count-pill {
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: var(--accent);
color: #17130a;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
}
/* ---------------------------------------------------------
Buttons & shared bits
--------------------------------------------------------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: 11px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition:
transform 0.18s var(--ease),
background 0.2s var(--ease),
border-color 0.2s var(--ease),
color 0.2s var(--ease);
}
.button:active {
transform: translateY(1px) scale(0.99);
}
.button-primary {
background: var(--accent);
color: #17130a;
border-color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.button-primary:hover {
background: #f0c65d;
border-color: #f0c65d;
}
.button-ghost {
background: rgba(255, 255, 255, 0.035);
color: var(--text);
border-color: var(--line-strong);
}
.button-ghost:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.24);
}
.button-small {
min-height: 38px;
padding: 0 14px;
font-size: 12.5px;
border-radius: 9px;
}
.text-button {
padding: 0;
border: 0;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.22);
text-underline-offset: 4px;
transition: color 0.2s var(--ease);
}
.text-button:hover {
color: var(--text);
}
.icon-button {
width: 36px;
height: 36px;
padding: 0;
display: inline-grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.icon-button:hover {
color: var(--text);
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.05);
}
.icon-button svg {
width: 17px;
height: 17px;
}
.eyebrow,
.micro-label {
margin: 0;
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.4;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 20px;
color: var(--text-2);
font-size: 11px;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(227, 179, 65, 0.45);
animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(227, 179, 65, 0.38); }
50% { box-shadow: 0 0 0 6px rgba(227, 179, 65, 0); }
}
.micro-label {
display: block;
font-size: 9.5px;
}
/* ---------------------------------------------------------
Hero
--------------------------------------------------------- */
.hero {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
gap: clamp(40px, 6vw, 92px);
align-items: start;
padding-top: clamp(70px, 9vw, 128px);
padding-bottom: clamp(56px, 8vw, 104px);
}
.hero-copy {
max-width: 780px;
}
.hero h1 {
margin: 0;
font-size: clamp(3rem, 6.6vw, 6.25rem);
font-weight: 800;
line-height: 0.96;
letter-spacing: -0.045em;
}
.accent-text {
color: var(--accent);
}
.hero-lead {
max-width: 54ch;
margin: 26px 0 0;
color: var(--text-2);
font-size: clamp(1.02rem, 1.35vw, 1.16rem);
line-height: 1.75;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: clamp(38px, 5vw, 58px) 0 0;
padding: 0;
border-top: 1px solid var(--line);
}
.hero-stats > div {
flex: 1 1 110px;
padding: 18px 20px 0 0;
border-inline-end: 1px solid var(--line);
}
.hero-stats > div:last-child {
border-inline-end: 0;
}
.hero-stats dt {
color: var(--muted);
font-size: 11.5px;
font-weight: 500;
}
.hero-stats dd {
margin: 5px 0 0;
font-size: clamp(1.35rem, 2.1vw, 1.75rem);
font-weight: 500;
line-height: 1;
}
/* Ladder panel */
.hero-ladder {
position: relative;
padding: 26px 26px 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 42%),
var(--panel);
box-shadow:
0 30px 60px -50px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.hero-ladder::before {
content: "";
position: absolute;
inset: 0 26px auto;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.ladder-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 20px;
}
.ladder-head h2 {
margin: 4px 0 0;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
}
.ladder-code {
color: var(--muted-2);
font-size: 10.5px;
}
.ladder-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.ladder-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 14px 0 12px;
border-bottom: 1px solid var(--line);
}
.ladder-rank {
color: var(--muted-2);
font-size: 10px;
}
.ladder-main {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.ladder-main strong {
font-size: 14.5px;
font-weight: 600;
}
.ladder-main span {
color: var(--muted);
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ladder-count {
color: var(--rarity-color);
font-size: 12px;
font-weight: 500;
}
.ladder-bar {
grid-column: 2 / -1;
height: 2px;
margin-top: 3px;
overflow: hidden;
background: rgba(255, 255, 255, 0.065);
border-radius: 999px;
}
.ladder-bar i {
display: block;
height: 100%;
background: var(--rarity-color);
border-radius: inherit;
opacity: 0.9;
}
.ladder-note {
margin: 18px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.65;
}
/* ---------------------------------------------------------
Ticker
--------------------------------------------------------- */
.ticker {
overflow: hidden;
border-block: 1px solid var(--line);
background: rgba(255, 255, 255, 0.015);
direction: ltr;
}
.ticker-track {
display: flex;
align-items: center;
gap: 34px;
width: max-content;
padding: 13px 0;
color: var(--muted-2);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
animation: ticker 48s linear infinite;
}
.ticker:hover .ticker-track {
animation-play-state: paused;
}
.ticker-track i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
opacity: 0.55;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------------------------------------------------------
Sections
--------------------------------------------------------- */
.section {
padding-top: clamp(68px, 8vw, 116px);
}
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(24px, 5vw, 72px);
padding-top: 26px;
border-top: 1px solid var(--line);
margin-bottom: clamp(28px, 4vw, 44px);
}
.section-head h2 {
margin: 0;
max-width: 18ch;
font-size: clamp(1.9rem, 3.5vw, 3.1rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
}
.section-lead {
max-width: 47ch;
margin: 0 0 4px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.75;
}
/* ---------------------------------------------------------
Rarity cards
--------------------------------------------------------- */
.rarity-grid {
display: grid;
grid-template-columns: 1.24fr 0.76fr;
gap: 12px;
}
.rarity-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 206px;
padding: 24px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(155deg, var(--rarity-soft), transparent 48%),
var(--panel);
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.rarity-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, var(--rarity-color), transparent 72%);
opacity: 0.8;
}
.rarity-card:hover {
border-color: var(--rarity-line);
transform: translateY(-2px);
}
.rarity-card-large {
grid-row: span 2;
min-height: 424px;
padding: 30px;
}
.rarity-card-wide {
grid-column: 1 / -1;
min-height: 0;
}
.rarity-card-top,
.rarity-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.rarity-index {
color: var(--muted-2);
font-size: 9.5px;
}
.rarity-chip {
padding: 4px 8px;
border: 1px solid var(--rarity-line);
border-radius: 999px;
color: var(--rarity-color);
background: var(--rarity-soft);
font-size: 9.5px;
font-weight: 600;
}
.rarity-chip-muted {
color: var(--muted);
border-color: var(--line);
background: transparent;
}
.rarity-card-title {
display: flex;
align-items: baseline;
gap: 12px;
margin-top: auto;
padding-top: 42px;
}
.rarity-card-large .rarity-card-title {
padding-top: 100px;
}
.rarity-card-title h3 {
margin: 0;
color: var(--rarity-color);
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
.rarity-card-large .rarity-card-title h3 {
font-size: clamp(3rem, 5vw, 4.6rem);
}
.rarity-card-title span {
color: var(--muted);
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.rarity-card p {
max-width: 48ch;
margin: 14px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.7;
}
.rarity-card-foot {
justify-content: flex-start;
gap: 10px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.rarity-card-foot strong {
color: var(--text);
font-size: 1.35rem;
font-weight: 500;
line-height: 1;
}
.rarity-card-large .rarity-card-foot strong {
font-size: 2rem;
}
.rarity-card-foot span {
color: var(--muted);
font-size: 10.5px;
}
.rarity-glow {
position: absolute;
inset-inline-end: -60px;
bottom: -90px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(227, 179, 65, 0.16), transparent 68%);
pointer-events: none;
}
/* ---------------------------------------------------------
Catalog toolbar
--------------------------------------------------------- */
.catalog-toolbar {
display: grid;
gap: 18px;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 42%), var(--panel);
}
.search-field {
display: flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: 11px;
background: var(--bg-soft);
color: var(--muted);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.search-field:focus-within {
border-color: var(--accent-line);
background: #0c1015;
}
.search-field input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font-size: 14px;
}
.search-field input::placeholder {
color: var(--muted-2);
}
.search-field input::-webkit-search-cancel-button {
appearance: none;
}
.search-field-main {
height: 54px;
padding-inline: 16px;
}
.search-field-main input {
font-size: 15px;
}
.search-kbd {
padding: 2px 7px;
border: 1px solid var(--line-strong);
border-radius: 5px;
color: var(--muted-2);
font-size: 10px;
line-height: 1.6;
}
.filter-block {
display: flex;
align-items: center;
gap: 16px;
}
.filter-label {
flex: none;
color: var(--muted);
font-size: 11.5px;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--text-2);
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-pill .mono {
color: var(--muted-2);
font-size: 9.5px;
transition: color 0.2s var(--ease);
}
.filter-pill:hover {
border-color: var(--line-strong);
color: var(--text);
}
.filter-pill.is-active {
border-color: var(--text);
background: var(--text);
color: var(--bg);
}
.filter-pill.is-active .mono {
color: rgba(11, 13, 16, 0.55);
}
/* Rarity-tinted active filter chips */
.filter-pill[data-rarity-filter="legendary"].is-active {
border-color: var(--legendary-line);
background: var(--legendary-soft);
color: var(--legendary);
}
.filter-pill[data-rarity-filter="epic"].is-active {
border-color: var(--epic-line);
background: var(--epic-soft);
color: var(--epic);
}
.filter-pill[data-rarity-filter="rare"].is-active {
border-color: var(--rare-line);
background: var(--rare-soft);
color: var(--rare);
}
.filter-pill[data-rarity-filter="regular"].is-active {
border-color: var(--regular-line);
background: var(--regular-soft);
color: var(--regular);
}
.filter-pill:not([data-rarity-filter="all"]).is-active .mono {
color: currentColor;
opacity: 0.68;
}
.select-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.select-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 160px;
}
.select-field > span,
.switch-field > span:last-child {
color: var(--muted);
font-size: 10.5px;
}
select {
appearance: none;
height: 40px;
padding: 0 12px 0 34px;
border: 1px solid var(--line);
border-radius: 9px;
outline: 0;
background-color: var(--bg-soft);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%237f8b98' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
color: var(--text-2);
font-size: 12.5px;
cursor: pointer;
}
select:hover {
border-color: var(--line-strong);
}
select:focus {
border-color: var(--accent-line);
}
.switch-field {
display: flex;
align-items: center;
gap: 9px;
height: 40px;
cursor: pointer;
user-select: none;
}
.switch-field input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.switch-track {
position: relative;
width: 36px;
height: 21px;
flex: none;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: var(--bg-soft);
transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.switch-track i {
position: absolute;
top: 3px;
inset-inline-start: 3px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--muted);
transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.switch-field input:checked + .switch-track {
border-color: var(--accent-line);
background: var(--accent-soft);
}
.switch-field input:checked + .switch-track i {
transform: translateX(-15px);
background: var(--accent);
}
.switch-field input:focus-visible + .switch-track {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.select-row .text-button {
margin-inline-start: auto;
padding-bottom: 10px;
}
.catalog-status {
min-height: 20px;
margin: 16px 2px 12px;
color: var(--muted);
font-size: 12px;
}
.catalog-status strong {
color: var(--text-2);
font-weight: 500;
}
/* ---------------------------------------------------------
Item grid & cards
--------------------------------------------------------- */
.item-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
min-height: 180px;
}
.item-card {
--i: 0;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--rarity-line);
border-radius: 14px;
background:
radial-gradient(130% 85% at 50% -12%, var(--rarity-soft), transparent 62%),
var(--panel);
box-shadow:
0 12px 28px -24px rgba(0, 0, 0, 0.95),
0 0 0 1px rgba(255, 255, 255, 0.015) inset,
0 0 22px -15px var(--rarity-glow);
animation: card-in 0.5s var(--ease) both;
animation-delay: calc(min(var(--i), 14) * 26ms);
transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.item-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: 2;
height: 2px;
background: linear-gradient(90deg, var(--rarity-color), transparent 82%);
opacity: 0.9;
}
.item-card:hover {
transform: translateY(-3px);
border-color: var(--rarity-color);
box-shadow:
0 18px 40px -26px rgba(0, 0, 0, 0.95),
0 0 28px -8px var(--rarity-glow);
}
.item-card-main {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
aspect-ratio: 1 / 1.06;
overflow: hidden;
padding: 12px;
border: 0;
background: rgba(0, 0, 0, 0.2);
color: inherit;
text-align: start;
cursor: pointer;
}
.item-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 20px;
}
.item-id {
color: var(--muted-2);
font-size: 9.5px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 7px;
border: 1px solid var(--rarity-line);
border-radius: 5px;
background: var(--rarity-soft);
color: var(--rarity-color);
font-size: 9.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.badge::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
}
.item-media {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 22px 22px 34px;
background:
radial-gradient(circle at 50% 34%, var(--rarity-soft), transparent 66%),
linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
}
/* Keep item art at (or below) its native resolution so it stays crisp:
it is centred with padding instead of being stretched edge-to-edge. */
.item-media .item-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.item-media svg {
width: 52%;
height: 52%;
color: var(--rarity-color);
opacity: 0.9;
}
.item-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to bottom, rgba(4, 6, 9, 0.62), rgba(4, 6, 9, 0) 32%),
linear-gradient(to top, rgba(4, 6, 9, 0.94) 0%, rgba(4, 6, 9, 0.72) 30%, rgba(4, 6, 9, 0) 62%);
}
.item-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
height: 100%;
}
.item-content-bottom {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: auto;
}
.item-gem {
width: 44px;
height: 44px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--rarity-line);
border-radius: 12px;
background:
radial-gradient(circle at 35% 28%, var(--rarity-soft), transparent 68%),
rgba(0, 0, 0, 0.16);
color: var(--rarity-color);
}
.item-gem svg {
width: 24px;
height: 24px;
}
.item-swatch {
position: relative;
display: block;
width: 44px;
height: 44px;
flex: none;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--swatch);
box-shadow:
inset 0 0 0 4px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.item-slot-label {
color: var(--text-2);
font-size: 11.5px;
font-weight: 500;
}
.item-name {
display: -webkit-box;
min-height: 2.6em;
overflow: hidden;
color: var(--text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-sub {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
color: var(--muted);
font-size: 10.5px;
}
.item-sub span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.item-sub span + span::before {
content: "";
width: 2px;
height: 2px;
border-radius: 50%;
background: var(--muted-2);
}
.item-flags {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-height: 18px;
margin-top: 2px;
}
.flag {
padding: 2px 6px;
border: 1px solid var(--line);
border-radius: 4px;
background: rgba(4, 6, 9, 0.55);
color: var(--muted);
font-size: 9px;
line-height: 1.5;
}
.flag-warn {
color: var(--danger);
border-color: rgba(225, 120, 120, 0.28);
background: rgba(74, 26, 26, 0.72);
}
.flag-member {
color: var(--accent);
border-color: var(--accent-line);
background: rgba(66, 52, 20, 0.72);
}
.item-card-actions {
display: flex;
border-top: 1px solid var(--line);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.item-card:hover .item-card-actions,
.item-card:focus-within .item-card-actions {
opacity: 1;
transform: translateY(0);
}
.item-card-actions button {
flex: 1;
padding: 9px 6px;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 10px;
font-weight: 500;
transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.item-card-actions button + button {
border-inline-start: 1px solid var(--line);
}
.item-card-actions button:hover {
background: rgba(255, 255, 255, 0.045);
color: var(--text);
}
@keyframes card-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Loading skeleton */
.skeleton-card {
min-height: 200px;
aspect-ratio: 1 / 1.06;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--panel);
overflow: hidden;
position: relative;
}
.skeleton-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 45%, transparent 70%);
transform: translateX(-100%);
animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
to { transform: translateX(100%); }
}
/* Empty state */
.empty-state {
padding: 64px 24px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
text-align: center;
background: rgba(255, 255, 255, 0.012);
}
.empty-mark {
display: inline-grid;
place-items: center;
width: 62px;
height: 62px;
margin-bottom: 14px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--muted);
}
.empty-mark svg {
width: 28px;
height: 28px;
}
.empty-state h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.empty-state p {
max-width: 42ch;
margin: 8px auto 20px;
color: var(--muted);
font-size: 13px;
}
/* ---------------------------------------------------------
Trade board
--------------------------------------------------------- */
.trade-board {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.032), transparent 44%), var(--panel);
}
.trade-column {
display: flex;
flex-direction: column;
min-width: 0;
padding: 24px;
}
.trade-column[data-side="offer"] {
border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius);
}
.trade-column[data-side="request"] {
border-start-start-radius: var(--radius);
border-end-start-radius: var(--radius);
}
.trade-column-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.trade-column-head h3 {
margin: 4px 0 0;
font-size: 21px;
font-weight: 700;
letter-spacing: -0.025em;
}
.trade-score {
min-width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(0, 0, 0, 0.16);
color: var(--text);
font-size: 18px;
font-weight: 500;
}
.trade-score.is-empty {
color: var(--muted-2);
}
.trade-search {
position: relative;
margin-top: 16px;
}
.search-field-small {
height: 42px;
border-radius: 9px;
}
.search-field-small input {
font-size: 12.5px;
}
.autocomplete {
position: absolute;
z-index: 30;
inset-inline: 0;
top: calc(100% + 6px);
max-height: 286px;
overflow: auto;
padding: 5px;
border: 1px solid var(--line-strong);
border-radius: 11px;
background: #0c1015;
box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.9);
}
.autocomplete-option {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 9px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text-2);
text-align: start;
cursor: pointer;
}
.autocomplete-option:hover,
.autocomplete-option.is-highlighted {
background: rgba(255, 255, 255, 0.055);
color: var(--text);
}
.autocomplete-dot {
width: 5px;
height: 22px;
flex: none;
border-radius: 3px;
background: var(--rarity-color);
opacity: 0.9;
}
.autocomplete-thumb {
width: 24px;
height: 24px;
flex: none;
object-fit: contain;
border: 1px solid var(--line);
border-radius: 6px;
background: rgba(0, 0, 0, 0.18);
}
.autocomplete-name {
flex: 1;
min-width: 0;
overflow: hidden;
font-size: 12px;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.autocomplete-meta {
flex: none;
color: var(--muted-2);
font-family: var(--mono);
font-size: 9px;
}
.autocomplete-empty {
padding: 12px;
color: var(--muted);
font-size: 12px;
text-align: center;
}
.trade-list {
display: flex;
flex-direction: column;
gap: 7px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.trade-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(0, 0, 0, 0.14);
animation: card-in 0.3s var(--ease) both;
}
.trade-item-img {
width: 30px;
height: 30px;
flex: none;
object-fit: contain;
border: 1px solid var(--line);
border-radius: 7px;
background: rgba(0, 0, 0, 0.18);
}
.trade-item-mark {
width: 4px;
height: 26px;
border-radius: 3px;
background: var(--rarity-color);
}
.trade-item-copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.trade-item-name {
overflow: hidden;
font-size: 12px;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.trade-item-meta {
color: var(--muted);
font-size: 9.5px;
}
.trade-item .badge {
font-size: 8.5px;
padding: 2px 6px;
}
.trade-item-remove {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--muted-2);
cursor: pointer;
}
.trade-item-remove:hover {
background: rgba(225, 120, 120, 0.1);
color: var(--danger);
}
.trade-item-remove svg {
width: 13px;
height: 13px;
}
.trade-empty {
margin: 16px 0 0;
padding: 28px 18px;
border: 1px dashed var(--line-strong);
border-radius: 10px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.65;
text-align: center;
}
.trade-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.trade-summary:empty {
display: none;
}
.summary-counts {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.summary-count {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border: 1px solid var(--rarity-line);
border-radius: 999px;
background: var(--rarity-soft);
color: var(--rarity-color);
font-size: 9px;
}
.summary-count .mono {
font-size: 9px;
}
.summary-total {
color: var(--muted);
font-size: 10.5px;
}
.trade-divider {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 18px 0;
}
.trade-divider-line {
width: 1px;
flex: 1;
background: var(--line);
}
.swap-button {
width: 38px;
height: 38px;
flex: none;
border-radius: 50%;
background: var(--panel-2);
color: var(--text-2);
}
.swap-button:hover {
color: var(--accent);
border-color: var(--accent-line);
}
.verdict {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 14px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--panel);
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.verdict-icon {
width: 34px;
height: 34px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
color: var(--muted);
background: rgba(0, 0, 0, 0.14);
}
.verdict-icon svg {
width: 18px;
height: 18px;
}
.verdict-copy strong {
display: block;
font-size: 13.5px;
font-weight: 600;
}
.verdict-copy p {
margin: 3px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
.verdict.is-balanced {
border-color: var(--rare-line);
background: linear-gradient(90deg, var(--rare-soft), transparent 55%), var(--panel);
}
.verdict.is-balanced .verdict-icon {
color: var(--rare);
border-color: var(--rare-line);
}
.verdict.is-offer {
border-color: rgba(225, 120, 120, 0.3);
background: linear-gradient(90deg, rgba(225, 120, 120, 0.09), transparent 55%), var(--panel);
}
.verdict.is-offer .verdict-icon {
color: var(--danger);
border-color: rgba(225, 120, 120, 0.3);
}
.verdict.is-request {
border-color: var(--accent-line);
background: linear-gradient(90deg, var(--accent-soft), transparent 55%), var(--panel);
}
.verdict.is-request .verdict-icon {
color: var(--accent);
border-color: var(--accent-line);
}
.trade-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 14px;
}
.trade-disclaimer {
max-width: 66ch;
color: var(--muted-2);
font-size: 10.5px;
line-height: 1.6;
text-align: end;
}
/* ---------------------------------------------------------
About
--------------------------------------------------------- */
.about-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 42px);
}
.about-card {
padding-top: 18px;
border-top: 1px solid var(--line-strong);
}
.about-number {
color: var(--accent);
font-size: 10px;
}
.about-card h3 {
margin: 12px 0 8px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
}
.about-card p {
margin: 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.75;
}
.source-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-top: clamp(36px, 5vw, 56px);
padding: 20px 0;
border-block: 1px solid var(--line);
}
.source-strip > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.source-strip strong {
color: var(--text-2);
font-size: 12.5px;
font-weight: 500;
}
/* ---------------------------------------------------------
Footer
--------------------------------------------------------- */
.site-footer {
margin-top: clamp(70px, 9vw, 120px);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11.5px;
}
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding-block: 26px;
}
.footer-inner a {
margin-inline-start: auto;
color: var(--text-2);
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 4px;
}
.footer-inner a:hover {
color: var(--accent);
}
.footer-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--muted-2);
}
/* ---------------------------------------------------------
Modal
--------------------------------------------------------- */
.item-modal {
width: min(720px, calc(100vw - 28px));
max-height: min(88dvh, 860px);
margin: auto;
padding: 0;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--panel);
color: var(--text);
box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.95);
}
.item-modal::backdrop {
background: rgba(4, 6, 8, 0.72);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.item-modal[open] {
animation: modal-in 0.32s var(--ease) both;
}
@keyframes modal-in {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-body {
max-height: calc(min(88dvh, 860px) - 2px);
overflow-y: auto;
overscroll-behavior: contain;
padding: clamp(22px, 4vw, 36px);
}
.modal-close-form {
margin: 0;
}
.modal-close {
position: absolute;
top: 16px;
inset-inline-end: 16px;
z-index: 3;
background: rgba(11, 13, 16, 0.65);
backdrop-filter: blur(6px);
}
.modal-eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
}
.modal-title {
margin: 0;
padding-inline-end: 44px;
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.035em;
}
.modal-subtitle {
margin: 6px 0 0;
color: var(--muted);
font-size: 12.5px;
}
.modal-hero {
display: flex;
align-items: center;
gap: 18px;
margin-top: 24px;
padding: 18px;
border: 1px solid var(--rarity-line);
border-radius: 14px;
background: linear-gradient(100deg, var(--rarity-soft), transparent 72%);
}
.modal-gem {
width: 66px;
height: 66px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--rarity-line);
border-radius: 16px;
color: var(--rarity-color);
background: rgba(0, 0, 0, 0.16);
}
.modal-gem svg {
width: 36px;
height: 36px;
}
.item-gem.has-image,
.modal-gem.has-image {
padding: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.18);
}
.item-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.visual-fallback {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.visual-fallback[hidden] {
display: none;
}
.has-image .item-swatch {
border: none;
box-shadow: none;
}
.modal-hero-copy {
min-width: 0;
}
.modal-hero-copy .badge {
margin-bottom: 6px;
}
.modal-hero-copy p {
margin: 0;
color: var(--text-2);
font-size: 12.5px;
}
.modal-description {
margin: 20px 0 0;
color: var(--text-2);
font-size: 13px;
line-height: 1.75;
}
.modal-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 24px;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--line);
}
.modal-meta > div {
padding: 12px 14px;
background: var(--panel);
}
.modal-meta dt {
color: var(--muted);
font-size: 9.5px;
}
.modal-meta dd {
margin: 3px 0 0;
color: var(--text-2);
font-size: 12.5px;
font-weight: 500;
}
.modal-warning {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 16px;
padding: 10px 12px;
border: 1px solid rgba(225, 120, 120, 0.28);
border-radius: 9px;
background: rgba(225, 120, 120, 0.07);
color: var(--danger);
font-size: 11.5px;
line-height: 1.6;
}
.modal-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.modal-actions .button {
flex: 1 1 180px;
}
/* ---------------------------------------------------------
Toast
--------------------------------------------------------- */
.toast {
position: fixed;
z-index: 120;
bottom: 22px;
left: 50%;
max-width: min(420px, calc(100vw - 32px));
padding: 11px 17px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: rgba(22, 28, 36, 0.94);
color: var(--text);
font-size: 12px;
text-align: center;
box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
transform: translateX(-50%);
animation: toast-in 0.25s var(--ease) both;
}
.toast[hidden] {
display: none;
}
@keyframes toast-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 1180px) {
.item-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero {
gap: 44px;
}
}
@media (max-width: 980px) {
:root {
--header-h: 68px;
}
.main-nav {
display: none;
}
.hero {
grid-template-columns: 1fr;
gap: 38px;
padding-top: 56px;
}
.hero-copy {
max-width: 720px;
}
.hero-ladder {
max-width: 640px;
}
.section-head {
display: block;
}
.section-head h2 {
max-width: 26ch;
}
.section-lead {
margin-top: 14px;
}
.rarity-grid {
grid-template-columns: 1fr 1fr;
}
.rarity-card-large {
grid-row: auto;
grid-column: 1 / -1;
min-height: 300px;
}
.rarity-card-large .rarity-card-title {
padding-top: 56px;
}
.rarity-card-wide {
grid-column: 1 / -1;
}
.trade-board {
grid-template-columns: 1fr;
}
.trade-divider {
flex-direction: row;
padding: 0 24px;
}
.trade-divider-line {
width: auto;
height: 1px;
flex: 1;
}
.about-grid {
grid-template-columns: 1fr;
gap: 0;
}
.about-card {
padding: 20px 0;
}
.about-card:first-child {
border-top: 0;
padding-top: 0;
}
}
@media (max-width: 760px) {
.shell {
width: min(var(--shell), calc(100% - 36px));
}
.header-inner {
gap: 12px;
}
.brand-text span {
display: none;
}
.header-actions .button {
padding: 0 11px;
font-size: 11.5px;
}
.hero h1 {
font-size: clamp(2.8rem, 12vw, 4.4rem);
}
.hero-actions .button {
flex: 1 1 auto;
}
.hero-stats > div {
flex-basis: 50%;
padding: 14px 0 0;
border-inline-end: 0;
}
.hero-stats > div:nth-child(odd) {
border-inline-end: 1px solid var(--line);
}
.hero-stats > div:nth-child(n + 3) {
margin-top: 14px;
}
.rarity-grid {
grid-template-columns: 1fr;
}
.rarity-card-large,
.rarity-card-wide {
grid-column: auto;
}
.rarity-card-large {
min-height: 340px;
}
.catalog-toolbar {
padding: 14px;
}
.filter-block {
display: block;
}
.filter-label {
display: block;
margin-bottom: 8px;
}
.filter-pills {
gap: 5px;
}
.filter-pill {
padding: 6px 10px;
font-size: 11.5px;
}
.select-row {
gap: 10px;
}
.select-field {
flex: 1 1 140px;
min-width: 0;
}
.select-row .text-button {
margin-inline-start: 0;
}
.item-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.item-card-actions {
opacity: 1;
transform: none;
}
.item-card-main {
padding: 13px 13px 11px;
}
.item-name {
font-size: 13px;
}
.item-gem,
.item-swatch {
width: 38px;
height: 38px;
}
.trade-column {
padding: 18px;
}
.trade-actions {
display: block;
}
.trade-disclaimer {
display: block;
margin-top: 10px;
text-align: start;
}
.source-strip {
grid-template-columns: 1fr 1fr;
gap: 18px 12px;
}
.modal-meta {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.shell {
width: calc(100% - 28px);
}
.brand-mark {
width: 34px;
height: 34px;
}
.brand-text strong {
font-size: 13.5px;
}
.header-actions .button {
min-height: 34px;
padding: 0 9px;
}
.item-grid {
grid-template-columns: 1fr;
}
.item-name {
font-size: 14px;
}
.item-visual {
margin: 11px 0 9px;
}
.modal-meta {
grid-template-columns: 1fr;
}
.footer-inner a {
margin-inline-start: 0;
}
}
@media (hover: none) {
.item-card-actions {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.ticker-track {
animation: none;
}
}
/* =========================================================
Theme system
========================================================= */
html.theme-transition,
html.theme-transition body,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition:
background-color 0.35s var(--ease),
border-color 0.35s var(--ease),
color 0.35s var(--ease),
fill 0.35s var(--ease),
stroke 0.35s var(--ease),
box-shadow 0.35s var(--ease) !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition,
html.theme-transition body,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition-duration: 0.001ms !important;
}
}
/* ---------- Light theme palette ---------- */
[data-theme="light"] {
--bg: #eef1f6;
--bg-soft: #f6f8fb;
--panel: transparent;
--panel-2: #f6f8fb;
--panel-3: #eceff4;
--line: rgba(16, 26, 42, 0.1);
--line-strong: rgba(16, 26, 42, 0.18);
--text: #101725;
--text-2: #3b475a;
--muted: #64748b;
--muted-2: #94a3b8;
--accent: #b7791f;
--accent-soft: rgba(183, 121, 31, 0.12);
--accent-line: rgba(183, 121, 31, 0.42);
--legendary: #b7791f;
--legendary-soft: rgba(183, 121, 31, 0.14);
--legendary-line: rgba(183, 121, 31, 0.4);
--legendary-glow: rgba(183, 121, 31, 0.3);
--epic: #6d3aed;
--epic-soft: rgba(109, 58, 237, 0.12);
--epic-line: rgba(109, 58, 237, 0.34);
--epic-glow: rgba(109, 58, 237, 0.24);
--rare: #2563eb;
--rare-soft: rgba(37, 99, 235, 0.12);
--rare-line: rgba(37, 99, 235, 0.32);
--rare-glow: rgba(37, 99, 235, 0.22);
--regular: #64748b;
--regular-soft: rgba(100, 116, 139, 0.12);
--regular-line: rgba(100, 116, 139, 0.3);
--regular-glow: rgba(100, 116, 139, 0.18);
--danger: #d64545;
--success: #15803d;
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="light"] body {
background:
radial-gradient(1100px 700px at 88% -12%, rgba(183, 121, 31, 0.1), transparent 62%),
radial-gradient(900px 620px at 4% 9%, rgba(37, 99, 235, 0.05), transparent 58%),
var(--bg);
}
[data-theme="light"] .grain {
opacity: 0.02;
mix-blend-mode: multiply;
}
[data-theme="light"] ::selection {
background: rgba(183, 121, 31, 0.3);
color: #17130a;
}
[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] .main-nav a:hover {
background: rgba(16, 26, 42, 0.05);
}
[data-theme="light"] .brand-mark {
background: linear-gradient(145deg, rgba(183, 121, 31, 0.18), rgba(183, 121, 31, 0.04));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .button-ghost {
background: rgba(16, 26, 42, 0.035);
}
[data-theme="light"] .button-ghost:hover {
background: rgba(16, 26, 42, 0.07);
border-color: rgba(16, 26, 42, 0.24);
}
[data-theme="light"] .button-primary {
color: #1a1305;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .button-primary:hover {
background: #a46b16;
border-color: #a46b16;
color: #fff;
}
[data-theme="light"] .text-button {
text-decoration-color: rgba(16, 26, 42, 0.28);
}
[data-theme="light"] .icon-button:hover {
background: rgba(16, 26, 42, 0.06);
}
[data-theme="light"] .catalog-toolbar {
background: var(--panel);
box-shadow: 0 1px 2px rgba(16, 26, 42, 0.05);
}
[data-theme="light"] .search-field {
background: #f6f8fb;
}
[data-theme="light"] .search-field:focus-within {
background: transparent;
}
[data-theme="light"] select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="light"] .filter-pill[data-rarity-filter="all"].is-active .mono {
color: rgba(255, 255, 255, 0.66);
}
/* ---------- Item imagery: transparent + theme-aware ---------- */
:root {
--scrim-top: rgba(4, 6, 9, 0.58);
--scrim-fade: rgba(4, 6, 9, 0);
--scrim-mid: rgba(4, 6, 9, 0.68);
--scrim-bottom: rgba(4, 6, 9, 0.92);
}
[data-theme="light"] {
--scrim-top: rgba(255, 255, 255, 0.72);
--scrim-fade: rgba(255, 255, 255, 0);
--scrim-mid: rgba(255, 255, 255, 0.72);
--scrim-bottom: rgba(255, 255, 255, 0.94);
}
.item-card-main {
background: transparent;
}
.item-media {
padding: 12px 12px 22px;
background: radial-gradient(circle at 50% 30%, var(--rarity-soft), transparent 70%);
}
.item-media .item-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter:
drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45))
drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4));
}
[data-theme="light"] .item-media .item-img {
filter:
drop-shadow(0 2px 3px rgba(16, 26, 42, 0.42))
drop-shadow(0 12px 20px rgba(16, 26, 42, 0.2));
}
/* The scrim follows the theme so overlaid text stays readable on either mode. */
.item-scrim {
background:
linear-gradient(to bottom, var(--scrim-top), var(--scrim-fade) 32%),
linear-gradient(to top, var(--scrim-bottom) 0%, var(--scrim-mid) 30%, var(--scrim-fade) 62%);
}
[data-theme="light"] .item-card .flag {
color: var(--muted);
border-color: var(--line);
background: rgba(255, 255, 255, 0.72);
}
[data-theme="light"] .item-card .flag-warn {
color: var(--danger);
border-color: rgba(214, 69, 69, 0.32);
background: rgba(214, 69, 69, 0.1);
}
[data-theme="light"] .item-card .flag-member {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-soft);
}
[data-theme="light"] .item-card {
box-shadow:
0 12px 26px -22px rgba(16, 26, 42, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 0 22px -15px var(--rarity-glow);
}
[data-theme="light"] .item-card:hover {
box-shadow:
0 18px 38px -24px rgba(16, 26, 42, 0.45),
0 0 26px -8px var(--rarity-glow);
}
/* ---------- Trade ---------- */
[data-theme="light"] .trade-item {
background: rgba(16, 26, 42, 0.04);
}
[data-theme="light"] .trade-score {
background: rgba(16, 26, 42, 0.05);
}
[data-theme="light"] .autocomplete {
background: var(--panel);
box-shadow: 0 22px 44px -18px rgba(16, 26, 42, 0.28);
}
[data-theme="light"] .autocomplete-option:hover,
[data-theme="light"] .autocomplete-option.is-highlighted {
background: rgba(16, 26, 42, 0.06);
}
[data-theme="light"] .autocomplete-thumb,
[data-theme="light"] .trade-item-img,
[data-theme="light"] .modal-gem,
[data-theme="light"] .modal-gem.has-image {
background: rgba(16, 26, 42, 0.05);
}
/* Crisp rendering for the smaller item thumbnails as well. */
.modal-gem .item-img,
.trade-item-img,
.autocomplete-thumb {
image-rendering: -webkit-optimize-contrast;
}
.modal-gem .item-img {
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .modal-gem .item-img {
filter: drop-shadow(0 5px 10px rgba(16, 26, 42, 0.2));
}
.trade-item-img,
.autocomplete-thumb {
filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
}
[data-theme="light"] .trade-item-img,
[data-theme="light"] .autocomplete-thumb {
filter: drop-shadow(0 3px 7px rgba(16, 26, 42, 0.16));
}
/* ---------- Modal + toast ---------- */
[data-theme="light"] .item-modal {
box-shadow: 0 40px 120px -30px rgba(16, 26, 42, 0.4);
}
[data-theme="light"] .item-modal::backdrop {
background: rgba(16, 26, 42, 0.5);
}
[data-theme="light"] .modal-close {
background: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] .toast {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 50px -18px rgba(16, 26, 42, 0.35);
}
/* =========================================================
Theme switch
========================================================= */
.theme-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--line);
border-radius: 11px;
background: rgba(255, 255, 255, 0.03);
flex: none;
}
[data-theme="light"] .theme-switch {
background: rgba(16, 26, 42, 0.035);
}
.theme-option {
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.theme-option svg {
width: 16px;
height: 16px;
}
.theme-option:hover {
color: var(--text);
}
.theme-option.is-active {
background: var(--accent-soft);
color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent-line);
}
/* =========================================================
Pagination
========================================================= */
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 28px;
}
.pagination[hidden] {
display: none;
}
.page-btn {
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 10px;
background: transparent;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-btn:hover:not(:disabled):not(.is-current) {
color: var(--text);
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .page-btn:hover:not(:disabled):not(.is-current) {
background: rgba(16, 26, 42, 0.05);
}
.page-btn.is-current {
border-color: var(--accent-line);
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
cursor: default;
}
.page-btn:disabled {
opacity: 0.38;
cursor: default;
}
.page-step {
min-width: 62px;
}
.page-ellipsis {
min-width: 22px;
color: var(--muted-2);
text-align: center;
user-select: none;
}
/* =========================================================
Back to top
========================================================= */
.back-to-top {
position: fixed;
inset-inline-end: 22px;
bottom: 22px;
z-index: 90;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--panel-2);
color: var(--text);
cursor: pointer;
box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.96);
transition:
opacity 0.25s var(--ease),
transform 0.25s var(--ease),
visibility 0.25s var(--ease),
background 0.2s var(--ease),
color 0.2s var(--ease),
border-color 0.2s var(--ease);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.back-to-top:hover {
border-color: var(--accent-line);
color: var(--accent);
}
.back-to-top svg {
width: 20px;
height: 20px;
}
[data-theme="light"] .back-to-top {
box-shadow: 0 16px 34px -18px rgba(16, 26, 42, 0.4);
}
@media (max-width: 480px) {
.theme-option {
width: 27px;
height: 27px;
}
.back-to-top {
inset-inline-end: 14px;
bottom: 14px;
width: 44px;
height: 44px;
}
.page-step {
min-width: 54px;
}
}
/* =========================================================
Design v2 ׳’ג‚¬ג€ light, sectioned landing design
(also defines the community-rarity visual language)
========================================================= */
/* ---------- Community rarity tokens (separate from official rarity) ---------- */
[data-community="common"] {
--community-color: #64748b;
--community-soft: rgba(100, 116, 139, 0.14);
--community-line: rgba(100, 116, 139, 0.34);
}
[data-community="uncommon"] {
--community-color: #0ea5e9;
--community-soft: rgba(14, 165, 233, 0.14);
--community-line: rgba(14, 165, 233, 0.34);
}
[data-community="rare"] {
--community-color: #6366f1;
--community-soft: rgba(99, 102, 241, 0.14);
--community-line: rgba(99, 102, 241, 0.34);
}
[data-community="very-rare"] {
--community-color: #8b5cf6;
--community-soft: rgba(139, 92, 246, 0.14);
--community-line: rgba(139, 92, 246, 0.36);
}
[data-community="extremely-rare"] {
--community-color: #d946ef;
--community-soft: rgba(217, 70, 239, 0.14);
--community-line: rgba(217, 70, 239, 0.36);
}
[data-community="ultra-rare"] {
--community-color: #f43f5e;
--community-soft: rgba(244, 63, 94, 0.14);
--community-line: rgba(244, 63, 94, 0.38);
}
/* ---------- Accent retune (violet) ---------- */
:root {
--accent: #8f7bff;
--accent-soft: rgba(143, 123, 255, 0.16);
--accent-line: rgba(143, 123, 255, 0.5);
--tint: rgba(255, 255, 255, 0.022);
--tint-2: rgba(255, 255, 255, 0.036);
--shadow-soft: 0 24px 60px -40px rgba(0, 0, 0, 0.85);
}
[data-theme="light"] {
--bg: #f5f6fb;
--bg-soft: #eef0f8;
--panel: transparent;
--panel-2: #f4f6fb;
--panel-3: #eceff7;
--line: rgba(20, 27, 60, 0.09);
--line-strong: rgba(20, 27, 60, 0.16);
--text: #131a2e;
--text-2: #43506b;
--muted: #667391;
--muted-2: #9aa3bb;
--accent: #6d5efc;
--accent-soft: rgba(109, 94, 252, 0.11);
--accent-line: rgba(109, 94, 252, 0.4);
--tint: #eceefb;
--tint-2: #e4e8fa;
--shadow-soft: 0 26px 60px -42px rgba(24, 30, 74, 0.45);
}
[data-theme="light"] body {
background:
radial-gradient(1200px 640px at 86% -12%, rgba(109, 94, 252, 0.1), transparent 60%),
radial-gradient(920px 560px at 5% 4%, rgba(56, 189, 248, 0.06), transparent 58%),
var(--bg);
}
[data-theme="light"] ::selection {
background: rgba(109, 94, 252, 0.24);
color: #120e35;
}
[data-theme="light"] .brand-mark {
background: linear-gradient(145deg, rgba(109, 94, 252, 0.18), rgba(109, 94, 252, 0.03));
}
[data-theme="light"] .grain {
opacity: 0.016;
mix-blend-mode: multiply;
}
/* Violet primary buttons read better with white text in both themes. */
.button-primary,
[data-theme="light"] .button-primary {
color: #ffffff;
}
.button-primary:hover {
background: #8577ff;
border-color: #8577ff;
}
[data-theme="light"] .button-primary {
background: #6d5efc;
border-color: #6d5efc;
}
[data-theme="light"] .button-primary:hover {
background: #5a4bf0;
border-color: #5a4bf0;
}
.count-pill {
color: #ffffff;
}
/* ---------- Bands / section tinting ---------- */
.band {
padding-block: clamp(54px, 7vw, 104px);
}
.band-tint {
background: var(--tint);
border-block: 1px solid var(--line);
}
.band-plain {
background: transparent;
}
.hero-band {
border-top: 0;
padding-block: clamp(44px, 6vw, 84px) clamp(46px, 6vw, 88px);
}
.section-head {
border-top: 0;
padding-top: 0;
margin-bottom: clamp(30px, 4vw, 48px);
}
.section-head-center {
display: block;
text-align: center;
max-width: 760px;
margin-inline: auto;
margin-bottom: clamp(34px, 4.4vw, 56px);
}
.section-head-center .eyebrow {
justify-content: center;
}
.section-head-center h2 {
max-width: 24ch;
margin-inline: auto;
font-size: clamp(1.8rem, 3.4vw, 2.85rem);
line-height: 1.1;
}
.section-head-center .section-lead {
max-width: 62ch;
margin: 18px auto 0;
font-size: 15px;
}
/* ---------- Hero (v2) ---------- */
.hero {
display: block;
padding-top: 0;
padding-bottom: 0;
text-align: center;
}
.hero-copy {
max-width: 900px;
margin-inline: auto;
}
.hero .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(2.05rem, 4.6vw, 4.05rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
}
.hero-lead {
max-width: 66ch;
margin: 24px auto 0;
color: var(--muted);
font-size: clamp(1rem, 1.3vw, 1.14rem);
line-height: 1.78;
}
.hero-lead strong {
color: var(--text-2);
font-weight: 600;
}
.hero-actions {
justify-content: center;
margin-top: 30px;
}
.hero-stats {
justify-content: center;
border-top: 0;
margin-top: clamp(34px, 4vw, 48px);
}
.hero-stats > div {
flex: 0 1 auto;
padding: 0 clamp(16px, 2.4vw, 30px);
}
.hero-stats > div:first-child {
padding-inline-start: 0;
}
.hero-stats > div:last-child {
padding-inline-end: 0;
border-inline-end: 0;
}
/* ---------- App preview card ---------- */
.app-preview {
position: relative;
max-width: 1040px;
margin: clamp(40px, 5vw, 66px) auto 0;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--panel);
box-shadow:
0 60px 110px -60px rgba(24, 30, 74, 0.55),
0 14px 36px -26px rgba(24, 30, 74, 0.4);
overflow: hidden;
text-align: start;
}
.app-preview-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 18px;
border-bottom: 1px solid var(--line);
background: var(--panel-2);
}
.app-preview-bar .dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--line-strong);
}
.app-preview-url {
margin-inline-start: 10px;
color: var(--muted-2);
font-size: 11.5px;
}
.app-preview-body {
padding: clamp(16px, 2.4vw, 28px);
}
.app-preview-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.app-pill {
flex: 1 1 200px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--panel-2);
color: var(--muted-2);
font-size: 12.5px;
}
.app-chip {
padding: 6px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
color: var(--rarity-color, var(--muted));
background: var(--rarity-soft, var(--panel-2));
border: 1px solid var(--rarity-line, var(--line));
}
.app-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.app-tile {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
padding: 14px;
border-radius: 14px;
border: 1px solid var(--line);
background:
radial-gradient(circle at 50% 40%, var(--rarity-soft, transparent), transparent 68%),
var(--panel-2);
}
.app-tile img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 12px 18px rgba(16, 20, 60, 0.2));
}
.app-tile::after {
content: "";
position: absolute;
top: 10px;
inset-inline-end: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--community-color, var(--line-strong));
box-shadow: 0 0 0 4px var(--community-soft, transparent);
}
.app-preview-badge {
position: absolute;
bottom: 16px;
inset-inline-start: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
font-size: 12px;
font-weight: 600;
color: var(--text-2);
box-shadow: 0 16px 34px -22px rgba(24, 30, 74, 0.5);
}
.app-preview-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
}
/* ---------- Features grid ---------- */
.feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
}
.feature-card {
padding: clamp(22px, 2.2vw, 28px);
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
box-shadow: var(--shadow-soft);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--accent-line);
box-shadow: 0 34px 64px -44px rgba(24, 30, 74, 0.5);
}
.feature-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 14px;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.feature-card h3 {
margin: 0 0 8px;
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.feature-card p {
margin: 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.72;
}
/* ---------- Showcase (zig-zag) ---------- */
.showcase-block {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(28px, 5vw, 76px);
align-items: center;
padding-block: clamp(28px, 3.6vw, 52px);
}
.showcase-block + .showcase-block {
border-top: 1px solid var(--line);
}
.showcase-block.is-reversed .showcase-media {
order: 2;
}
.showcase-media {
position: relative;
display: grid;
place-items: center;
min-height: 300px;
padding: 36px;
border-radius: 24px;
border: 1px solid var(--line);
background:
radial-gradient(circle at 50% 34%, var(--rarity-soft, transparent), transparent 66%),
var(--panel);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.showcase-media > img {
max-height: 232px;
width: auto;
max-width: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 20px 30px rgba(16, 20, 60, 0.24));
}
.showcase-badge {
position: absolute;
top: 16px;
inset-inline-start: 16px;
padding: 7px 13px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
color: var(--text-2);
font-size: 11.5px;
font-weight: 600;
box-shadow: 0 14px 30px -22px rgba(24, 30, 74, 0.5);
}
.showcase-media[data-community] .showcase-badge {
color: var(--community-color);
}
.showcase-media.is-grid {
padding: 30px;
}
.showcase-thumbs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
width: 100%;
}
.showcase-thumbs img {
width: 100%;
height: 118px;
object-fit: contain;
padding: 12px;
border-radius: 16px;
border: 1px solid var(--line);
background: var(--panel-2);
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 12px 18px rgba(16, 20, 60, 0.18));
}
.showcase-copy .eyebrow {
margin-bottom: 12px;
}
.showcase-copy h3 {
margin: 0 0 14px;
font-size: clamp(1.4rem, 2.5vw, 2.05rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.14;
}
.showcase-copy p {
max-width: 52ch;
margin: 0 0 24px;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
.showcase-copy strong {
color: var(--text-2);
font-weight: 600;
}
/* ---------- Scale boards ---------- */
.scale-boards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 28px);
}
.scale-board {
padding: clamp(22px, 2.4vw, 28px);
border: 1px solid var(--line);
border-radius: 20px;
background: var(--panel);
box-shadow: var(--shadow-soft);
}
.scale-board-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
}
.scale-board-head h3 {
margin: 5px 0 0;
font-size: 1.24rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.scale-board-code {
color: var(--muted-2);
font-size: 11px;
}
.scale-board-note {
margin: 16px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}
.scale-board-community {
border-color: var(--accent-line);
}
.scale-board-community .ladder-list {
border-top-color: var(--line);
}
.scale-board-community .ladder-row {
--rarity-color: var(--community-color);
}
/* ---------- Community chip on catalog cards ---------- */
.community-chip {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
width: fit-content;
margin-top: 7px;
padding: 3px 9px 3px 8px;
border-radius: 999px;
color: var(--community-color, var(--muted));
background: var(--community-soft, var(--panel-2));
border: 1px solid var(--community-line, var(--line));
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
}
.community-chip i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ---------- Modal: official vs community ---------- */
.modal-rarity-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 18px 0;
}
.modal-rarity-col {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border-radius: 14px;
border: 1px solid var(--rarity-line, var(--line));
background: var(--rarity-soft, var(--panel-2));
}
.modal-rarity-col[data-community] {
border-color: var(--community-line);
background: var(--community-soft);
}
.modal-rarity-col strong {
font-size: 1.06rem;
font-weight: 700;
}
.modal-rarity-col .rarity-scale {
color: var(--muted);
font-size: 12px;
}
.modal-community {
margin: 18px 0;
padding: 18px 20px;
border-radius: 16px;
border: 1px solid var(--community-line, var(--line));
background: var(--community-soft, var(--panel-2));
}
.modal-community-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.modal-community-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.community-pill {
padding: 5px 12px;
border-radius: 999px;
color: #ffffff;
background: var(--community-color, var(--muted));
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.modal-meta-community {
margin: 0;
}
.modal-community-empty {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.modal-note {
margin: 12px 0 0;
color: var(--muted-2);
font-size: 11.5px;
line-height: 1.6;
}
.modal-disclaimer {
margin: 18px 0 0;
padding: 13px 15px;
border: 1px dashed var(--line-strong);
border-radius: 12px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.7;
}
/* ---------- Disclaimer block + logo strip ---------- */
.disclaimer {
display: flex;
gap: 16px;
align-items: flex-start;
margin-top: clamp(30px, 4vw, 44px);
padding: clamp(20px, 2.4vw, 26px);
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel);
}
.disclaimer-icon {
flex: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
}
.disclaimer-icon svg {
width: 23px;
height: 23px;
}
.disclaimer strong {
display: block;
margin-bottom: 6px;
font-size: 1.02rem;
font-weight: 700;
}
.disclaimer p {
margin: 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.78;
}
.disclaimer p strong {
display: inline;
margin: 0;
color: var(--text-2);
font-size: inherit;
}
.logo-strip {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-top: clamp(28px, 3.4vw, 40px);
padding-top: 26px;
border-top: 1px solid var(--line);
}
.logo-strip-label {
color: var(--muted-2);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.logo-strip-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 34px;
}
.logo-item {
color: var(--muted);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
opacity: 0.82;
}
/* ---------- v2 responsive ---------- */
@media (max-width: 1080px) {
.feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.showcase-block {
grid-template-columns: 1fr;
gap: 26px;
}
.showcase-block.is-reversed .showcase-media {
order: 0;
}
.scale-boards {
grid-template-columns: 1fr;
}
.modal-rarity-split {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.app-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-stats {
flex-wrap: wrap;
gap: 18px 0;
}
.hero-stats > div {
flex: 1 1 44%;
border-inline-end: 0;
}
.logo-strip {
gap: 14px;
}
}
/* =========================================================
Design v3 ׳’ג‚¬ג€ contrast, elevation, spacing & hierarchy
Goals:
- Separate background tones so cards clearly float above the page.
- Soft borders + soft shadows on every surface.
- Airier spacing between sections and inside cards.
- Item imagery sits on a light, theme-aware surface (no black boxes).
- Strong heading hierarchy, calmer secondary text.
========================================================= */
/* ---------- 1. Re-tuned tokens (Modern Dark / Soft Light) ---------- */
:root {
--bg: #0b0f17;
--bg-soft: #131a27;
--panel: #1e293b;
--panel-2: #26334a;
--panel-3: #2f3d57;
--line: rgba(255, 255, 255, 0.1);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #eef2f9;
--text-2: #c6d0df;
--muted: #9aa7bd;
--muted-2: #73829b;
--plain: #0b0f17;
--tint: #131b2a;
--media-surface: linear-gradient(180deg, #2b3852, #202c42);
--on-invert: rgba(18, 24, 40, 0.62);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.55), 0 20px 44px -30px rgba(0, 0, 0, 0.95);
--shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.6), 0 32px 62px -32px rgba(0, 0, 0, 1);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.45), 0 30px 70px -46px rgba(0, 0, 0, 0.95);
}
[data-theme="light"] {
--bg: #eef1f8;
--bg-soft: #f7f9fc;
--panel: transparent;
--panel-2: #f4f6fb;
--panel-3: #e9edf6;
--line: rgba(18, 26, 58, 0.09);
--line-strong: rgba(18, 26, 58, 0.16);
--text: #101a2e;
--text-2: #3b4a64;
--muted: #5c6a86;
--muted-2: #8f99b1;
--plain: #ffffff;
--tint: #e9edfa;
--media-surface: linear-gradient(180deg, #f8fafd, #edf1f8);
--accent: #6d5efc;
--accent-soft: rgba(109, 94, 252, 0.1);
--accent-line: rgba(109, 94, 252, 0.38);
--on-invert: rgba(255, 255, 255, 0.72);
--shadow-card: 0 1px 2px rgba(18, 26, 58, 0.06), 0 20px 40px -26px rgba(18, 26, 58, 0.3);
--shadow-card-hover: 0 2px 5px rgba(18, 26, 58, 0.08), 0 30px 56px -28px rgba(18, 26, 58, 0.34);
--shadow-panel: 0 1px 2px rgba(18, 26, 58, 0.05), 0 30px 64px -44px rgba(18, 26, 58, 0.32);
}
body {
background: var(--bg);
}
[data-theme="light"] body {
background:
radial-gradient(900px 520px at 88% -10%, rgba(109, 94, 252, 0.05), transparent 62%),
var(--bg);
}
/* ---------- 2. Bands: separate background tones + more air ---------- */
.band {
padding-block: clamp(64px, 7.5vw, 122px);
}
.band-plain {
background: var(--plain);
}
.band-tint {
background: var(--tint);
border-block: 1px solid var(--line);
}
.hero-band {
padding-block: clamp(56px, 7vw, 108px) clamp(60px, 7vw, 118px);
}
.section-head {
margin-bottom: clamp(38px, 5vw, 64px);
}
.section-head-center {
margin-bottom: clamp(44px, 5.5vw, 74px);
}
.showcase-block {
padding-block: clamp(36px, 4.6vw, 66px);
}
.scale-boards {
gap: clamp(20px, 2.6vw, 32px);
}
.item-grid {
gap: clamp(14px, 1.6vw, 22px);
}
.catalog-status {
margin: 20px 2px 16px;
font-size: 12.5px;
}
/* ---------- 3. Typography hierarchy ---------- */
.section-head h2 {
font-size: clamp(1.85rem, 3.6vw, 3rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.035em;
}
.section-head-center h2 {
font-size: clamp(1.9rem, 3.7vw, 3.1rem);
}
.section-lead {
font-size: 15.5px;
line-height: 1.85;
color: var(--muted);
}
.eyebrow {
font-size: 11.5px;
letter-spacing: 0.14em;
color: var(--muted);
}
.hero h1 {
font-size: clamp(2.2rem, 4.8vw, 4.3rem);
}
.hero-lead {
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
line-height: 1.85;
}
.feature-card h3 {
font-size: 1.12rem;
}
.feature-card p {
font-size: 13.5px;
line-height: 1.78;
}
.showcase-copy p {
line-height: 1.85;
}
/* ---------- 4. Elevation: consistent borders + soft shadows ---------- */
.feature-card,
.scale-board,
.about-card,
.disclaimer,
.trade-column,
.catalog-toolbar,
.app-preview,
.verdict,
.source-strip {
border: 1px solid var(--line);
box-shadow: var(--shadow-panel);
}
.feature-card,
.scale-board,
.about-card,
.trade-column,
.catalog-toolbar {
background: var(--panel);
}
.feature-card {
border-radius: 20px;
}
/* ---------- 5. Item card: image on top, text below (no overlay/scrim) ---------- */
.item-card {
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
box-shadow: var(--shadow-card);
}
.item-card:hover {
border-color: var(--rarity-line);
box-shadow: var(--shadow-card-hover);
}
[data-theme="light"] .item-card {
box-shadow:
0 1px 2px rgba(18, 26, 58, 0.06),
0 20px 40px -26px rgba(18, 26, 58, 0.3);
}
[data-theme="light"] .item-card:hover {
box-shadow:
0 2px 5px rgba(18, 26, 58, 0.08),
0 30px 56px -28px rgba(18, 26, 58, 0.34),
0 0 24px -10px var(--rarity-glow);
}
.item-card-main {
aspect-ratio: auto;
padding: 0;
background: transparent;
}
.item-media {
position: relative;
inset: auto;
display: flex;
align-items: center;
justify-content: center;
height: clamp(168px, 15.5vw, 212px);
padding: 16px;
overflow: hidden;
background:
radial-gradient(circle at 50% 28%, var(--rarity-soft), transparent 74%),
var(--media-surface);
border-bottom: 1px solid var(--line);
}
.item-media .item-swatch {
width: 92px !important;
height: 92px !important;
}
.item-media .item-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter:
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34))
drop-shadow(0 14px 22px rgba(0, 0, 0, 0.26));
}
[data-theme="light"] .item-media .item-img {
filter:
drop-shadow(0 3px 5px rgba(18, 26, 58, 0.28))
drop-shadow(0 12px 20px rgba(18, 26, 58, 0.15));
}
.item-media svg {
width: 60px;
height: 60px;
opacity: 0.85;
}
.item-media .item-swatch {
width: 100%;
height: 100%;
}
.item-scrim {
display: none !important;
}
.item-content {
position: static;
height: auto;
flex: 1;
gap: 8px;
padding: 15px 15px 16px;
}
.item-content-bottom {
gap: 5px;
}
.item-slot-label {
color: var(--muted);
}
.item-name {
font-size: 14.5px;
}
.item-gem {
background:
radial-gradient(circle at 35% 28%, var(--rarity-soft), transparent 68%),
var(--panel-2);
}
.item-swatch {
box-shadow:
inset 0 0 0 4px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* ---------- 6. Flags: theme-aware, readable ---------- */
.flag {
background: var(--panel-2);
border-color: var(--line);
color: var(--muted);
}
.flag-warn {
color: var(--danger);
border-color: rgba(230, 110, 110, 0.36);
background: rgba(224, 84, 84, 0.12);
}
.flag-member {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-soft);
}
.item-card-actions button:hover {
background: var(--panel-2);
color: var(--text);
}
/* ---------- 7. Toolbar / controls: clearer surfaces ---------- */
.catalog-toolbar {
gap: clamp(16px, 2vw, 22px);
padding: clamp(18px, 2vw, 24px);
border-radius: 20px;
background: var(--panel);
}
.search-field {
height: 50px;
background: var(--panel-2);
border-color: var(--line);
}
.search-field:focus-within {
background: var(--panel);
border-color: var(--accent-line);
}
[data-theme="light"] .search-field {
background: var(--panel-2);
}
[data-theme="light"] .search-field:focus-within {
background: transparent;
}
.filter-pill {
background: var(--panel-2);
border-color: var(--line);
}
.filter-pill:hover {
background: var(--panel-3);
border-color: var(--line-strong);
}
.filter-pill.is-active {
background: var(--text);
border-color: var(--text);
color: var(--bg);
}
.filter-pill.is-active .mono {
color: var(--on-invert);
}
/* ---------- 8. Modal & trade surfaces ---------- */
.item-modal {
border: 1px solid var(--line);
box-shadow: var(--shadow-panel);
}
.trade-item {
background: var(--panel-2);
}
[data-theme="light"] .trade-item {
background: var(--panel-2);
}
.trade-score {
background: var(--panel-2);
}
/* ---------- 9. Responsive tweaks ---------- */
@media (max-width: 560px) {
.item-media {
height: 168px;
}
.band {
padding-block: clamp(52px, 11vw, 76px);
}
}
/* =========================================================
Design v4 ׳’ג‚¬ג€ floating rounded navbar
========================================================= */
:root {
--header-bg: rgba(17, 23, 35, 0.72);
--header-shadow: 0 14px 36px -20px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] {
--header-bg: rgba(255, 255, 255, 0.78);
--header-shadow: 0 16px 36px -22px rgba(18, 26, 58, 0.35), 0 1px 2px rgba(18, 26, 58, 0.07);
}
/* Anchor jumps clear the taller floating bar. */
html {
scroll-padding-top: calc(var(--header-h) + 52px);
}
.site-header,
[data-theme="light"] .site-header {
background: transparent;
border-bottom: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding-block: 14px;
}
.header-inner {
height: var(--header-h);
padding-inline: clamp(14px, 2vw, 22px);
border: 1px solid var(--line);
border-radius: 999px;
background: var(--header-bg);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
box-shadow: var(--header-shadow);
}
@media (max-width: 760px) {
.header-inner {
padding-inline: 14px;
}
}
@media (max-width: 480px) {
.header-inner {
padding-inline: 11px;
}
}
/* =========================================================
Design v5 ׳’ג‚¬ג€ clean background + clearly floating navbar
========================================================= */
/* No noise / grid / notebook texture ׳’ג‚¬ג€ the page stays smooth. */
.grain {
display: none !important;
}
/* Inset, rounded navbar with breathing room on every edge. */
.site-header,
[data-theme="light"] .site-header {
padding-block: 18px;
background: transparent;
border: 0;
}
.header-inner {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
padding-inline: clamp(16px, 2vw, 24px);
border: 1px solid var(--line);
border-radius: 999px;
background: var(--header-bg);
backdrop-filter: blur(22px) saturate(155%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
box-shadow: var(--header-shadow);
}
@media (max-width: 760px) {
.site-header,
[data-theme="light"] .site-header {
padding-block: 12px;
}
.header-inner {
width: calc(100% - 28px);
padding-inline: 14px;
}
}
@media (max-width: 480px) {
.header-inner {
width: calc(100% - 22px);
padding-inline: 11px;
}
}
/* =========================================================
Design v6 ׳’ג‚¬ג€ pin the floating navbar cleanly to the top
========================================================= */
/* The header itself is out of the flow: no top margin, no padding,
just a fixed 1rem offset from the viewport edge. */
.site-header,
[data-theme="light"] .site-header {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 60;
margin: 0;
padding: 0;
background: transparent;
border: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: none;
}
.header-inner {
pointer-events: auto;
margin-top: 0;
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
/* The first band's tint reaches the very top edge, while its content
starts below the floating bar. */
.hero-band {
padding-top: calc(var(--header-h) + 3rem);
}
@media (max-width: 760px) {
.site-header,
[data-theme="light"] .site-header {
top: 0;
padding: 0;
}
.header-inner {
width: calc(100% - 28px);
}
.hero-band {
padding-top: calc(var(--header-h) + 3rem);
}
}
@media (max-width: 480px) {
.header-inner {
width: calc(100% - 22px);
}
}
/* =========================================================
Design v7 ׳’ג‚¬ג€ clean background + hard navbar override
========================================================= */
/* One smooth vertical wash only: no radials, no noise, no grid. */
html body {
background: var(--bg);
}
html[data-theme="light"] body {
background: linear-gradient(180deg, #f7f9fe 0%, #eef1f8 340px, #eef1f8 100%);
}
html[data-theme="dark"] body {
background: #0b0f17;
}
/* Hard override of every earlier sticky/margin/padding rule. */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
position: fixed !important;
top: 0 !important;
inset-inline: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html body .header-inner {
margin-top: 0 !important;
}
@media (max-width: 760px) {
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
top: 0 !important;
padding: 0 !important;
}
}
/* Visible build marker, so a stale cache is immediately obvious. */
.build-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.02em;
direction: ltr;
}
/* Guaranteed clearance: the hero content always starts well below
the floating bar, at every width. */
html body .hero-band {
padding-top: max(calc(var(--header-h) + 3rem), 128px);
}
html body .band.hero-band > .hero {
scroll-margin-top: 128px;
}
/* =========================================================
Design v8 ׳’ג‚¬ג€ navbar like the reference: solid dark bar,
attached to the very top edge, rounded bottom corners
========================================================= */
/* The header itself is flush with the top of the viewport. */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
position: fixed !important;
top: 0 !important;
inset-inline: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* The bar: solid dark surface, square top edge, rounded bottom. */
html body .header-inner,
html[data-theme="light"] body .header-inner,
html[data-theme="dark"] body .header-inner {
margin-top: 0 !important;
width: min(1180px, calc(100% - 32px));
margin-inline: auto;
height: var(--header-h);
padding-inline: clamp(16px, 2vw, 24px);
border: 0;
border-radius: 0 0 22px 22px;
background: #10151f;
box-shadow: 0 14px 34px -18px rgba(4, 10, 25, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Light theme: everything on the dark bar turns light. */
html[data-theme="light"] body .brand-text strong {
color: #f2f6fb;
}
html[data-theme="light"] body .brand-text span {
color: rgba(230, 238, 249, 0.62);
}
html[data-theme="light"] body .brand-mark {
border-color: rgba(255, 255, 255, 0.16);
color: #9a8cff;
background: linear-gradient(145deg, rgba(109, 94, 252, 0.24), rgba(109, 94, 252, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body .main-nav a {
color: rgba(230, 238, 249, 0.78);
}
html[data-theme="light"] body .main-nav a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body .theme-switch {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] body .theme-option {
color: rgba(230, 238, 249, 0.72);
}
html[data-theme="light"] body .theme-option:hover {
color: #ffffff;
}
html[data-theme="light"] body .theme-option.is-active {
background: rgba(109, 94, 252, 0.3);
color: #bdb5ff;
box-shadow: inset 0 0 0 1px rgba(143, 123, 255, 0.5);
}
html[data-theme="light"] body .header-inner .button-ghost {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.07);
color: #eef4fd;
}
html[data-theme="light"] body .header-inner .button-ghost:hover {
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
html[data-theme="light"] body .header-inner .count-pill {
color: #ffffff;
}
@media (max-width: 760px) {
html body .header-inner,
html[data-theme="light"] body .header-inner {
width: calc(100% - 28px);
}
}
@media (max-width: 480px) {
html body .header-inner,
html[data-theme="light"] body .header-inner {
width: calc(100% - 22px);
padding-inline: 11px;
}
}
/* =========================================================
Design v9 ׳’ג‚¬ג€ Mobbin-style skin (dark-first, monochrome)
Flat #141414 surfaces, 1px hairlines, pill buttons,
inverse primary CTA, big tight centered headings.
========================================================= */
/* ---------- 1. Tokens ---------- */
:root,
[data-theme="dark"] {
--bg: #141414;
--bg-soft: #181818;
--panel: #171717;
--panel-2: #1c1c1c;
--panel-3: #242424;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #ffffff;
--text-2: #d6d6d6;
--muted: #a6a6a6;
--muted-2: #878787;
--plain: #141414;
--tint: #171717;
--media-surface: #1e1e1e;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35);
--accent: #8f7bff;
--accent-soft: rgba(143, 123, 255, 0.14);
--accent-line: rgba(143, 123, 255, 0.4);
--on-invert: rgba(255, 255, 255, 0.72);
}
[data-theme="light"] {
--bg: transparent;
--bg-soft: #fafafa;
--panel: transparent;
--panel-2: #fafafa;
--panel-3: #f3f3f3;
--line: rgba(0, 0, 0, 0.09);
--line-strong: rgba(0, 0, 0, 0.18);
--text: #141414;
--text-2: #3d3d3d;
--muted: #6e6e6e;
--muted-2: #8f8f8f;
--plain: #ffffff;
--tint: #fafafa;
--media-surface: #f6f6f6;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.07);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.04);
--accent: #5b50ee;
--accent-soft: rgba(91, 80, 238, 0.1);
--accent-line: rgba(91, 80, 238, 0.35);
--on-invert: rgba(20, 20, 20, 0.6);
}
/* ---------- 2. Flat page & bands ---------- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background: var(--bg);
}
html body .band {
border-block: 0;
}
html body .band-tint {
background: var(--tint);
}
/* ---------- 3. Typography ׳’ג‚¬ג€ big & tight, centered ---------- */
html body .hero h1 {
font-size: clamp(2.5rem, 5.2vw, 3.5rem);
line-height: 1.03;
letter-spacing: -0.028em;
font-weight: 700;
}
html body .section-head h2,
html body .section-head-center h2 {
line-height: 1.12;
letter-spacing: -0.02em;
}
html body .section-head-center h2 {
font-size: clamp(1.75rem, 3.1vw, 2.5rem);
}
html body .hero-lead,
html body .section-lead {
color: var(--muted-2);
}
/* ---------- 4. Buttons ׳’ג‚¬ג€ pill, inverse primary ---------- */
html body .button {
border-radius: 999px;
font-weight: 600;
}
html[data-theme="dark"] body .button-primary {
background: transparent;
border-color: #ffffff;
color: #141414;
box-shadow: none;
}
html[data-theme="dark"] body .button-primary:hover {
background: transparent;
border-color: #ffffff;
color: #141414;
opacity: 0.82;
}
html[data-theme="light"] body .button-primary {
background: #141414;
border-color: #141414;
color: #ffffff;
box-shadow: none;
}
html[data-theme="light"] body .button-primary:hover {
background: #141414;
border-color: #141414;
color: #ffffff;
opacity: 0.82;
}
html[data-theme="dark"] body .button-ghost {
border-color: rgba(255, 255, 255, 0.22);
background: transparent;
color: #ffffff;
}
html[data-theme="dark"] body .button-ghost:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
}
html[data-theme="light"] body .button-ghost {
border-color: rgba(0, 0, 0, 0.16);
background: transparent;
color: #141414;
}
/* ---------- 5. Cards ׳’ג‚¬ג€ 24px radius, hairline, flat ---------- */
html body .feature-card,
html body .scale-board,
html body .about-card,
html body .trade-column,
html body .catalog-toolbar,
html body .trade-board {
border-radius: 24px;
}
html body .item-card {
border-radius: 18px;
box-shadow: var(--shadow-card);
}
html body .item-card:hover {
box-shadow: var(--shadow-card-hover);
}
html body .app-preview {
box-shadow: var(--shadow-panel);
}
html body .app-preview-badge {
box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.35);
}
html body .verdict,
html body .source-strip,
html body .disclaimer,
html body .toast {
box-shadow: var(--shadow-panel);
}
html body .item-modal {
border-radius: 22px;
}
html body .search-field-main,
html body .select-field,
html body .trade-search {
border-radius: 14px;
}
html body .logo-item {
opacity: 0.55;
filter: grayscale(1);
}
/* ---------- 6. Footer ׳’ג‚¬ג€ hairline top ---------- */
html body .site-footer {
border-top: 1px solid var(--line);
}
/* ---------- 7. Header controls on the dark bar ---------- */
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
border-color: rgba(255, 255, 255, 0.16);
color: #9a8cff;
background: linear-gradient(145deg, rgba(109, 94, 252, 0.24), rgba(109, 94, 252, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html body .header-inner .button-ghost,
html[data-theme="light"] body .header-inner .button-ghost,
html[data-theme="dark"] body .header-inner .button-ghost {
border: 0;
border-radius: 999px;
background: transparent;
color: #10151f;
}
html body .header-inner .button-ghost:hover {
border: 0;
background: transparent;
color: #10151f;
opacity: 0.85;
}
html body .header-inner .count-pill {
background: #8f7bff;
color: #ffffff;
}
html body .site-header .theme-option.is-active {
background: transparent;
color: #10151f;
box-shadow: none;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ Aside-style editorial flow ("׳³ֲ׳³ג€”׳³ג€ ׳³ֲ׳³ֲ׳³ג€”׳³ג€")
Full-width stacked sections, each closed with a hairline;
big centered display type; monochrome; tools inside flow.
========================================================= */
/* ---------- 1. Default theme: light (aside) ---------- */
/* Inline pre-paint script + app fallback also default to light. */
/* ---------- 2. Hero ׳’ג€ ג€™ centered stack, preview below ---------- */
html body .hero {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
padding-top: clamp(2.25rem, 5vw, 3.75rem);
padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
html body .hero-copy {
max-width: 860px;
}
html body .hero h1 {
font-size: clamp(2.25rem, 4.6vw, 3.1rem);
line-height: 1.09;
font-weight: 500;
letter-spacing: -0.032em;
}
html body .hero h1 .accent-text {
color: inherit;
}
html body .hero-lead {
max-width: 640px;
margin-inline: auto;
color: var(--muted-2);
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.75;
}
html body .hero-actions {
justify-content: center;
}
html body .hero-stats,
html body .hero-stats > div {
border-inline: 0;
background: transparent;
box-shadow: none;
text-align: start;
}
html body .app-preview {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
max-width: 980px;
width: 100%;
border-radius: 18px;
}
/* ---------- 3. Sections: stacked one after one, hairline separators ---------- */
html body .band {
border-top: 0;
border-bottom: 1px solid var(--line);
}
html body .section-head {
display: grid;
justify-items: center;
gap: 14px;
text-align: center;
}
html body .section-head > div {
display: grid;
justify-items: center;
gap: 14px;
}
html body .section-head .eyebrow {
justify-content: center;
}
html body .section-head .section-lead {
max-width: 640px;
margin: 0;
color: var(--muted-2);
}
html body .section-head h2,
html body .section-head-center h2 {
font-size: clamp(2rem, 3.4vw, 2.75rem);
line-height: 1.12;
font-weight: 500;
letter-spacing: -0.028em;
margin: 0;
}
html body .showcase-block {
display: grid;
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
gap: 30px;
}
html body .showcase-media {
max-width: 340px;
min-height: 0;
}
html body .showcase-copy {
max-width: 640px;
display: grid;
justify-items: center;
gap: 14px;
}
html body .showcase-copy h3 {
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
font-weight: 500;
letter-spacing: -0.02em;
margin: 0;
}
html body .showcase-copy p {
margin: 0;
color: var(--muted-2);
line-height: 1.7;
}
/* ---------- 4. Features: rows one after one ---------- */
html body .feature-grid {
grid-template-columns: 1fr;
gap: 0;
max-width: 860px;
margin-inline: auto;
}
html body .feature-card {
display: grid;
grid-template-columns: 52px 1fr;
gap: 18px 22px;
align-items: start;
text-align: start;
padding: 26px 4px;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
}
html body .feature-grid .feature-card:last-child {
border-bottom: 0;
}
html body .feature-card:hover {
transform: none;
background: transparent;
box-shadow: none;
border-bottom-color: var(--line);
}
html body .feature-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
}
html body .feature-card h3 {
margin: 2px 0 6px;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
}
html body .feature-card p {
margin: 0;
max-width: 60ch;
color: var(--muted-2);
font-size: 15.5px;
line-height: 1.65;
}
/* ---------- 5. Scales & about: stacked one after one ---------- */
html body .scale-boards {
grid-template-columns: 1fr;
max-width: 780px;
margin-inline: auto;
}
html body .about-grid {
grid-template-columns: 1fr;
gap: 0;
max-width: 860px;
margin-inline: auto;
}
html body .about-card {
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 22px;
row-gap: 8px;
align-items: baseline;
text-align: start;
padding: 24px 4px;
border-top: 0;
border-bottom: 1px solid var(--line);
}
html body .about-grid .about-card:last-child {
border-bottom: 0;
}
html body .about-card .about-number {
grid-column: 1;
grid-row: 1 / 3;
font-size: 13px;
}
html body .about-card h3 {
grid-column: 2;
margin: 0;
font-size: 19px;
font-weight: 600;
}
html body .about-card p {
grid-column: 2;
margin: 0;
color: var(--muted-2);
line-height: 1.65;
}
html body .disclaimer,
html body .source-strip {
max-width: 860px;
margin-inline: auto;
}
/* ---------- 6. Closing CTA ---------- */
html body .closing {
border-bottom: 0;
}
html body .closing-actions {
margin-top: 10px;
display: flex;
justify-content: center;
}
html body .closing .button-primary {
border-radius: 12px;
padding-inline: 24px;
padding-block: 12px;
font-size: 15px;
}
/* ---------- 7. Footer: link columns + bottom row ---------- */
html body .site-footer {
margin-top: 0;
border-top: 1px solid var(--line);
}
html body .footer-cols {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: clamp(28px, 4vw, 48px);
padding-block: clamp(40px, 5vw, 60px) 36px;
}
html body .footer-col {
display: grid;
gap: 10px;
align-content: start;
justify-items: start;
font-size: 14.5px;
}
html body .footer-col h4 {
margin: 0 0 2px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text);
}
html body .footer-col a,
html body .footer-col button,
html body .footer-col span {
color: var(--muted-2);
text-decoration: none;
font: inherit;
background: none;
border: 0;
padding: 0;
cursor: default;
}
html body .footer-col a,
html body .footer-col button {
cursor: pointer;
}
html body .footer-col a:hover,
html body .footer-col button:hover {
color: var(--text);
}
html body .footer-brand .brand {
justify-items: start;
}
html body .footer-brand .brand-text {
color: var(--text);
}
html body .footer-brand .brand-text span {
color: var(--muted-2);
}
html body .footer-brand .brand-mark {
border-color: var(--line);
background: var(--panel-3);
color: var(--text);
box-shadow: none;
}
html body .footer-brand p {
margin: 8px 0 0;
max-width: 36ch;
color: var(--muted-2);
line-height: 1.65;
}
html body .footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-block: 18px 28px;
border-top: 1px solid var(--line);
color: var(--muted-2);
font-size: 13px;
}
@media (max-width: 900px) {
html body .footer-cols {
grid-template-columns: 1fr 1fr;
}
html body .footer-bottom {
justify-content: center;
text-align: center;
}
}
@media (max-width: 560px) {
html body .footer-cols {
grid-template-columns: 1fr;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 2: aside tokens, static header, buttons
========================================================= */
/* ---------- 8. Light tokens (aside default: white / near-black / hairlines) ---------- */
[data-theme="light"] {
--bg: transparent;
--bg-soft: transparent;
--panel: transparent;
--panel-2: #fafafa;
--panel-3: #f5f5f5;
--line: rgba(0, 0, 0, 0.07);
--line-strong: rgba(0, 0, 0, 0.16);
--text: #121212;
--text-2: #383838;
--muted: #565656;
--muted-2: #6f6f6f;
--plain: #ffffff;
--tint: #ffffff;
--media-surface: #f6f6f6;
}
html {
scroll-padding-top: 20px;
}
/* ---------- 9. Header ׳’ג€ ג€™ static light nav (aside) ---------- */
html body .site-header {
position: static !important;
}
html body .header-inner {
max-width: none !important;
width: 100% !important;
border-radius: 0 !important;
background: transparent !important;
border-bottom: 1px solid var(--line);
box-shadow: none !important;
padding-inline: clamp(16px, 3vw, 36px);
padding-block: 10px;
}
html body .site-header .brand-text strong {
color: var(--text);
}
html body .site-header .brand-text span {
color: var(--muted-2);
}
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
border-color: var(--line);
background: var(--panel-3);
color: var(--text);
box-shadow: none;
}
html body .site-header .main-nav a {
color: var(--muted);
background: transparent;
}
html body .site-header .main-nav a:hover {
color: var(--text);
background: transparent;
}
html body .site-header .theme-switch {
border-color: var(--line);
background: transparent;
}
html body .site-header .theme-option {
color: var(--text-2);
background: transparent;
}
html body .site-header .theme-option.is-active,
html[data-theme="light"] body .site-header .theme-option.is-active,
html[data-theme="dark"] body .site-header .theme-option.is-active {
background: var(--text);
color: var(--bg);
box-shadow: none;
}
html body .site-header .header-inner .button-ghost,
html[data-theme="light"] body .header-inner .button-ghost,
html[data-theme="dark"] body .header-inner .button-ghost {
background: var(--text);
color: var(--bg);
border: 0;
border-radius: 14px;
box-shadow: none;
}
html body .site-header .header-inner .button-ghost:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .site-header .header-inner .count-pill {
background: var(--bg);
color: var(--text);
}
/* hero clearance: header is static now ׳’ג‚¬ג€ no reserved fixed-header space */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
border-top: 0;
border-bottom: 1px solid var(--line);
padding-top: clamp(2.5rem, 6vw, 4rem) !important;
padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* ---------- 10. Buttons: aside dark solid ---------- */
html body .button {
border-radius: 14px;
font-weight: 500;
}
html body .hero .button-primary,
html body .closing .button-primary {
border-radius: 10px;
min-width: 330px;
max-width: 100%;
padding-block: 15px;
padding-inline: 32px;
font-size: 15.5px;
}
html[data-theme="light"] body .button-primary {
background: var(--text);
border-color: var(--text);
color: var(--bg);
box-shadow: none;
}
html[data-theme="light"] body .button-primary:hover {
background: var(--text);
border-color: var(--text);
color: var(--bg);
opacity: 0.82;
}
html[data-theme="light"] body .button-ghost {
border-color: var(--line-strong);
background: transparent;
color: var(--text);
}
html[data-theme="light"] body .button-ghost:hover {
border-color: rgba(0, 0, 0, 0.32);
background: rgba(0, 0, 0, 0.04);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 3: hard header override (beats v8 bar)
Static, light, full-width editorial nav like aside.com
========================================================= */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
position: static !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--bg) !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html body .header-inner,
html[data-theme="light"] body .header-inner,
html[data-theme="dark"] body .header-inner {
height: auto !important;
min-height: 0 !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-bottom: 1px solid var(--line);
padding-block: 10px;
padding-inline: clamp(16px, 3vw, 36px);
}
html body .site-header .brand-text strong,
html[data-theme="light"] body .site-header .brand-text strong,
html[data-theme="dark"] body .site-header .brand-text strong {
color: var(--text);
}
html body .site-header .brand-text span,
html[data-theme="light"] body .site-header .brand-text span,
html[data-theme="dark"] body .site-header .brand-text span {
color: var(--muted-2);
}
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
border-color: var(--line);
background: var(--panel-3);
color: var(--text);
box-shadow: none;
}
html body .site-header .main-nav a,
html[data-theme="light"] body .site-header .main-nav a,
html[data-theme="dark"] body .site-header .main-nav a {
color: var(--muted);
background: transparent;
}
html body .site-header .main-nav a:hover,
html[data-theme="light"] body .site-header .main-nav a:hover,
html[data-theme="dark"] body .site-header .main-nav a:hover {
color: var(--text);
background: transparent;
}
html body .site-header .theme-switch,
html[data-theme="light"] body .site-header .theme-switch,
html[data-theme="dark"] body .site-header .theme-switch {
border-color: var(--line);
background: transparent;
}
html body .site-header .theme-option,
html[data-theme="light"] body .site-header .theme-option,
html[data-theme="dark"] body .site-header .theme-option {
color: var(--text-2);
background: transparent;
}
html body .site-header .theme-option.is-active,
html[data-theme="light"] body .site-header .theme-option.is-active,
html[data-theme="dark"] body .site-header .theme-option.is-active {
background: var(--text);
color: var(--bg);
box-shadow: none;
}
html body .header-inner .button-ghost,
html[data-theme="light"] body .header-inner .button-ghost,
html[data-theme="dark"] body .header-inner .button-ghost {
background: var(--text);
color: var(--bg);
border: 0;
border-radius: 14px;
box-shadow: none;
}
html body .header-inner .button-ghost:hover,
html[data-theme="light"] body .header-inner .button-ghost:hover,
html[data-theme="dark"] body .header-inner .button-ghost:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .header-inner .count-pill,
html[data-theme="light"] body .header-inner .count-pill,
html[data-theme="dark"] body .header-inner .count-pill {
background: var(--bg);
color: var(--text);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 4: readability pass
Bigger Hebrew text everywhere, darker secondary colors,
simple about copy, and card text gains.
========================================================= */
[data-theme="light"] {
--muted: #4f4f4f;
--muted-2: #5f5f5f;
}
html body .hero-lead,
html body .section-lead {
font-size: 1.12rem;
line-height: 1.8;
color: var(--muted);
}
html body .about-simple {
max-width: 860px;
margin-inline: auto;
display: grid;
gap: 20px;
margin-bottom: clamp(28px, 4vw, 44px);
}
html body .about-simple p {
margin: 0;
font-size: 1.13rem;
line-height: 1.85;
color: var(--text-2);
}
html body .disclaimer {
font-size: 1.04rem;
}
html body .disclaimer p {
font-size: 1.04rem;
line-height: 1.8;
color: var(--text-2);
}
html body .item-name {
font-size: 1.05rem;
}
html body .item-slot-label {
font-size: 0.92rem;
color: var(--muted-2);
}
html body .community-chip {
font-size: 0.9rem;
}
html body .badge {
font-size: 0.82rem;
}
html body .filter-pill {
font-size: 0.95rem;
}
html body .filter-label {
font-size: 12px;
}
html body .select-field {
font-size: 0.95rem;
}
html body .search-field input {
font-size: 1rem;
}
html body .trade-empty,
html body .trade-summary,
html body .trade-disclaimer {
font-size: 0.98rem;
}
html body .verdict p {
font-size: 1.02rem;
}
html body .scale-board-note {
font-size: 0.95rem;
}
html body .main-nav a {
font-size: 14.5px;
}
html body .micro-label {
font-size: 11.5px;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 5: single theme toggle button
Dark site ׳’ג€ ג€™ white button (click ׳’ג€ ג€™ light);
Light site ׳’ג€ ג€™ black button (click ׳’ג€ ג€™ dark).
Low rounding, stretched.
========================================================= */
html body .site-header .theme-toggle,
html[data-theme="light"] body .site-header .theme-toggle,
html[data-theme="dark"] body .site-header .theme-toggle {
display: inline-grid;
place-items: center;
min-width: 66px;
height: 40px;
border: 0;
border-radius: 8px;
background: var(--text);
color: var(--bg);
cursor: pointer;
box-shadow: none;
transition: opacity 0.2s var(--ease);
}
html body .site-header .theme-toggle:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .site-header .theme-toggle svg {
width: 20px;
height: 20px;
}
html body .site-header .theme-toggle .icon-moon {
display: none;
}
html body .site-header .theme-toggle.is-light .icon-sun {
display: none;
}
html body .site-header .theme-toggle.is-light .icon-moon {
display: block;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 6
1) Theme toggle now lives ON the old header CTA slot:
label + icon, black in light mode / white in dark,
8px corners, stretched.
2) Hero section ׳’ג€ ג€™ rounded card with a clouds sky
background (uses images/clouds.png when present,
smooth gradient sky fallback otherwise).
========================================================= */
html body .site-header .theme-toggle,
html[data-theme="light"] body .site-header .theme-toggle,
html[data-theme="dark"] body .site-header .theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 0;
height: 40px;
padding-inline: 18px;
border: 0;
border-radius: 8px;
background: var(--text);
color: var(--bg);
cursor: pointer;
box-shadow: none;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: opacity 0.2s var(--ease);
}
html body .site-header .theme-toggle:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .site-header .theme-toggle .theme-toggle-label {
color: inherit;
}
/* Hero ׳’ג€ ג€™ rounded clouds card */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
position: relative;
overflow: hidden;
width: min(1180px, calc(100% - 32px));
margin: 14px auto 0;
border-top: 0;
border-bottom: 0;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(238, 251, 255, 0.6) 100%),
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #e0f8ff 100%);
}
@media (max-width: 640px) {
html body .hero-band {
width: calc(100% - 24px);
border-radius: 18px;
margin-top: 10px;
}
}
/* Sky text ink ׳’ג‚¬ג€ readable over the light sky in BOTH themes */
html body .hero-band .hero h1,
html body .hero-band .hero h1 .accent-text {
color: #14344a;
}
html body .hero-band .hero-lead {
color: #2c4a5e;
}
html body .hero-band .hero-stats {
border-top-color: rgba(16, 52, 74, 0.18);
}
html body .hero-band .hero-stats dt {
color: #33566c;
font-size: 1.02rem;
}
html body .hero-band .hero-stats dd {
color: #0f3448;
font-size: 1.5rem;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 7: hero refinement
Title ink for the lead + strong, heading-color CTA,
#E0F2FE stat numbers, and a full-bleed sky background.
========================================================= */
html body .hero-band .hero-lead,
html body .hero-band .hero-lead strong {
color: #14344a;
}
html body .hero-band .hero-actions .button-primary {
background: #14344a;
border-color: #14344a;
color: #ffffff;
box-shadow: none;
}
html body .hero-band .hero-actions .button-primary:hover {
background: #14344a;
border-color: #14344a;
color: #ffffff;
opacity: 0.85;
}
html body .hero-band .hero-stats dd {
color: #E0F2FE;
}
/* Full-bleed sky: edge to edge, no side gaps */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
width: 100%;
margin: 0;
border-radius: 0;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 8: sky extends behind the top bar too
========================================================= */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
background: linear-gradient(180deg, #8fd9f8 0%, #a9e7ff 100%) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .header-inner,
html[data-theme="light"] body .header-inner,
html[data-theme="dark"] body .header-inner {
border-bottom: 0 !important;
}
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
background: transparent;
border-color: rgba(0, 0, 0, 0.08);
}
html body .site-header .main-nav a,
html[data-theme="light"] body .site-header .main-nav a,
html[data-theme="dark"] body .site-header .main-nav a {
color: #2c4a5e;
}
html body .site-header .main-nav a:hover,
html[data-theme="light"] body .site-header .main-nav a:hover,
html[data-theme="dark"] body .site-header .main-nav a:hover {
color: #14344a;
}
html body .site-header .theme-toggle,
html[data-theme="light"] body .site-header .theme-toggle,
html[data-theme="dark"] body .site-header .theme-toggle {
background: #14344a;
color: #ffffff;
}
html body .site-header .theme-toggle:hover {
background: #14344a;
color: #ffffff;
opacity: 0.85;
}
/* Stat numbers: title ink ׳’ג‚¬ג€ matching the headline */
html body .hero-band .hero-stats dd {
color: #14344a;
font-size: 1.5rem;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 9: hero = rounded sky card on white zone
Rounded top + bottom, side gaps, white empty background
around the card; the white gap also breaks the hard sky-on-sky
seam between the top bar and the section.
========================================================= */
html body .sky-zone,
html[data-theme="light"] body .sky-zone,
html[data-theme="dark"] body .sky-zone {
background: transparent;
padding: 12px 0 40px;
}
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
border-radius: 28px;
}
@media (max-width: 640px) {
html body .sky-zone {
padding: 10px 0 28px;
}
html body .hero-band {
width: calc(100% - 24px);
border-radius: 20px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 10: one continuous sky (aside.com style)
No separate top bar: the header is transparent and sits on
the SAME sky canvas as the hero. White mat around, rounded
canvas corners.
========================================================= */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background: transparent;
padding: 10px 14px 0;
}
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
overflow: hidden;
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(238, 251, 255, 0.6) 100%),
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #e0f8ff 100%);
}
/* header: fully transparent ׳’ג‚¬ג€ one sky behind it and the hero */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* hero: no own background ׳’ג‚¬ג€ the canvas sky shows through */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
width: auto;
margin: 0;
border: 0;
border-radius: 0;
background: none;
}
@media (max-width: 640px) {
html body .sky-frame {
padding: 6px 8px 0;
}
html body .sky-canvas {
border-radius: 20px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 11: closing app-window at the sky edge
The sky canvas closes on a large white tool window that
rises from its bottom edge (aside.com style), showing
real site content inside.
========================================================= */
html body .sky-window {
position: relative;
width: min(1300px, calc(100% - 112px));
margin: 0 auto;
border-radius: 16px 16px 0 0;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 0;
box-shadow: 0 10px 44px rgba(20, 52, 74, 0.16);
overflow: hidden;
}
/* the demo's fake mouse cursor */
html body .sky-window .demo-cursor {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 24px;
z-index: 40;
pointer-events: none;
opacity: 0;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
transition: opacity 0.3s var(--ease);
will-change: transform;
}
html body .sky-window .demo-cursor svg { display: block; width: 100%; height: 100%; transition: transform 0.16s var(--ease); }
html body .sky-window .demo-cursor.is-visible { opacity: 1; }
html body .sky-window .demo-cursor.is-clicking svg { transform: scale(0.8); }
html body .sky-window .win-toolbar {
display: flex;
align-items: center;
gap: 3px;
padding: 15px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
html body .sky-window .tb-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #3b4a57;
flex: none;
}
html body .sky-window .tb-icon svg { width: 15px; height: 15px; }
html body .sky-window .tb-close { color: #d15248; }
html body .sky-window .win-address {
flex: 1;
direction: rtl;
text-align: left;
background: #f2f6fa;
color: #5b6b78;
border-radius: 999px;
padding: 7px 20px 7px 14px;
font-size: 13px;
font-weight: 600;
margin: 0 8px;
}
html body .sky-window .win-main {
display: grid;
grid-template-columns: 250px 1fr;
background: transparent;
}
html body .sky-window .win-sidebar {
padding: 16px 16px 28px;
background: #f7f9fb;
border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
}
html body .sky-window .side-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
}
html body .sky-window .side-profile img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
html body .sky-window .side-profile b { font-size: 14px; color: #16283a; }
html body .sky-window .side-profile .chev {
margin-inline-start: auto;
color: #8fa0ad;
font-size: 11px;
}
html body .sky-window .side-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 14px 3px 6px;
}
html body .sky-window .side-tile {
display: flex;
align-items: center;
justify-content: center;
height: 52px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 12px;
}
html body .sky-window .side-tile img {
width: 28px;
height: 28px;
object-fit: contain;
}
html body .sky-window .side-label {
font-size: 12.5px;
font-weight: 600;
color: #8fa0ad;
margin: 18px 8px 6px;
}
html body .sky-window .side-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11px;
border-radius: 10px;
font-size: 13.5px;
color: #3a4a58;
}
html body .sky-window .side-row i {
width: 13px;
height: 13px;
border-radius: 4px;
background: #c6d2db;
flex: none;
}
html body .sky-window .side-row.is-active {
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 5px rgba(20, 52, 74, 0.08);
font-weight: 700;
color: #16283a;
}
html body .sky-window .win-content {
padding: 38px 42px 34px;
}
html body .sky-window .win-hero { text-align: center; }
html body .sky-window .win-logo img {
width: 46px;
height: 46px;
opacity: 0.55;
}
html body .sky-window .win-ask {
display: flex;
align-items: center;
gap: 10px;
max-width: 680px;
margin: 20px auto 14px;
padding: 14px 16px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(20, 52, 74, 0.08);
}
html body .sky-window .win-ask .q {
flex: 1;
text-align: right;
font-size: 15px;
color: #7a8794;
padding-inline-start: 6px;
}
html body .sky-window .win-ask-btn {
padding: 10px 22px;
border-radius: 8px;
background: #f1f5f8;
font-size: 14px;
font-weight: 700;
color: #16283a;
white-space: nowrap;
}
html body .sky-window .win-ask-btn.alt {
background: #16283a;
color: #ffffff;
}
html body .sky-window .win-metabar {
display: flex;
justify-content: center;
gap: 22px;
font-size: 13px;
color: #8fa0ad;
}
html body .sky-window .window-body {
padding: 24px 26px 0;
}
html body .sky-window .window-title {
margin: 20px 0 18px;
font-size: 18px;
font-weight: 700;
color: #16283a;
text-align: right;
}
html body .sky-window .mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
html body .sky-window .mini-grid.is-two {
grid-template-columns: repeat(2, 1fr);
max-width: 760px;
margin: 0 auto;
}
html body .sky-window .mini-grid.is-one {
grid-template-columns: 1fr;
max-width: 320px;
margin: 0 auto;
}
html body .sky-window .mini-verdict {
max-width: none;
margin: 14px 0 0;
padding: 13px 16px;
background: #f0faf3;
border: 1px solid #b9e2c4;
border-radius: 12px;
font-size: 14.5px;
font-weight: 700;
color: #1c6b3a;
text-align: center;
}
html body .sky-window .win-lower[data-lower="results"] {
animation: winSwap 0.45s var(--ease) both;
}
@keyframes winSwap {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* responsive: two cards side by side fall back to one column on narrow widths */
@media (max-width: 620px) {
html body .sky-window .mini-grid.is-two {
grid-template-columns: 1fr;
}
}
/* results view ׳’ג‚¬ג€ colored winner / muted loser */
html body .sky-window .mini-card.is-win {
background: linear-gradient(160deg, #f4fbf6, #ecf8f0);
border-color: #b9e2c4;
box-shadow: 0 6px 16px rgba(47, 158, 85, 0.10);
}
html body .sky-window .mini-card.is-win .mini-name { color: #1c6b3a; }
html body .sky-window .mini-card.is-warn {
background: linear-gradient(160deg, #fffaf1, #fdf3e2);
border-color: #f0d5a4;
box-shadow: 0 6px 16px rgba(217, 138, 19, 0.10);
}
html body .sky-window .mini-card.is-warn .mini-name { color: #9a6a16; }
html body .sky-window .mini-card.is-dim {
background: #f7f8fa;
border-color: rgba(0, 0, 0, 0.05);
}
html body .sky-window .mini-card.is-dim .mini-name { color: #7a8794; }
html body .sky-window .mini-card.is-dim img { filter: grayscale(0.45) opacity(0.92); }
html body .sky-window .mini-badge {
align-self: flex-start;
margin-bottom: 8px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.2px;
box-shadow: 0 2px 8px rgba(20, 52, 74, 0.10);
}
html body .sky-window .mini-badge.is-win { background: #2f9e55; color: #ffffff; }
html body .sky-window .mini-badge.is-warn { background: #e0a03c; color: #ffffff; }
html body .sky-window .mini-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
margin-top: 4px;
}
html body .sky-window .chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
html body .sky-window .chip::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.65;
flex: none;
}
/* official rarity chips */
html body .sky-window .chip.o-regular { background: #eef1f4; color: #5b6b78; }
html body .sky-window .chip.o-rare { background: #e8f2fb; color: #2470aa; }
html body .sky-window .chip.o-epic { background: #f2e9fb; color: #7d3fc0; }
html body .sky-window .chip.o-legendary { background: #fdf1de; color: #b06a10; }
/* community tier chips */
html body .sky-window .chip.c-common { background: #eef1f4; color: #5b6b78; }
html body .sky-window .chip.c-uncommon { background: #e6f7f5; color: #0f8f86; }
html body .sky-window .chip.c-rare { background: #e8f2fb; color: #2470aa; }
html body .sky-window .chip.c-veryrare { background: #ecebfd; color: #4f46e5; }
html body .sky-window .chip.c-extremely { background: #fbeaf7; color: #b026a3; }
html body .sky-window .chip.c-ultra { background: #fdeaee; color: #d94562; }
/* verdict ׳’ג‚¬ג€ green for a confident answer, amber for a caution tip */
html body .sky-window .mini-verdict.is-warn {
background: #fff8ea;
border-color: #f0d5a4;
color: #8a5c0c;
}
html body .sky-window .mini-verdict {
position: relative;
padding-inline-start: 44px;
text-align: right;
}
html body .sky-window .mini-verdict::before {
content: "";
position: absolute;
inset-inline-start: 14px;
top: 50%;
margin-top: -11px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #2f9e55 url('data:image/svg+xml;utf8,') center / 14px no-repeat;
}
html body .sky-window .mini-verdict.is-warn::before {
background: #e0a03c url('data:image/svg+xml;utf8,') center / 11px no-repeat;
}
html body .sky-window .mini-card {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 17px 19px 0;
background: #fafbfc;
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 14px;
overflow: hidden;
text-align: right;
}
html body .sky-window .mini-meta {
font-size: 12.5px;
font-weight: 600;
color: #7a8794;
}
html body .sky-window .mini-name {
font-size: 16px;
font-weight: 700;
color: #16283a;
margin: 3px 0 8px;
}
html body .sky-window .mini-line {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: #4f5f6d;
padding: 2.5px 0;
}
html body .sky-window .mini-line i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #b3c2cd;
flex: none;
}
html body .sky-window .mini-card img {
display: block;
width: 100%;
height: 152px;
object-fit: contain; /* full item visible ׳’ג‚¬ג€ never cropped */
background: linear-gradient(180deg, #eef3f7 0%, #e6edf3 100%);
padding: 10px;
box-sizing: border-box;
margin-top: 14px;
}
@media (max-width: 900px) {
html body .sky-window {
width: calc(100% - 40px);
}
html body .sky-window .win-main {
grid-template-columns: 1fr;
}
html body .sky-window .win-sidebar {
display: none;
}
html body .sky-window .mini-grid {
grid-template-columns: 1fr;
}
html body .sky-window .mini-card img {
height: 116px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 12: live demo inside the window
Clicking the ask bar (or scrolling it into view) plays a
step-by-step "working task" demo of the trade checker,
ending with a verdict; the idle view returns via ׳³ג€”׳³ג€“׳³ג€¢׳³ֲ¨.
========================================================= */
html body .sky-window [hidden] {
display: none !important;
}
/* ask bar ׳’ג‚¬ג€ live typing state during the demo */
html body .sky-window .win-ask.is-focused {
border-color: rgba(20, 52, 74, 0.42);
box-shadow: 0 6px 22px rgba(20, 52, 74, 0.14);
}
html body .sky-window .win-ask .q.is-typed {
color: #16283a;
}
html body .sky-window .type-caret {
display: inline-block;
width: 2px;
height: 1.05em;
margin-inline-start: 2px;
vertical-align: -0.18em;
background: #14344a;
animation: caretBlink 0.85s steps(1) infinite;
}
@keyframes caretBlink {
50% { opacity: 0; }
}
/* press animations for the demo cursor's clicks */
html body .sky-window .demo-cursor::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(20, 52, 74, 0.5);
opacity: 0;
transform: scale(0.4);
}
html body .sky-window .demo-cursor.is-clicking::after {
animation: cursorRipple 0.55s var(--ease) both;
}
@keyframes cursorRipple {
0% { opacity: 0.7; transform: scale(0.4); }
100% { opacity: 0; transform: scale(3); }
}
html body .sky-window .win-ask.is-click-flash {
animation: askFlash 0.42s var(--ease);
}
@keyframes askFlash {
0% { box-shadow: 0 4px 18px rgba(20, 52, 74, 0.08); }
35% { box-shadow: 0 0 0 7px rgba(20, 52, 74, 0.12), 0 4px 18px rgba(20, 52, 74, 0.14); }
100% { box-shadow: 0 4px 18px rgba(20, 52, 74, 0.08); }
}
html body .sky-window .win-ask-btn.is-pressed {
animation: btnPress 0.42s var(--ease) both;
}
@keyframes btnPress {
0% { transform: scale(1); background: #f1f5f8; }
40% { transform: scale(0.87); background: #dfe8ee; }
100% { transform: scale(1); background: #f1f5f8; }
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 13: under the sky section
A soft shadow falls from the sky/window onto the white
section below; that section gets side "rails" ׳’ג‚¬ג€ thin
vertical lines hugging the content, white outside them.
========================================================= */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
box-shadow: 0 34px 60px -22px rgba(20, 52, 74, 0.20);
}
html body section.band.band-rails,
html[data-theme="light"] body section.band.band-rails,
html[data-theme="dark"] body section.band.band-rails {
background: transparent;
border-bottom: 1px solid rgba(20, 52, 74, 0.08);
}
html body section.band.band-rails .shell {
border-inline: 1px solid rgba(20, 52, 74, 0.12);
padding-inline: 46px;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 14: closing band, blue beam CARD
A standalone rounded card (like the sky canvas) whose
background is a blue beam of light falling from above onto
the card's bottom-center; white page around it.
========================================================= */
html body section.band.closing,
html[data-theme="light"] body section.band.closing,
html[data-theme="dark"] body section.band.closing {
background: none;
padding-block: clamp(30px, 4.5vw, 60px) clamp(52px, 7vw, 96px);
}
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell {
border-radius: 26px;
padding-block: clamp(56px, 8vw, 106px);
background:
linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 32%),
conic-gradient(from 270deg at 50% 118%,
rgba(255, 255, 255, 0) 0deg,
rgba(255, 255, 255, 0.92) 35deg,
rgba(255, 255, 255, 0) 52deg,
rgba(154, 202, 255, 0.5) 60deg,
rgba(96, 165, 250, 0.8) 74deg,
rgba(52, 130, 240, 0.98) 88deg,
rgba(45, 118, 235, 1) 90deg,
rgba(52, 130, 240, 0.98) 92deg,
rgba(96, 165, 250, 0.8) 106deg,
rgba(154, 202, 255, 0.5) 120deg,
rgba(255, 255, 255, 0) 128deg,
rgba(255, 255, 255, 0.92) 145deg,
rgba(255, 255, 255, 0) 180deg),
radial-gradient(120% 80% at 50% 116%, rgba(93, 164, 249, 0.45) 0%, rgba(93, 164, 249, 0) 75%);
}
html[data-theme="dark"] body section.band.closing .shell {
border-radius: 26px;
padding-block: clamp(56px, 8vw, 106px);
background:
linear-gradient(180deg, var(--plain) 0%, rgba(10, 18, 30, 0) 32%),
conic-gradient(from 270deg at 50% 118%,
rgba(10, 18, 30, 0) 0deg,
rgba(10, 18, 30, 0.92) 35deg,
rgba(10, 18, 30, 0) 52deg,
rgba(30, 80, 160, 0.5) 60deg,
rgba(46, 110, 205, 0.8) 74deg,
rgba(38, 96, 190, 0.95) 90deg,
rgba(46, 110, 205, 0.8) 106deg,
rgba(30, 80, 160, 0.5) 120deg,
rgba(10, 18, 30, 0) 128deg,
rgba(10, 18, 30, 0.92) 145deg,
rgba(10, 18, 30, 0) 180deg),
radial-gradient(120% 80% at 50% 116%, rgba(40, 100, 190, 0.42) 0%, rgba(40, 100, 190, 0) 75%);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 15: full-device responsive sweep
Phones (iPhone SE 375px, fold covers 344px), tablets,
foldables inner screens, and desktops. Fluid + clamp rules
above handle in-between sizes; this part fixes the new
components at the breakpoints.
========================================================= */
/* no accidental horizontal scroll on any device */
html,
body {
overflow-x: clip;
}
/* wider laptops: window gutters a bit smaller than desktop */
@media (max-width: 1220px) {
html body .sky-window {
width: calc(100% - 72px);
}
}
@media (max-width: 900px) {
html body .sky-window {
width: calc(100% - 32px);
}
html body section.band.band-rails .shell {
padding-inline: 28px;
}
}
@media (max-width: 640px) {
/* tight gutters like the sky mat */
html body .sky-window {
width: calc(100% - 18px);
}
html body .sky-window .win-content {
padding: 22px 16px 26px;
}
html body .sky-window .win-ask {
margin: 12px 0 10px;
max-width: none;
padding: 10px 12px;
}
html body .sky-window .win-ask .q {
font-size: 13.5px;
}
html body .sky-window .win-ask-btn {
padding: 9px 14px;
font-size: 13px;
}
html body .sky-window .win-metabar {
gap: 12px;
font-size: 11.5px;
}
html body .sky-window .window-title {
font-size: 16px;
margin: 10px 0 14px;
}
html body .sky-window .mini-grid {
gap: 10px;
}
html body .sky-window .mini-card {
padding: 13px 14px 0;
}
html body .sky-window .mini-card img {
height: 104px;
}
html body .sky-window .mini-grid.is-two {
max-width: none;
}
html body .sky-window .mini-grid.is-one {
max-width: none;
}
html body section.band.band-rails .shell {
border-inline: 0;
padding-inline: 18px;
}
html body section.band.band-rails {
border-inline: 0;
}
html body section.band.closing .shell {
border-radius: 18px;
}
html body .sky-frame {
padding: 6px 8px 24px;
}
html body .sky-canvas {
border-radius: 16px;
}
}
/* very small screens / fold covers (320׳’ג‚¬ג€360px) */
@media (max-width: 360px) {
html body .sky-window .win-content {
padding: 18px 12px 20px;
}
html body .sky-window .mini-card {
padding: 12px 12px 0;
}
html body section.band.band-rails .shell {
padding-inline: 14px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 17: showcase zig-zag restored
Inside the rails the image and the copy spread side by
side, alternating ׳’ג‚¬ג€ no narrow centered column with empty
white margins.
========================================================= */
html body .showcase-block {
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(30px, 5vw, 72px);
align-items: center;
text-align: start;
justify-items: stretch;
padding-block: clamp(34px, 4.5vw, 64px);
}
html body .showcase-block.is-reversed .showcase-media {
order: 2;
}
html body .showcase-media {
max-width: none;
width: 100%;
min-height: 320px;
}
html body .showcase-media > img {
max-height: 244px;
}
html body .showcase-copy {
max-width: none;
justify-items: start;
}
/* back to one centered column on phones */
@media (max-width: 900px) {
html body .showcase-block {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 24px;
}
html body .showcase-block.is-reversed .showcase-media {
order: 0;
}
html body .showcase-copy {
justify-items: center;
max-width: 640px;
}
html body .showcase-media {
max-width: min(420px, 100%);
min-height: 0;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 18: window chrome matches the reference
The sidebar runs the FULL window height (right side) and
the toolbar lives inside the content column, above the
content ׳’ג‚¬ג€ like the aside.com browser mock. Plus: the sky's
shadow must paint over the white section below.
========================================================= */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
position: relative;
z-index: 1;
}
html body .sky-window .win-body {
display: flex;
flex-direction: column;
min-width: 0;
}
html body .sky-window .win-toolbar {
padding: 11px 14px;
border-bottom: 0;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 19: one continuous "rails" frame
All the content below the sky sits between the same two
vertical lines from the showcase to the closing card ׳’ג‚¬ג€
white outside them, sections' tint inside, like aside.com.
The rails width EQUALS the window width so the lines read
as continuations of the window's side edges.
========================================================= */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
/* window width + a small inset on each side ׳’ג‚¬ג€ the lines stay
close to the window edges, only a touch farther out */
width: min(1340px, calc(100% - 104px));
margin-inline: auto;
border-inline: 1px solid rgba(20, 52, 74, 0.12);
background: transparent;
overflow-x: clip;
}
@media (max-width: 1220px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
width: calc(100% - 64px);
}
}
@media (max-width: 900px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
width: calc(100% - 24px);
}
}
@media (max-width: 640px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
width: calc(100% - 16px);
}
}
/* the lines moved to the rails frame ׳’ג‚¬ג€ the showcase shell
keeps only its inner padding */
html body section.band.band-rails .shell,
html[data-theme="light"] body section.band.band-rails .shell,
html[data-theme="dark"] body section.band.band-rails .shell {
border-inline: 0;
padding-inline: 46px;
}
@media (max-width: 640px) {
html body .site-rails .shell,
html[data-theme="light"] body .site-rails .shell,
html[data-theme="dark"] body .site-rails .shell {
padding-inline: 20px;
}
html body section.band.band-rails .shell {
padding-inline: 20px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 20: the footer joins the rails
The two lines continue through the footer to the very
bottom of the page. Dark theme: rails use the dark page
background instead of forced white.
========================================================= */
html body .site-footer {
width: min(1340px, calc(100% - 104px));
margin-inline: auto;
border-inline: 1px solid rgba(20, 52, 74, 0.12);
}
html[data-theme="dark"] body .site-rails,
html[data-theme="dark"] body .site-footer {
border-inline-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] body .site-rails {
background: var(--bg);
}
@media (max-width: 640px) {
html body .site-footer {
width: calc(100% - 16px);
}
}
@media (max-width: 1220px) {
html body .site-footer {
width: calc(100% - 64px);
}
}
@media (max-width: 900px) {
html body .site-footer {
width: calc(100% - 24px);
}
}
/* the footer block: big sweeping top corners like the aside
section shape ׳’ג‚¬ג€ the arc drawn in the sketch */
html body .site-footer {
border-radius: 56px 56px 0 0;
}
html[data-theme="dark"] body .site-footer {
background: rgba(255, 255, 255, 0.03);
}
@media (max-width: 640px) {
html body .site-footer {
border-radius: 34px 34px 0 0;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 21: the rails lines flare out into the
footer. Instead of ending square, each line bends outward
with a big rounded diagonal sweep and the footer becomes
full-bleed below it ׳’ג‚¬ג€ like the blue sketch.
========================================================= */
html body .site-footer {
width: 100%;
border-inline: 0;
border-radius: 0;
position: relative;
}
html body .site-footer .shell,
html[data-theme="light"] body .site-footer .shell,
html[data-theme="dark"] body .site-footer .shell {
width: min(1340px, calc(100% - 104px));
padding-inline: 46px;
}
html body .footer-flare {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 0;
pointer-events: none;
}
html body .footer-flare i {
position: absolute;
bottom: 0;
height: 112px;
width: calc((100% - min(1340px, calc(100% - 104px))) / 2 + 1px);
}
html body .flare-left { left: 0; }
html body .flare-right { right: 0; }
/* filled wedge: covers the straight rail segment so only the
curve remains, then hands over to the footer background */
html body .flare-left::before,
html body .flare-right::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
}
html body .flare-left::before {
border-top-left-radius: 100% 100%;
}
html body .flare-right::before {
border-top-right-radius: 100% 100%;
}
/* the stroked arc itself: with a full-corner radius the top
and side borders are nothing but the curve */
html body .flare-left::after {
content: "";
position: absolute;
inset: 0;
border-top: 1px solid rgba(20, 52, 74, 0.12);
border-left: 1px solid rgba(20, 52, 74, 0.12);
border-top-left-radius: 100% 100%;
}
html body .flare-right::after {
content: "";
position: absolute;
inset: 0;
border-top: 1px solid rgba(20, 52, 74, 0.12);
border-right: 1px solid rgba(20, 52, 74, 0.12);
border-top-right-radius: 100% 100%;
}
html[data-theme="dark"] body .footer-flare i::before,
html[data-theme="dark"] body .footer-flare i::after {
background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] body .footer-flare i::after {
background: none;
border-top-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] body .flare-left::after { border-left-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] body .flare-right::after { border-right-color: rgba(255, 255, 255, 0.14); }
@media (max-width: 1220px) {
html body .site-footer { width: 100%; }
html body .site-footer .shell { width: calc(100% - 64px); }
html body .footer-flare i { width: calc((100% - (100% - 64px)) / 2 + 3px); }
}
@media (max-width: 900px) {
html body .site-footer .shell { width: calc(100% - 24px); }
html body .footer-flare i { width: calc((100% - (100% - 24px)) / 2 + 3px); }
}
@media (max-width: 640px) {
html body .site-footer { width: 100%; border-radius: 0; }
html body .site-footer .shell { width: calc(100% - 16px); padding-inline: 20px; }
html body .footer-flare i { height: 70px; width: calc((100% - (100% - 16px)) / 2 + 3px); }
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 22: the closing beam fills its whole
section between the two rails lines (edge to edge, no
rounded standalone card), and the beam itself matches the
reference: light-blue upper corners, white only in the
bottom corners, deep core at bottom-center, soft dots.
========================================================= */
html body section.band.closing,
html[data-theme="light"] body section.band.closing,
html[data-theme="dark"] body section.band.closing {
padding-block: clamp(48px, 6vw, 88px);
}
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell {
/* aside.com banner replica: image background, rounded card,
wide, padding 128px 32px */
width: calc(100% - 24px);
max-width: none;
margin-inline: auto;
display: block;
border-radius: 22.4px;
padding-block: clamp(64px, 9vw, 128px);
padding-inline: 32px;
background-image: url("images/bg-banner.png");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 24px);
max-width: none;
margin-inline: auto;
display: block;
border-radius: 22.4px;
padding-block: clamp(64px, 9vw, 128px);
padding-inline: 32px;
background-image: url("images/bg-banner.png");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: #0a0a0c;
}
/* on the blue image the headline and the lead are near-black,
like aside's banner; the button is the dark pill */
html body section.band.closing .shell h2,
html[data-theme="dark"] body section.band.closing .shell h2 {
color: #0a0a0c;
}
html body section.band.closing .shell .section-lead,
html[data-theme="dark"] body section.band.closing .shell .section-lead {
color: rgba(10, 10, 12, 0.72);
}
html body section.band.closing .button-primary,
html[data-theme="dark"] body section.band.closing .button-primary {
background: #0a0a0c;
color: #ffffff;
}
/* part 28 ׳’ג‚¬ג€ banner fills its box: aside proportions (1344x468),
content vertically centered inside the image card */
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
aspect-ratio: 1344 / 468;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
}
html body section.band.closing .shell h2,
html body section.band.closing .shell .section-lead {
max-width: none;
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
padding-block: 64px;
}
}
/* part 29 ׳’ג‚¬ג€ the card fills the whole section: zero band padding,
touching the side lines so the radii own the corners */
html body section.band.closing,
html[data-theme="light"] body section.band.closing,
html[data-theme="dark"] body section.band.closing {
padding-block: 0;
}
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 2px);
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 2px);
}
}
/* part 30 ׳’ג‚¬ג€ no dead margin below the banner card; card sits on
the footer closure line */
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
margin: 0 auto;
}
/* part 31 ׳’ג‚¬ג€ less rounded banner card */
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
border-radius: 12px !important;
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
border-radius: 10px !important;
}
}
/* part 32 ׳’ג‚¬ג€ end-of-site wave: two soft layers drifting slowly,
at the very bottom of the footer, behind its content */
html body .site-footer {
position: relative;
}
html body .site-footer .shell {
position: relative;
z-index: 1;
}
html body .site-wave {
position: absolute;
z-index: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 240px;
margin: 0;
border: 0;
overflow: hidden;
background: none;
display: block;
pointer-events: none;
}
@media (max-width: 640px) {
html body .site-wave { height: 130px; }
}
html body .site-wave .wave-layer {
position: absolute;
inset-inline: 0;
bottom: 0;
background-repeat: repeat-x;
background-size: 1200px 100%;
pointer-events: none;
}
html body .site-wave .wave-back {
height: 80%;
opacity: 0.05;
background-image: url("data:image/svg+xml;utf8,");
animation: waveDrift 26s linear infinite reverse;
}
html body .site-wave .wave-front {
height: 96%;
opacity: 0.09;
background-image: url("data:image/svg+xml;utf8,");
animation: waveDrift 19s linear infinite;
}
@keyframes waveDrift {
from { background-position-x: 0; }
to { background-position-x: -1200px; }
}
html[data-theme="dark"] body .site-wave .wave-back {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.07;
}
html[data-theme="dark"] body .site-wave .wave-front {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.12;
}
@media (max-width: 640px) {
html body .site-wave { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
html body .site-wave .wave-layer { animation: none; }
}
/* part 34 ׳’ג‚¬ג€ catalog breaks out to full-bleed dark slab, and the
rails split into a head block (showcase) and tail block (trade
+ closing); the head block loses the closure band */
html body .site-rails.is-head {
padding-bottom: 0;
}
html body .site-rails.is-head::after {
display: none;
}
html[data-theme="light"] body .site-rails.is-head,
html[data-theme="dark"] body .site-rails.is-head,
html body .site-rails.is-head {
padding-bottom: 0;
}
html[data-theme="light"] body .site-rails.is-head::after,
html[data-theme="dark"] body .site-rails.is-head::after,
html body .site-rails.is-head::after {
display: none;
}
html body section#catalog {
width: 100vw;
margin-inline: calc(50% - 50vw);
padding-inline: 40px;
border-inline: 0;
border-radius: 140px;
}
@media (max-width: 640px) {
html body section#catalog {
padding-inline: 20px;
}
}
html body section#catalog .shell {
border-inline: 0;
}
/* part 36 ׳’ג‚¬ג€ cream site background: rails, head band, closing
covers, flare wedges all follow var(--bg) instead of white */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails,
html body section.band.band-rails,
html[data-theme="light"] body section.band.band-rails {
background: var(--bg);
}
html body section.band.closing::before,
html body section.band.closing::after,
html body .site-footer,
html[data-theme="light"] body .site-footer,
html body .footer-flare i::before,
html[data-theme="light"] body .footer-flare i::before {
background: var(--bg);
}
html[data-theme="dark"] body section.band.closing::before,
html[data-theme="dark"] body section.band.closing::after,
html[data-theme="dark"] body .footer-flare i::before {
background: var(--bg);
}
/* part 35 ׳’ג‚¬ג€ rounded corners on the dark slab + scroll reveal
(JS adds .is-reveal, then .is-reveal-visible when it scrolls in) */
html body section#catalog {
border-radius: 140px;
}
/* part 35b ׳’ג‚¬ג€ catalog zoom: continuous scroll-driven scale,
transform origin at the section center */
html body section#catalog {
transform-origin: 50% 42%;
will-change: transform, opacity;
}
html body section#catalog.is-reveal {
opacity: 0;
transform: translateY(90px) scale(0.94);
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
html body section#catalog.is-reveal.is-reveal-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
html body section#catalog.is-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* part 39 ׳’ג‚¬ג€ the tail rails slides up beneath the dark catalog
slab: its side lines continue up behind the rounded corners */
html body section#catalog {
position: relative;
z-index: 2;
}
html body .site-rails.is-tail,
html[data-theme="light"] body .site-rails.is-tail,
html[data-theme="dark"] body .site-rails.is-tail {
margin-top: -64px;
}
html body .site-rails.is-tail > .band:first-child {
padding-top: calc(64px + clamp(48px, 6vw, 88px));
}
/* part 38 ׳’ג‚¬ג€ modern thin rounded scrollbars everywhere
(light: soft dark thumb; dark catalog: light thumb) */
html {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.24) transparent;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.24);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-corner {
background: transparent;
}
html body section#catalog ::-webkit-scrollbar-thumb,
html body section#catalog ::-webkit-scrollbar-corner {
background: rgba(255, 255, 255, 0.22);
}
html body section#catalog ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.38);
}
html body section#catalog {
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
html body .item-modal ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
}
html body .item-modal {
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
/* part 33 ׳’ג‚¬ג€ light-only site: the catalog section gets its own
dark theme (like the reference), scoped token override */
html body section#catalog,
html[data-theme="light"] body section#catalog,
html[data-theme="dark"] body section#catalog {
color-scheme: dark;
--bg: #1c1c1c;
--bg-soft: #202020;
--panel: #222222;
--panel-2: #262626;
--panel-3: #2e2e2e;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #ffffeb;
--text-2: #d8d8d0;
--muted: #a6a69d;
--muted-2: #87877f;
--plain: #1c1c1c;
--tint: #232323;
--media-surface: #2a2a2a;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35);
--accent: #8f7bff;
--accent-soft: rgba(143, 123, 255, 0.14);
--accent-line: rgba(143, 123, 255, 0.4);
--on-invert: rgba(255, 255, 255, 0.72);
background: #1c1c1c;
color: #ffffeb;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 23: uniform footer bottom block
The flare wedges blend into the page background (no two
tone patches), the footer keeps the rails lines down its
outer edges to the bottom of the page.
========================================================= */
html body .site-footer {
border-inline: 1px solid rgba(20, 52, 74, 0.12);
}
html[data-theme="dark"] body .site-footer {
border-inline-color: rgba(255, 255, 255, 0.14);
background: var(--bg);
}
html[data-theme="dark"] body .footer-flare i::before {
background: var(--bg);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 24: the flare band lives BELOW the beam
Give the rails a bottom strip so the blue beam ends above
it and the flare curve never crosses the beam.
========================================================= */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
padding-bottom: 112px;
}
@media (max-width: 640px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
padding-bottom: 70px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 25: footer closure line at the band top
The horizontal line that closes the footer sits where the
beam ends (top of the flare band), the arcs hang from it,
and the old border-top inside the footer is removed.
========================================================= */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
position: relative;
display: flex;
flex-direction: column;
}
html body section.band.closing {
margin-top: auto;
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 2px);
}
}
html body .site-rails::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 112px;
height: 0;
border-bottom: 1px solid rgba(20, 52, 74, 0.12);
}
html[data-theme="dark"] body .site-rails::after {
border-bottom-color: rgba(255, 255, 255, 0.14);
}
html body .site-footer {
border-top: 0;
}
@media (max-width: 640px) {
html body .site-rails::after {
bottom: 70px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 26: clean closing ground
Inside the closing section there are no rails lines and no
hairline above it ׳’ג‚¬ג€ only the floating beam card; the frame
resumes only at the footer closure line below.
========================================================= */
html body section.band.closing {
position: relative;
margin-inline: -1px;
}
html body section.band.closing::before,
html body section.band.closing::after {
content: "";
position: absolute;
top: -1px;
bottom: -1px;
width: 2px;
z-index: 2;
background: transparent;
}
html body section.band.closing::before { right: 0; }
html body section.band.closing::after { left: 0; }
html[data-theme="dark"] body section.band.closing::before,
html[data-theme="dark"] body section.band.closing::after {
background: var(--bg);
}
/* part 41 ׳’ג‚¬ג€ edges-only zoom: the dark slab's background moves to a
dedicated ::before layer; scrolling zooms ONLY that layer's top and
bottom edges (horizontal compensated to always cover 100vw), so the
content stays perfectly still and gives an entry/exit feeling */
html body section#catalog::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #1c1c1c;
border-radius: 140px;
transform: scaleX(var(--zoom-inv, 1)) scaleY(var(--zoom, 1));
transform-origin: 50% 50%;
will-change: transform;
}
/* the section itself becomes transparent ׳’ג‚¬ג€ the zooming ::before is the
only dark surface, so the edge movement is actually visible */
html body section#catalog,
html[data-theme="light"] body section#catalog,
html[data-theme="dark"] body section#catalog {
background: transparent;
}
/* part 44 ׳’ג‚¬ג€ big bold stat row under the catalog title (same cream color) */
html body section#catalog .catalog-stats {
display: flex;
justify-content: center;
gap: clamp(32px, 6vw, 96px);
margin-top: clamp(22px, 3vw, 44px);
flex-wrap: wrap;
}
html body section#catalog .catalog-stat {
display: grid;
justify-items: center;
gap: 4px;
}
html body section#catalog .catalog-stat span {
font-size: clamp(13px, 1.4vw, 16px);
font-weight: 600;
color: #b9b8ae;
}
html body section#catalog .catalog-stat small {
font-size: 0.8em;
color: #8d8c82;
}
html body section#catalog .catalog-stat strong {
font-size: clamp(30px, 4.2vw, 58px);
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.01em;
color: #ffffeb;
}
/* part 43 ׳’ג‚¬ג€ catalog header: wispr-style centered display typography */
html body section#catalog .catalog-head,
html[data-theme="light"] body section#catalog .catalog-head,
html[data-theme="dark"] body section#catalog .catalog-head {
display: block;
text-align: center;
margin: 0 auto clamp(28px, 4vw, 56px);
max-width: 900px;
}
html body section#catalog .catalog-kicker {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #a6a69d;
margin-bottom: clamp(16px, 2.4vw, 30px);
}
html body section#catalog .catalog-display {
margin: 0;
font-family: Georgia, "Times New Roman", "Noto Serif Hebrew", serif;
font-weight: 400;
font-size: clamp(34px, 5.4vw, 68px);
line-height: 1.12;
letter-spacing: -0.01em;
color: #ffffeb;
text-align: center;
}
html body section#catalog .catalog-display em {
font-style: italic;
}
html body section#catalog .catalog-lead {
margin-top: clamp(12px, 1.8vw, 22px);
color: #a6a69d;
text-align: center;
font-size: clamp(14px, 1.5vw, 17px);
}
/* part 53 ׳’ג‚¬ג€ catalog head: single green marquee band, full-bleed (clients-strip style) */
#catalog .marquee {
position: relative;
overflow: hidden;
background: #0e3f8f;
/* logos hug the TOP of the card; the oversized bottom padding creates the
extra blue depth that hides behind the black card's 118px overlap and
keeps the 96px corner curve fully covered ׳’ג‚¬ג€ logos stay in full view */
padding: clamp(56px, 8vw, 96px) 0 calc(clamp(56px, 8vw, 96px) + 96px);
}
/* soft side "air layers": REMOVED per user ׳’ג‚¬ג€ instead the scroll region
is simply inset from the card sides so chips stop well away from the
rounded corners, exactly like the reference */
#catalog .marquee-clip {
margin-inline: 0;
overflow: hidden;
}
#catalog .marquee-track {
display: inline-flex;
align-items: center;
gap: 72px;
width: max-content;
padding: 0 36px;
animation: mm-marquee 44s linear infinite;
will-change: transform;
}
#catalog .mq-chip {
display: inline-flex;
align-items: center;
gap: 12px;
color: #eafff2;
font-weight: 700;
font-size: 17px;
white-space: nowrap;
opacity: .95;
}
#catalog .mq-chip img {
width: 34px;
height: 34px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
@keyframes mm-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
#catalog .marquee-track { animation: none; }
}
/* part 52 ׳’ג‚¬ג€ white card body, black Accept All, icon-only speak button */
html body div#consent-drawer .consent-card {
background: transparent;
border-color: rgba(0, 0, 0, 0.06);
}
html body div#consent-drawer .consent-card > strong {
color: #16161a;
}
html body div#consent-drawer .consent-card p {
color: #3a3a38;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary {
background: #000000;
border-color: #000000;
color: #ffffff;
font-family: Figtree, Arial, sans-serif;
font-size: 20px;
font-weight: 400; /* not bold */
letter-spacing: 0.02em;
}
/* hand-drawn blue pencil stroke under the card title */
html body div#consent-drawer .consent-card > strong {
display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C 45 2.5, 90 7.5, 135 4.5 S 195 4, 217 5.5' fill='none' stroke='%234aa3ff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 100% 10px;
padding-bottom: 8px;
margin-bottom: 8px;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary:hover {
background: #1c1c1c;
}
html body div#consent-drawer.overlay-mode .consent-speak {
background: #f3f9ee;
border-color: rgba(17, 78, 11, 0.18);
}
html body div#consent-drawer.overlay-mode .consent-speak svg.icon {
width: 32px;
height: 32px;
display: block;
}
html body div#consent-drawer.overlay-mode .consent-speak img,
html body div#consent-drawer.overlay-mode .consent-speak i {
display: none;
}
html body div#consent-drawer.overlay-mode .consent-speak svg {
display: none;
}
/* part 51 ׳’ג‚¬ג€ karaoke lighting of the disclosure text while the narration plays */
html body #consent-text .k-word {
border-radius: 8px;
padding: 1px 4px;
margin: -1px -2px;
transition: background-color 0.18s ease;
}
html body #consent-text .k-word.is-past {
background: rgba(255, 214, 61, 0.35);
}
html body #consent-text .k-word.is-active {
background: #ffd94a;
}
html body #consent-text .k-word.is-active {
box-shadow: 0 2px 10px rgba(255, 214, 61, 0.35);
}
/* part 50 ׳’ג‚¬ג€ spacious modal card, big text, full-width buttons */
html body div#consent-drawer.overlay-mode {
padding: 32px 24px;
}
html body div#consent-drawer.overlay-mode .consent-card {
width: min(780px, calc(100vw - 48px));
max-width: 780px;
padding: 32px 40px 26px;
border-radius: 20px;
box-shadow: none;
}
html body div#consent-drawer.overlay-mode .consent-card > strong {
font-size: 22px;
margin-bottom: 14px;
}
html body div#consent-drawer.overlay-mode .consent-card p {
font-size: 28px;
line-height: 1.6;
margin-bottom: 24px;
}
html body div#consent-drawer.overlay-mode .consent-buttons {
display: block;
}
html body div#consent-drawer.overlay-mode .consent-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: 700;
}
html body div#consent-drawer.overlay-mode .consent-speak {
width: 100%;
justify-content: center;
padding: 13px;
font-size: 15px;
background: #f3f9ee;
border-color: rgba(17, 78, 11, 0.18);
margin: 12px 0 0;
min-height: 52px;
}
html body div#consent-drawer.overlay-mode .consent-speak:hover {
background: #e9f3e2;
}
html body div#consent-drawer.overlay-mode .consent-speak svg {
width: 19px;
height: 19px;
}
/* part 49 ׳’ג‚¬ג€ wider consent card + centered modal mode + disclose button */
html body div#consent-drawer .consent-card {
width: min(520px, calc(100vw - 32px));
padding: 24px 26px 18px;
}
html body div#consent-drawer .consent-card > strong {
font-size: 18px;
margin-bottom: 10px;
}
html body div#consent-drawer .consent-card p {
font-size: 14.5px;
}
html body div#consent-drawer .consent-btn {
padding: 11px 18px;
font-size: 15px;
}
/* modal mode: centered on a dimmed backdrop */
html body .consent-drawer.overlay-mode {
inset: 0;
width: 100%;
display: grid;
place-items: center;
background: rgba(12, 14, 16, 0.55);
backdrop-filter: blur(2px);
padding: 24px;
}
html body .consent-drawer.overlay-mode .consent-card {
max-width: 520px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
/* speak button inside the card */
html body .consent-speak {
display: flex;
align-items: center;
gap: 8px;
margin: 12px auto 0;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #f7f5e6;
color: #16161a;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
}
html body .consent-speak svg {
width: 17px;
height: 17px;
}
html body .consent-speak:hover {
background: #efede0;
}
html body .consent-speak.is-speaking {
border-color: #1a4d45;
color: #1a4d45;
}
/* corner disclose button (top-left of the header band) */
html body .disclose-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem;
min-height: 48px;
min-width: 190px;
text-align: center;
background-color: #000000; /* base: full black */
color: #ffffff;
border: 2px solid #000000;
border-radius: 0.5rem;
font-family: Figtree, Arial, sans-serif;
font-weight: 600;
line-height: 16px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.3s;
}
html body .disclose-button .db-text {
position: relative;
z-index: 1;
}
html body .disclose-button svg,
html body .disclose-button i {
display: none;
}
/* white wave that floods the button upward on hover (animated sea) */
html body .disclose-button .wave {
position: absolute;
width: 100%;
height: 200%;
background: url(../images/wave-white.svg);
background-size: 200% 100%;
background-repeat: repeat-x;
top: 105%;
left: 0;
animation: db-wave 2s linear infinite;
transition: top 0.5s;
z-index: 0;
pointer-events: none;
}
@keyframes db-wave {
from { background-position-x: 0; }
to { background-position-x: 200%; }
}
html body .disclose-button:hover {
color: #000000;
}
html body .disclose-button:hover .wave {
top: -100%; /* the white sea floods the whole button */
}
html body .header-actions {
display: flex;
align-items: center;
justify-content: flex-end; /* inline-end = the left side in RTL */
margin-inline-end: 10px; /* symmetric with the pin inset on the right */
}
html body .disclose-button:hover {
color: #1a1a1a;
transform: scale(0.98);
}
@media (max-width: 640px) {
html body .disclose-button {
left: 16px;
top: 12px;
padding: 8px 12px;
}
html body .disclose-button span {
display: none;
}
}
/* part 48 ׳’ג‚¬ג€ consent / disclosure drawer (like the reference cookie card):
cream card bottom-left, ghost + dark-green primary buttons */
html body .consent-drawer {
position: fixed;
z-index: 80;
bottom: 20px;
inset-inline-start: 20px;
width: min(360px, calc(100vw - 32px));
}
html body .consent-card {
background: #ffffe6;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
padding: 18px 18px 14px;
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
html body .consent-card > strong {
display: block;
font-size: 16px;
font-weight: 800;
color: #16161a;
margin-bottom: 8px;
}
html body .consent-card p {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.65;
color: #3a3a38;
}
html body .consent-buttons {
display: flex;
gap: 10px;
align-items: center;
}
html body .consent-btn {
border-radius: 10px;
padding: 10px 16px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
html body .consent-ghost {
background: #f7f5e6;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #16161a;
}
html body .consent-ghost:hover {
background: #efede0;
}
html body .consent-primary {
background: #1a4d45;
border: 1px solid #1a4d45;
color: #ffffff;
}
html body .consent-primary:hover {
background: #23635a;
}
html body .consent-foot {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 12px;
font-size: 12px;
color: #6d6a5c;
}
html body .consent-foot a {
color: #4a4842;
text-decoration: none;
}
html body .consent-foot a:hover {
text-decoration: underline;
}
html body .consent-brand {
color: #87857a;
white-space: nowrap;
}
@media (max-width: 640px) {
html body .consent-drawer {
inset-inline: 16px;
inset-inline-start: 16px;
bottom: 16px;
width: auto;
}
}
/* part 47 ׳’ג‚¬ג€ clear-all as a red trash icon (like the game), centered */
html body #trade-actions,
html[data-theme="light"] body #trade-actions,
html[data-theme="dark"] body #trade-actions {
display: flex !important;
justify-content: center;
margin-top: clamp(10px, 1.6vw, 18px);
}
html body .trade-clear-button {
width: 44px;
height: 44px;
border-radius: 12px;
background: transparent;
border: 0;
color: #e5453d;
display: grid;
place-items: center;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
html body .trade-clear-button svg {
width: 26px;
height: 26px;
}
html body .trade-clear-button:hover {
background: rgba(229, 69, 61, 0.09);
transform: translateY(-1px);
}
html body .trade-clear-button:active {
transform: scale(0.94);
}
/* part 46 ׳’ג‚¬ג€ declutter: remove column headers, score chips, swap
button and actions bar; the result strip already names the sides.
Give the two fields generous room instead. */
html body #trade-board .trade-column-head,
html body #trade-board .trade-divider,
html body #trade-actions {
display: none !important;
}
html body #trade-board .trade-column {
padding: clamp(16px, 2vw, 24px);
background: #fbfaf4;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
}
html body #trade-board .search-field-small {
margin-bottom: 12px;
}
html body #trade-board .search-field-small input {
padding-block: 12px;
font-size: 15px;
}
@media (max-width: 640px) {
html body #trade-board .trade-column {
padding: 14px;
}
}
/* part 45 ׳’ג‚¬ג€ trade sides styled like the in-game swap screen:
square item tiles with colored rarity frames, slot-less empty state */
html body #trade-board .trade-list,
html[data-theme="light"] body #trade-board .trade-list,
html[data-theme="dark"] body #trade-board .trade-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
padding: 2px;
}
html body #trade-board .trade-list:empty {
display: none;
}
html body #trade-board .trade-item {
position: relative;
aspect-ratio: 1;
background: #fbfaf4;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 8px;
justify-content: center;
}
html body #trade-board .trade-item[data-rarity="legendary"] { border-color: var(--legendary, #d7a614); }
html body #trade-board .trade-item[data-rarity="epic"] { border-color: var(--epic, #8f5bd1); }
html body #trade-board .trade-item[data-rarity="rare"] { border-color: var(--rare, #3d7bd9); }
html body #trade-board .trade-item[data-rarity="regular"] { border-color: rgba(0, 0, 0, 0.18); }
html body #trade-board .trade-item-copy,
html body #trade-board .badge,
html body #trade-board .trade-item-mark {
display: none;
}
html body #trade-board .trade-item-img {
width: 100%;
height: 100%;
object-fit: contain;
}
html body #trade-board .trade-item-remove {
position: absolute;
top: -7px;
inset-inline-end: -7px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #16161a;
color: #ffffff;
border: 0;
display: grid;
place-items: center;
opacity: 0;
transition: opacity 0.15s ease;
cursor: pointer;
}
html body #trade-board .trade-item-remove svg {
width: 12px;
height: 12px;
}
html body #trade-board .trade-item:hover .trade-item-remove,
html body #trade-board .trade-item-remove:focus-visible {
opacity: 1;
}
/* empty state: dashed drop zone like the game's empty slots */
html body #trade-board .trade-empty,
html[data-theme="light"] body #trade-board .trade-empty,
html[data-theme="dark"] body #trade-board .trade-empty {
border: 2px dashed rgba(0, 0, 0, 0.14);
border-radius: 10px;
padding: clamp(20px, 3vw, 34px);
text-align: center;
color: #6d6a5c;
background:
repeating-linear-gradient(0deg, transparent, transparent 100%);
}
/* score chip: square, game-like */
html body #trade-board .trade-score {
min-width: 42px;
height: 42px;
border-radius: 10px;
background: #fbfaf4;
border: 1px solid rgba(0, 0, 0, 0.12);
display: grid;
place-items: center;
font-weight: 800;
font-size: 16px;
color: #16161a;
}
html body #trade-board .trade-column-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
/* swap divider: circular cream button */
html body #trade-board .trade-divider .swap-button {
background: #f7f5e6;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
/* part 42 ׳’ג‚¬ג€ trade tester: luxurious dark card shell, cream inputs,
inner results container with big verdict typography */
html body #trade #trade-board,
html[data-theme="light"] body #trade #trade-board,
html[data-theme="dark"] body #trade #trade-board {
color-scheme: dark;
--bg: transparent;
--bg-soft: #fafaf6;
--panel: #fbfaf4;
--panel-2: #f6f5ec;
--panel-3: #efeee2;
--line: rgba(0, 0, 0, 0.08);
--line-strong: rgba(0, 0, 0, 0.18);
--text: #16161a;
--text-2: #3a3a38;
--muted: #6d6a5c;
--muted-2: #87857a;
--plain: #ffffff;
--tint: #f7f5e6;
--media-surface: #f3f2e6;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.08);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.05);
--accent: #5b48b0;
--accent-soft: rgba(91, 72, 176, 0.1);
--accent-line: rgba(91, 72, 176, 0.4);
background: transparent;
color: #16161a;
border-radius: 24px;
padding: clamp(20px, 3vw, 36px);
box-shadow: 0 10px 40px rgba(20, 20, 30, 0.1);
}
/* white card on the cream page ׳’ג‚¬ג€ hairline border, like the reference */
html body #trade #trade-board {
border: 1px solid rgba(0, 0, 0, 0.07);
}
/* cream search inputs with dark readable text */
html body #trade-board .search-field-small,
html[data-theme="light"] body #trade-board .search-field-small,
html[data-theme="dark"] body #trade-board .search-field-small {
background: #f7f5e6;
color: #161616;
border: 1px solid rgba(0, 0, 0, 0.06);
}
html body #trade-board .search-field-small input {
color: #161616;
}
html body #trade-board .search-field-small input::placeholder {
color: #6d6a5c;
}
html body #trade-board .search-field-small .icon {
color: #6d6a5c;
}
/* inner results strip: gentle cream inside the white card (reference layout) */
html body #trade-board .verdict.verdict-inner,
html[data-theme="light"] body #trade-board .verdict.verdict-inner,
html[data-theme="dark"] body #trade-board .verdict.verdict-inner {
margin-top: clamp(16px, 2vw, 24px);
padding: clamp(18px, 2.6vw, 32px) clamp(16px, 2.4vw, 28px);
border-radius: 14px;
background: #f7f5e6;
border: 1px solid rgba(0, 0, 0, 0.05);
grid-template-columns: 1fr auto;
gap: clamp(12px, 2vw, 22px);
align-items: center;
}
html body #trade-board .verdict-icon {
display: none;
}
html body #trade-board .verdict-copy strong {
font-size: clamp(20px, 2.6vw, 30px);
font-weight: 800;
color: #16161a;
letter-spacing: -0.01em;
}
html body #trade-board .verdict-copy p {
margin: 4px 0 0;
font-size: clamp(13px, 1.4vw, 16px);
color: #6d6a5c;
}
/* big ROI-style numbers */
html body #trade-board .verdict-scores {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 24px);
flex: 0 0 auto;
}
html body #trade-board .verdict-score-col {
display: grid;
justify-items: start;
gap: 2px;
}
html body #trade-board .verdict-score-col span {
font-size: clamp(13px, 1.5vw, 16px);
font-weight: 600;
letter-spacing: 0;
color: #4a4842;
}
html body #trade-board .verdict-score-col strong {
font-size: clamp(30px, 4.4vw, 56px);
font-weight: 800;
line-height: 1.05;
color: #16161a;
}
html body #trade-board .verdict-score-col:last-child strong {
color: #16161a;
}
html body #trade-board .verdict-score-col strong::after {
content: " ׳³ֲ ׳³ֲ§׳³ֲ³";
font-size: clamp(14px, 1.6vw, 20px);
font-weight: 700;
color: #4a4842;
}
html body #trade-board .verdict-score-sep {
width: 1px;
align-self: stretch;
background: rgba(0, 0, 0, 0.1);
}
/* tone accents on the title */
html body #trade-board .verdict.is-balanced .verdict-copy strong {
color: #1f7a4d;
}
html body #trade-board .verdict.is-offer .verdict-copy strong {
color: #c2542f;
}
html body #trade-board .verdict.is-request .verdict-copy strong {
color: #4e3fa8;
}
@media (max-width: 640px) {
html body #trade-board .verdict.verdict-inner {
grid-template-columns: 1fr;
justify-items: stretch;
text-align: right;
}
}
@media (prefers-reduced-motion: reduce) {
html body section#catalog::before {
transform: none;
will-change: auto;
}
}
/* part 54 ׳’ג‚¬ג€ stacked cards: green marquee card above, dark content card covering underneath.
Both cards are full-bleed ׳’ג‚¬ג€ identical width, viewport edge to edge, like the reference. */
html body section#catalog::before {
display: none;
}
/* the blue card starts at the very top of the section ׳’ג‚¬ג€ no gap above */
html body section#catalog {
padding-inline: 0;
padding-block: 0 0;
}
html body section#catalog .marquee {
position: relative;
z-index: 1;
width: 100%;
margin-inline: 0;
background: #0e3f8f;
border-radius: 96px 96px 0 0;
}
html body section#catalog .shell {
position: relative;
z-index: 2;
width: 100%;
max-width: none;
margin-inline: 0;
margin-top: -118px;
background: #1c1c1c;
border-radius: 96px 96px 140px 140px;
padding-block: calc(118px + clamp(24px, 4vw, 56px)) clamp(32px, 5vw, 72px);
padding-inline: clamp(16px, 3.4vw, 44px);
}
/* part 55 was the trade peeking kids / catalog mascot ג€” removed per user */
/* part 56 ׳’ג‚¬ג€ compact consent modal (per user's latest reference) */
html body div#consent-drawer.overlay-mode .consent-card {
width: min(560px, calc(100vw - 40px));
max-width: 560px;
padding: 24px 26px 20px;
border-radius: 12px;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
}
html body div#consent-drawer.overlay-mode .consent-card > strong {
font-size: 19px;
margin-bottom: 10px;
}
html body div#consent-drawer.overlay-mode .consent-card p {
font-size: 15.5px;
line-height: 1.75;
margin-bottom: 20px;
}
html body div#consent-drawer.overlay-mode .consent-buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary {
width: auto;
min-width: 148px;
padding: 12px 22px;
border-radius: 9px;
font-size: 15.5px;
font-weight: 600;
background: transparent;
border-color: rgba(16, 75, 65, 0.55);
color: #104b41;
margin-inline-start: auto;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary:hover {
background: rgba(16, 75, 65, 0.06);
}
html body div#consent-drawer.overlay-mode .consent-speak {
width: auto;
padding: 11px 20px;
min-height: 0;
border-radius: 9px;
background: #f6f2ea;
border: 1px solid rgba(0, 0, 0, 0.07);
margin: 0;
align-self: flex-end;
}
html body div#consent-drawer.overlay-mode .consent-speak svg.icon {
width: 20px;
height: 20px;
}
/* part 57 ׳’ג‚¬ג€ live transcript demo (drop-hero style: Garamond sentences,
tiny speaker pills with 3-bar wave, marching 5-line opacity ladder) */
html body #live-transcript .xt-card {
background: #ffffeb;
border: 0;
border-radius: clamp(20px, 3vw, 40px);
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px);
min-height: clamp(230px, 28vw, 320px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
html body #live-transcript .xt-lines {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
}
html body #live-transcript .xt-row {
display: flex;
align-items: center;
gap: 16px;
min-height: 34px;
font-family: "EB Garamond", Arial, sans-serif;
letter-spacing: -0.03em;
font-size: clamp(18px, 1.63vw + 8px, 26px);
line-height: 1.3em;
color: #1a1a1a;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html body #live-transcript .xt-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 1rem;
padding: .25rem .38rem;
}
html body #live-transcript .xt-pill .xt-name {
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 13px;
padding-inline-end: .25rem;
}
html body #live-transcript .xt-wave {
display: inline-flex;
align-items: center;
gap: 2px;
padding-inline-start: .25rem;
}
html body #live-transcript .xt-wave i {
display: block;
width: 2px;
border-radius: 1px;
background: currentcolor;
}
html body #live-transcript .xt-wave i:nth-child(1) { height: 4px; }
html body #live-transcript .xt-wave i:nth-child(2) { height: 7px; }
html body #live-transcript .xt-wave i:nth-child(3) { height: 5px; }
html body #live-transcript .xt-tone-a.xt-pill { background: #034f46; color: #ffffeb; }
html body #live-transcript .xt-tone-b.xt-pill { background: #ffa946; color: #1a1a1a; }
html body #live-transcript .xt-tone-c.xt-pill { background: #7f1c34; color: #ffffeb; }
html body #live-transcript .xt-tone-d.xt-pill { background: #ffbcf2; color: #1a1a1a; }
html body #live-transcript .xt-text { white-space: pre-wrap; }
/* part 58 ׳’ג‚¬ג€ live transcript as transparent in-hero card (no background) */
.shell.hero { position: relative; }
html body #live-transcript.xt-card {
position: absolute;
inset-inline-end: 0;
top: 52%;
transform: translateY(-50%);
width: clamp(300px, 27vw, 400px);
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
min-height: 0;
z-index: 3;
}
html body #live-transcript .xt-row {
gap: 10px;
font-size: clamp(15px, 1rem + .3vw, 19px);
letter-spacing: -0.02em;
}
html body #live-transcript .xt-pill {
gap: 2px;
border-radius: .8rem;
padding: .22rem .32rem;
}
html body #live-transcript .xt-pill .xt-name {
padding-inline-end: .2rem;
}
@media (max-width: 1200px) {
html body #live-transcript.xt-card {
position: static;
transform: none;
width: 100%;
max-width: 640px;
margin: 18px auto 0;
}
}
/* part 59 ׳’ג‚¬ג€ hero transcript: further left, slight tilt, lighter & bigger type */
html body #live-transcript.xt-card {
inset-inline-end: -5vw;
top: 50%;
transform: translateY(-50%) rotate(-4deg) skewY(-1deg);
}
html body #live-transcript .xt-row {
font-size: clamp(19px, 1.1rem + .4vw, 24px);
font-weight: 400;
letter-spacing: 0;
}
html body #live-transcript .xt-pill {
font-weight: 400;
}
@media (max-width: 1200px) {
html body #live-transcript.xt-card {
inset-inline-end: auto;
transform: none;
}
}
/* part 60 ׳’ג‚¬ג€ no box shadow on the disclose button */
html body .disclose-button,
html body .disclose-button:hover,
html body .disclose-button:focus,
html body .disclose-button:active {
box-shadow: none !important;
}/* part 61 - no black frame on the disclose button while hovered */
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
border-color: #ffffff;
}
html body .disclose-button:hover .wave,
html body .disclose-button:focus-visible .wave {
box-shadow: 0 0 0 2px #ffffff;
}
/* part 62 - hover: the button itself turns white, so no black band survives
above the wave crest; the white flood and the button are one surface */
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
background-color: transparent;
}
/* part 63 - hover wave stops mid-button: black top half, white bottom half,
wavy crest as the divide (no full flood) */
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
background-color: #000000;
border-color: #000000;
color: #ffffff;
}
html body .disclose-button:hover .wave,
html body .disclose-button:focus-visible .wave {
top: -49%;
}
/* part 64 - drop the white glow line around the wave; black text on hover */
html body .disclose-button:hover .wave,
html body .disclose-button:focus-visible .wave {
box-shadow: none;
}
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
color: #000000;
}
/* part 65 - catalog blue band: big testimonial block like the reference
(taller band, no moving chips, serif quote + name + role) */
html body #catalog .marquee {
display: none !important;
}
html body .blue-quote {
background: transparent;
margin: 0;
padding: clamp(56px, 9vw, 130px) clamp(24px, 6vw, 90px);
text-align: center;
}
html body .blue-quote blockquote {
margin: 0 auto;
max-width: 46ch;
font-family: "EB Garamond", Georgia, Arial, sans-serif;
font-weight: 400;
font-size: clamp(22px, 2.2rem, 40px);
line-height: 1.35;
letter-spacing: -0.01em;
color: #ffffeb;
}
html body .blue-quote figcaption {
display: block;
margin-top: 28px;
}
html body .blue-quote .bq-name {
display: block;
font-family: Heebo, Arial, sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
font-size: clamp(17px, 1.6vw, 24px);
color: #ffffeb;
text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
html body .blue-quote .bq-role {
display: block;
margin-top: 10px;
font-family: Heebo, Arial, sans-serif;
font-weight: 500;
font-size: clamp(13px, 1.1vw, 16px);
color: rgba(255, 255, 235, .62);
}
/* part 66 - the blue band is now the quote block itself (strong blue bg) */
html body .blue-quote {
background: #0e3f8f;
border-radius: 96px 96px 0 0;
position: relative;
z-index: 1;
}
/* part 67 - slightly tighter padding on the blue quote band */
html body .blue-quote {
padding: clamp(40px, 6.5vw, 92px) clamp(24px, 5vw, 64px);
}
/* part 68 - blue-quote typography tuned to the reference proportions */
html body .blue-quote blockquote {
max-width: 44ch;
font-size: clamp(20px, 1.9rem, 34px);
line-height: 1.32;
letter-spacing: -0.015em;
}
html body .blue-quote figcaption {
margin-top: 22px;
}
html body .blue-quote .bq-name {
font-size: clamp(15px, 1.25vw, 19px);
letter-spacing: .05em;
text-shadow: none;
}
html body .blue-quote .bq-role {
margin-top: 8px;
font-size: clamp(12px, 1vw, 14px);
color: rgba(255, 255, 235, .55);
}
/* part 69 - blue-quote rebuilt exactly on the testimonial-v3 spec */
html body .blue-quote {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: center;
gap: 2rem;
text-align: center;
}
html body .bq-quote {
width: 100%;
max-width: 48rem;
margin: 0 auto;
font-family: "EB Garamond", Georgia, Arial, sans-serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.05;
letter-spacing: -0.03em;
text-wrap: balance;
color: #ffffeb;
}
html body .blue-quote .bq-author {
display: flex;
flex-flow: column nowrap;
align-items: center;
margin: 0;
}
html body .blue-quote .bq-logo {
width: auto;
max-width: 5rem;
height: auto;
object-fit: contain;
}
html body .blue-quote .bq-logo + .bq-role {
margin-top: 1rem;
}
html body .blue-quote .bq-role {
display: block;
font-family: Heebo, Arial, sans-serif;
font-weight: 500;
font-size: 0.875rem;
color: #ffffeb80;
}
@media (max-width: 767px) {
html body .blue-quote { gap: 1.5rem; }
html body .bq-quote { font-size: 1.5rem; }
}
/* part 70 - the handwritten logo is transparent and thin: keep it big and
readable everywhere (no square padding, no tiny 24px slots) */
html body img[src*="favicon.png"] {
width: auto;
height: auto;
border-radius: 0;
box-shadow: none;
background: transparent !important;
}
/* header + footer brand marks get generous size */
html body .site-header .brand-mark,
html body .footer-brand .brand-mark {
width: auto;
height: auto;
padding: 0;
background: transparent !important;
}
html body .site-header .brand-mark img,
html body .footer-brand .brand-mark img {
display: block;
width: clamp(92px, 10vw, 132px);
height: auto;
}
/* mini app window logo */
html body .sky-window .win-logo img {
width: clamp(30px, 3vw, 42px);
height: auto;
}
/* sidebar profile */
html body .sky-window .side-profile img {
width: clamp(56px, 5vw, 72px);
height: auto;
border-radius: 12px;
}
/* testimonial logo: bigger */
html body .blue-quote .bq-logo {
width: clamp(96px, 10vw, 132px);
max-width: 9rem;
}
/* part 71 - the author line under the logo: clear neutral gray (like the ref) */
html body .blue-quote .bq-role {
color: #aebbcc !important;
opacity: 1;
}
/* part 72 - the fake app sidebar becomes glassmorphism (css.glass) */
html body .sky-window .win-sidebar {
background: rgba(132, 235, 255, 0.39);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(132, 235, 255, 0.3);
}
/* the tiles & rows inside keep their own look, glass only under them */
/* part 73 - glassmorphism on the whole app window + sidebar updated to
the white glass recipe (css.glass) */
html body .sky-window .win-main {
background: rgba(255, 255, 255, 0.27) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.2px);
-webkit-backdrop-filter: blur(11.2px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
html body .sky-window .win-sidebar {
background: rgba(255, 255, 255, 0.27) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.2px);
-webkit-backdrop-filter: blur(11.2px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* part 74 - window + sidebar glass switched to the new purple-tint recipe */
html body .sky-window .win-main {
background: rgba(70, 48, 98, 0.2) !important;
border: 1px solid rgba(70, 48, 98, 0.3) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
html body .sky-window .win-sidebar {
background: rgba(70, 48, 98, 0.2) !important;
border: 1px solid rgba(70, 48, 98, 0.3) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* part 75 - remove the white shell behind the glass window: sky-window's
own white background + thin border showed at the corners and as a thin
white frame around the glass. The glass recipe itself is fielded by
parts 73/74; this removes the opaque shell underneath. */
html body .sky-window {
background: transparent !important;
border: 0 !important;
}
html body .sky-window .win-main {
background-color: rgba(70, 48, 98, 0.2) !important;
background-clip: padding-box;
}
html body .sky-window .win-sidebar {
background-color: rgba(70, 48, 98, 0.2) !important;
background-clip: padding-box;
}
/* part 76 - the demo window keeps its size with the content cleared */
html body .sky-window {
min-height: clamp(380px, 44vw, 540px);
}
html body .sky-window .win-main {
min-height: calc(clamp(380px, 44vw, 540px) - 46px);
}
/* part 77 - new glass tint (css.glass) + no white underneath the window */
html body .sky-window .win-main {
background: rgba(145, 233, 255, 0.14) !important;
border: 1px solid rgba(145, 233, 255, 0.08) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
html body .sky-window .win-sidebar {
background: rgba(145, 233, 255, 0.14) !important;
border: 1px solid rgba(145, 233, 255, 0.08) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* remove the white frame around the sky canvas entirely */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background: transparent !important;
padding: 0 !important;
}
/* remove the whitish bottom fade of the sky: the window now ends on sky blue */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
background:
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%);
}
/* part 78 - no shadows anywhere around the glass window, and the card
reaches the very bottom of the sky (no leftover strip under it) */
html body .sky-window .win-main,
html body .sky-window .win-sidebar {
box-shadow: none !important;
}
html body .sky-window {
box-shadow: none !important;
}
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
box-shadow: none !important;
}
html body .sky-window .win-main {
min-height: clamp(380px, 44vw, 540px) !important;
}
/* part 79 - Google-like SERP demo inside the glass browser window */
html body .sky-window .win-content {
min-height: 0;
display: flex;
}
html body .sky-window .win-idle {
flex: 1;
display: flex;
}
html body .sky-window .serp-view {
flex: 1;
display: flex;
flex-flow: column nowrap;
gap: 14px;
padding: 22px 77px 26px;
animation: serpIn .65s cubic-bezier(.25,.7,.3,1) both;
}
@keyframes serpIn {
from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(3px); }
to { opacity: 1; transform: none; filter: none; }
}
/* search bar echo inside the SERP */
html body .sky-window .serp-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 999px;
padding: 11px 20px;
box-shadow: 0 6px 18px rgba(20, 52, 74, 0.08);
}
html body .sky-window .serp-q {
font-family: Heebo, Arial, sans-serif;
font-weight: 600;
font-size: 15px;
color: #22334c;
}
html body .sky-window .serp-mag { width: 16px; height: 16px; color: #5b6b78; opacity: .8; }
html body .sky-window .serp-mag svg { width: 100%; height: 100%; display: block; }
/* filter tabs */
html body .sky-window .serp-tabs {
display: flex;
gap: 20px;
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
padding: 2px 6px 9px;
font-family: Heebo, Arial, sans-serif;
font-size: 13.5px;
color: #5b6b78;
}
html body .sky-window .serp-tabs span { position: relative; padding-bottom: 7px; }
html body .sky-window .serp-tabs .is-on {
color: #1a5fd0;
font-weight: 700;
}
html body .sky-window .serp-tabs .is-on::after {
content: "";
position: absolute;
inset-inline: -4px;
bottom: -10px;
height: 3px;
border-radius: 3px;
background: #1a5fd0;
}
/* results list, Google-like rows */
html body .sky-window .serp-results {
display: flex;
flex-flow: column nowrap;
gap: 17px;
padding-top: 4px;
}
html body .sky-window .serp-res { max-width: 560px; }
html body .sky-window .srp-url {
font-family: Heebo, Arial, sans-serif;
font-size: 12px;
color: #202124;
opacity: .68;
margin-bottom: 4px;
}
html body .sky-window .srp-title {
font-family: Heebo, Arial, sans-serif;
font-size: 17.5px;
line-height: 1.35;
color: #1a0dab;
margin-bottom: 3px;
}
html body .sky-window .srp-snippet {
font-family: Heebo, Arial, sans-serif;
font-size: 13px;
line-height: 1.55;
color: #4d5156;
}
html body .sky-window .serp-res.srp-target .srp-title { color: #1a0dab; }
html body .sky-window .serp-res.srp-dim { opacity: .58; }
/* the neon highlighter sweep on the chosen result */
html body .sky-window .srp-mark {
background-image: linear-gradient(100deg, rgba(255, 241, 79, 0.0), #fff15e 18%, #fff15e 82%, rgba(255, 241, 79, 0.0));
background-repeat: no-repeat;
background-size: 0% 52%;
background-position: 0% 62%;
border-radius: 3px;
padding: 2px 8px 2px 8px;
margin-inline-start: -8px;
transition: background-size .55s cubic-bezier(.3,.6,.35,1);
}
html body .sky-window .srp-mark.is-marked {
background-size: 100% 52%;
}
/* blinking caret typed into the address bar */
html body .sky-window .win-address.addr-focus {
font-weight: 700;
}
html body .sky-window .addr-caret {
display: inline-block;
width: 1.5px;
height: 1.05em;
margin-inline-start: 2px;
background: #22334c;
vertical-align: -2px;
animation: addrBlink 0.9s steps(1) infinite;
}
@keyframes addrBlink {
0%, 55% { opacity: 1; }
56%, 100% { opacity: 0; }
}
html body .sky-window .win-address.addr-enter {
filter: brightness(0.92);
transform: scale(0.995);
}
/* glass wipe transition */
html body .sky-window .glass-wipe {
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
background: linear-gradient(105deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.55) 46%,
rgba(231, 245, 255, 0.92) 52%,
rgba(255, 255, 255, 0.55) 58%,
rgba(255, 255, 255, 0) 74%);
background-size: 300% 100%;
animation: glassWipe 1.15s cubic-bezier(.5,.1,.2,1) both;
}
@keyframes glassWipe {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
/* part 80 - a real marker sweep: painted layer behind the text that
spreads right-to-left like a physical highlighter, with glow */
html body .sky-window .srp-mark {
background-image: none !important;
background-size: auto !important;
background-position: initial !important;
position: relative;
z-index: 1;
padding: 1px 2px;
margin-inline-start: -2px;
}
html body .sky-window .srp-mark::before {
content: "";
position: absolute;
z-index: -1;
top: -2px;
bottom: -4px;
right: -3px;
width: 0;
border-radius: 5px;
background: linear-gradient(100deg, #ffe95c 0%, #ffdf42 70%, #ffcf2e 100%);
box-shadow: 0 2px 18px rgba(255, 220, 60, 0.55);
transform: skewX(-7deg);
opacity: 0;
transition: width .62s cubic-bezier(.3,.6,.25,1), opacity .18s ease-out;
}
html body .sky-window .srp-mark.is-marked::before {
width: calc(100% + 6px);
opacity: 1;
}
/* tiny wet-spot shine riding in front of the paint while it spreads */
html body .sky-window .srp-mark::after {
content: "";
position: absolute;
z-index: -1;
top: -2px;
bottom: -4px;
right: -3px;
width: 18%;
border-radius: 5px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
opacity: 0;
}
html body .sky-window .srp-mark.is-marked::after {
animation: markerShine .62s cubic-bezier(.3,.6,.25,1) both;
}
@keyframes markerShine {
0% { opacity: 0; transform: translateX(0); }
10% { opacity: 1; }
100% { opacity: 0; transform: translateX(-430%); }
}
/* part 81 - after the chosen result is clicked: the game icons float in
a soft arc while a diagonal light beam sweeps across, then fades */
html body .sky-window .games-arc {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 2vw, 26px);
animation: arcIn .8s cubic-bezier(.25,.7,.3,1) both;
}
@keyframes arcIn {
from { opacity: 0; transform: scale(.92); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}
html body .sky-window .games-arc img {
width: clamp(44px, 6.5vw, 92px);
height: auto;
border-radius: 22%;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 14px 22px rgba(20, 52, 74, 0.28));
animation: arcBob 3.6s ease-in-out infinite;
}
/* arc shape: middle icon highest, edges lower */
html body .sky-window .games-arc img:nth-of-type(3) { align-self: flex-start; margin-top: clamp(0px, 1.2vw, 22px); transform-origin: center; }
html body .sky-window .games-arc img:nth-of-type(2),
html body .sky-window .games-arc img:nth-of-type(4) { margin-top: clamp(26px, 4vw, 62px); }
html body .sky-window .games-arc img:nth-of-type(1),
html body .sky-window .games-arc img:nth-of-type(5) { margin-top: clamp(54px, 7.5vw, 108px); }
html body .sky-window .games-arc img:nth-of-type(1) { animation-delay: 0s; }
html body .sky-window .games-arc img:nth-of-type(2) { animation-delay: .35s; }
html body .sky-window .games-arc img:nth-of-type(3) { animation-delay: .7s; }
html body .sky-window .games-arc img:nth-of-type(4) { animation-delay: 1.05s; }
html body .sky-window .games-arc img:nth-of-type(5) { animation-delay: 1.4s; }
@keyframes arcBob {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-9px) rotate(1.5deg); }
}
/* the diagonal light beam that passes over the arc (weakened / soft) */
html body .sky-window .arc-shine {
position: absolute;
inset: -20%;
pointer-events: none;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.32) 48%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.32) 56%,
rgba(255, 255, 255, 0) 66%);
background-size: 280% 280%;
animation: arcShine 2.2s cubic-bezier(.45,.05,.35,.95) .4s both;
}
@keyframes arcShine {
from { background-position: 110% 110%; }
to { background-position: -40% -40%; }
}
/* arc fade-out before the loop resets */
html body .sky-window .games-arc.is-leaving {
animation: arcOut .5s ease-in both;
}
@keyframes arcOut {
from { opacity: 1; }
to { opacity: 0; filter: blur(3px); }
}
/* part 82 - the idle address bar shows a quiet "search" placeholder,
and no bold is applied while typing */
html body .sky-window .win-address.is-idle {
color: rgba(20, 52, 74, 0.42);
font-weight: 400 !important;
letter-spacing: .04em;
opacity: .75;
font-style: normal;
}
html body .sky-window .win-address.addr-focus {
font-weight: 400 !important;
}
html body .sky-window .win-address {
color: inherit;
transition: color .3s ease, opacity .3s ease;
}
/* part 83 - softer marker + keep the game arc below the toolbar */
html body .sky-window .games-arc {
padding-top: clamp(120px, 16vw, 190px);
min-height: 100%;
box-sizing: border-box;
}
html body .sky-window .games-arc img {
width: clamp(40px, 5.6vw, 76px);
}
html body .sky-window .games-arc img:nth-of-type(3) { margin-top: 0; }
html body .sky-window .games-arc img:nth-of-type(2),
html body .sky-window .games-arc img:nth-of-type(4) { margin-top: clamp(14px, 2vw, 34px); }
html body .sky-window .games-arc img:nth-of-type(1),
html body .sky-window .games-arc img:nth-of-type(5) { margin-top: clamp(30px, 4vw, 66px); }
/* marker: gentler -- thinner paint, lighter yellow, small shadow */
html body .sky-window .srp-mark::before {
top: -1px;
bottom: -2px;
right: -2px;
border-radius: 4px;
transform: skewX(-5deg);
background: linear-gradient(100deg, rgba(255, 238, 118, 0.55) 0%, rgba(255, 228, 66, 0.6) 70%, rgba(255, 218, 40, 0.6) 100%);
box-shadow: 0 1px 8px rgba(255, 226, 70, 0.25);
}
html body .sky-window .srp-mark.is-marked::before {
width: calc(100% + 4px);
}
html body .sky-window .srp-mark::after {
top: -1px;
bottom: -2px;
right: -2px;
width: 14%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
/* part 84 - the five game icons sit exactly ON a real arc: apex in the
middle, both ends dropping symmetrically on the same circle */
html body .sky-window .win-content {
position: relative;
}
html body .sky-window .games-arc {
justify-content: flex-start;
}
html body .sky-window .games-arc img {
position: absolute;
margin-top: 0 !important;
align-self: unset;
width: clamp(44px, 5vw, 64px);
}
html body .sky-window .games-arc img:nth-of-type(1) { left: 5%; top: 150px; }
html body .sky-window .games-arc img:nth-of-type(2) { left: 26%; top: 44px; }
html body .sky-window .games-arc img:nth-of-type(3) {
left: calc(50% - 30px);
top: 18px;
width: clamp(48px, 5.4vw, 70px);
}
html body .sky-window .games-arc img:nth-of-type(4) { left: auto; right: 26%; top: 44px; }
html body .sky-window .games-arc img:nth-of-type(5) { left: auto; right: 5%; top: 150px; }
/* smaller bob so each icon stays attached to its arc point */
html body .sky-window .games-arc img {
animation: arcBob 3.6s ease-in-out infinite;
}
@keyframes arcBob {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-6px) rotate(1deg); }
}
/* part 85 - bigger arc that fills the window, wider spread; the diagonal
light beam becomes a continuous, repeating pass instead of one flash */
html body .sky-window .games-arc img {
width: clamp(64px, 8.5vw, 104px);
}
html body .sky-window .games-arc img:nth-of-type(3) {
width: clamp(72px, 9.5vw, 120px);
}
html body .sky-window .games-arc img:nth-of-type(1) { left: 1%; top: 218px; }
html body .sky-window .games-arc img:nth-of-type(2) { left: 23%; top: 78px; }
html body .sky-window .games-arc img:nth-of-type(3) { left: calc(50% - 50px); top: 26px; }
html body .sky-window .games-arc img:nth-of-type(4) { left: auto; right: 23%; top: 78px; }
html body .sky-window .games-arc img:nth-of-type(5) { left: auto; right: 1%; top: 218px; }
html body .sky-window .games-arc img:nth-of-type(2),
html body .sky-window .games-arc img:nth-of-type(4) { border-radius: 26%; }
html body .sky-window .games-arc .arc-shine {
background-size: 300% 300%;
animation: arcShineLoop 3.4s linear infinite;
animation-delay: .3s;
}
@keyframes arcShineLoop {
0% { background-position: 120% 120%; }
42% { background-position: -60% -60%; opacity: 1; }
62% { background-position: -60% -60%; opacity: 0; }
88% { background-position: 120% 120%; opacity: 0; }
97% { opacity: 1; background-position: 120% 120%; }
100% { opacity: 1; background-position: 120% 120%; }
}
/* part 86 - the white diagonal beam was covering the icons: remove it */
html body .sky-window .games-arc .arc-shine {
display: none !important;
}
/* part 87a - the white cloud-glow behind the window was washing over the
icons: keep a whisper of sky-light instead of a white flood */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
background:
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%) !important;
}
/* part 87b - bigger icons filling the window, less empty space */
html body .sky-window .games-arc img {
width: clamp(78px, 10.5vw, 128px) !important;
}
html body .sky-window .games-arc img:nth-of-type(3) {
width: clamp(88px, 12vw, 150px) !important;
left: calc(50% - 62px) !important;
}
html body .sky-window .games-arc img:nth-of-type(1) { left: 0.5% !important; }
html body .sky-window .games-arc img:nth-of-type(2) { left: 19% !important; }
html body .sky-window .games-arc img:nth-of-type(4) { right: 19% !important; }
html body .sky-window .games-arc img:nth-of-type(5) { right: 0.5% !important; }
/* part 87c - entrance: every icon floats up on its own beat, then keeps bobbing */
html body .sky-window .games-arc img {
opacity: 0;
animation: arcPop .72s cubic-bezier(.2, .85, .3, 1.15) both, arcBob 3.6s ease-in-out infinite both !important;
cursor: pointer;
transition: filter .25s ease, transform .25s ease;
}
html body .sky-window .games-arc img:nth-of-type(1) { animation-delay: .1s, 1.1s !important; }
html body .sky-window .games-arc img:nth-of-type(2) { animation-delay: .28s, 1.35s !important; }
html body .sky-window .games-arc img:nth-of-type(3) { animation-delay: .46s, 1.6s !important; }
html body .sky-window .games-arc img:nth-of-type(4) { animation-delay: .64s, 1.85s !important; }
html body .sky-window .games-arc img:nth-of-type(5) { animation-delay: .82s, 2.1s !important; }
@keyframes arcPop {
from { opacity: 0; transform: translateY(46px) scale(.6); filter: blur(5px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
html body .sky-window .games-arc img:hover {
filter: drop-shadow(0 18px 26px rgba(20, 52, 74, 0.0)) brightness(1.0);
transform: scale(1.08);
}
/* part 87d - trick video modal: mp4 shown like a looping gif in glass */
.trick-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 38, 58, 0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.trick-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.trick-modal .trick-frame {
position: relative;
max-width: min(640px, 92vw);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 20px;
padding: 14px 14px 40px;
box-shadow: 0 30px 80px rgba(10, 40, 64, 0.35);
transform: translateY(24px) scale(.94);
transition: transform .32s cubic-bezier(.2, .8, .3, 1.1);
}
.trick-modal.is-open .trick-frame { transform: none; }
.trick-modal video {
display: block;
width: 100%;
border-radius: 14px;
background: #0b2740;
}
.trick-modal .trick-title {
margin-top: 12px;
text-align: center;
font-size: 17px;
font-weight: 700;
color: #14344a;
}
.trick-modal .trick-close {
position: absolute;
top: -14px;
left: -14px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #14344a;
color: #fff;
font-size: 19px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(10, 40, 64, 0.35);
}
.trick-modal .trick-close:hover { background: #1d4a66; }
/* part 88a - replace the yellow highlighter with an animated underline
that draws itself under the title, in the title's own color */
html body .sky-window .srp-mark {
background-image: none !important;
padding: 0 !important;
margin-inline-start: 0 !important;
position: relative;
}
html body .sky-window .srp-mark::before {
all: unset;
content: "";
position: absolute;
inset: auto 0 -4px 0 !important;
height: 3px !important;
width: 0 !important;
border-radius: 2px !important;
background: currentColor !important;
transform: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
html body .sky-window .srp-mark.is-marked::before {
animation: scribbleLine .65s cubic-bezier(.35,.6,.25,1) .1s forwards !important;
}
html body .sky-window .srp-mark::after,
html body .sky-window .srp-mark.is-marked::after {
display: none !important;
}
@keyframes scribbleLine {
from { width: 0 !important; }
to { width: 100% !important; }
}
/* part 88b - the five games in rows, big, flat: no arc, no shadow */
html body .sky-window .games-arc {
position: static !important;
inset: auto !important;
display: flex !important;
flex-flow: row wrap !important;
align-items: center !important;
justify-content: center !important;
align-content: center !important;
gap: clamp(28px, 4vw, 54px) !important;
padding: 40px 30px 60px !important;
min-height: 100%;
box-sizing: border-box;
}
html body .sky-window .games-arc img {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: clamp(116px, 14.5vw, 178px) !important;
filter: none !important;
border-radius: 22%;
margin: 0 !important;
}
html body .sky-window .games-arc img:nth-of-type(3) {
width: clamp(128px, 16.5vw, 202px) !important;
left: auto !important;
}
html body .sky-window .games-arc img:hover {
transform: translateY(4px) scale(1.05);
filter: brightness(1.05) !important;
}
/* part 89 - the games list lives in the sidebar: one image per row,
like notebook lines under the logo, big and flat */
html body .sky-window .win-sidebar {
display: flex !important;
flex-flow: column nowrap !important;
align-items: stretch !important;
}
html body .sky-window .win-sidebar .games-arc {
position: static !important;
display: flex !important;
flex-flow: column nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: clamp(10px, 1.6vw, 20px) !important;
padding: 6px 14px 18px !important;
margin-top: auto;
flex: 1 1 auto;
min-height: 0;
}
html body .sky-window .win-sidebar .games-arc img {
width: clamp(150px, 62%, 214px) !important;
height: auto;
}
html body .sky-window .win-sidebar .games-arc img:nth-of-type(3) {
width: clamp(162px, 68%, 232px) !important;
}
/* part 90a - remove the remaining pale band: only clean sky gradient */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
background: linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%) !important;
}
/* part 90b - the options tabs and the results stretch across the whole
bottom of the window, no narrow indented column */
html body .sky-window .serp-view {
padding: 22px 24px 26px;
}
html body .sky-window .serp-tabs,
html body .sky-window .serp-results {
width: 100%;
}
html body .sky-window .serp-res {
width: 100%;
}
/* part 91 - remove every sliding white light inside the demo card:
the click-sweep flash and the diagonal beam remnant */
html body .sky-window .glass-wipe {
display: none !important;
animation: none !important;
}
html body .sky-window .arc-shine,
html body .sky-window .games-arc .arc-shine {
display: none !important;
animation: none !important;
}
/* soften the serp entrance too: no more blurred white flash frame */
html body .sky-window .serp-view {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* part 92 - the SERP fills the card bottom to end: results spread over
the remaining height, no empty gap under the last result */
html body .sky-window .serp-view {
height: 100%;
box-sizing: border-box;
}
/* align the results' end with the last sidebar image line: no extra
bottom padding anywhere in the chain */
html body .sky-window .win-content {
padding-bottom: 0;
}
html body .sky-window .serp-view {
padding-bottom: 0;
}
html body .sky-window .serp-results {
flex: 1 1 auto;
padding-bottom: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
gap: clamp(15px, 2.2vw, 30px);
min-height: 180px;
overflow: hidden;
position: relative;
}
/* smooth fade removed per request: the list ends clean */
html body .sky-window .serp-results::after {
display: none !important;
content: none !important;
}
/* the options column never dictates the card height: it is clipped at
the card's own bottom line (set by the sidebar column) */
html body .sky-window .win-body {
height: 0 !important;
min-height: 100% !important;
overflow: hidden;
}
/* the sidebar games list is permanent now, so the card keeps a stable
height through every demo stage */
html body .sky-window .games-arc {
display: flex !important;
}
/* part 93 - the images never fade or leave: fully visible and static at
every demo stage, no entrance/leave animations, no loop hiding */
html body .sky-window .games-arc,
html body .sky-window .games-arc img {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
html body .sky-window .games-arc.is-leaving {
animation: none !important;
opacity: 1 !important;
}
html body .sky-window .win-body {
display: flex;
flex-flow: column nowrap;
}
html body .sky-window .win-content {
flex: 1 1 auto;
min-height: 0;
}
/* part 94 - sidebar game images start gray, wake up to full color when
the mouse passes over them */
html body .sky-window .games-arc img {
filter: grayscale(1) opacity(.75) !important;
transition: filter .45s ease, transform .35s ease;
}
html body .sky-window .games-arc img:hover {
filter: grayscale(0) opacity(1) !important;
transform: scale(1.06) !important;
}
/* part 95 - after the link is clicked: a convincing TopMik tricks page
fills the main area, like a real guide the visitor just opened */
html body .sky-window .tricks-view {
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
gap: 18px;
padding: 22px 24px 12px;
overflow: hidden;
}
html body .sky-window .tks-head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
}
html body .sky-window .tks-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
html body .sky-window .tks-title {
font-family: Heebo, Arial, sans-serif;
font-weight: 700;
font-size: 21px;
color: #14344a;
}
html body .sky-window .tks-sub {
font-size: 13px;
color: rgba(20, 52, 74, 0.55);
}
html body .sky-window .tks-badge {
margin-inline-start: auto;
background: rgba(26, 95, 208, 0.10);
color: #1a5fd0;
font-size: 13px;
font-weight: 700;
border-radius: 999px;
padding: 7px 14px;
}
html body .sky-window .tks-list {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
gap: clamp(14px, 2vw, 24px);
overflow: hidden;
min-height: 0;
}
html body .sky-window .tks-row {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
padding: 12px 18px;
}
html body .sky-window .tks-row img {
width: clamp(64px, 8vw, 86px);
height: auto;
border-radius: 22%;
filter: drop-shadow(0 6px 12px rgba(20, 52, 74, 0.18));
}
html body .sky-window .tks-rt {
font-family: Heebo, Arial, sans-serif;
font-weight: 700;
font-size: 16.5px;
color: #14344a;
}
html body .sky-window .tks-rs {
font-size: 13.5px;
color: rgba(20, 52, 74, 0.6);
margin-top: 3px;
}
html body .sky-window .tks-foot {
text-align: center;
font-size: 13px;
color: rgba(20, 52, 74, 0.5);
padding: 6px 0 2px;
}
/* part 96 - the tricks page now reads like a Wikipedia article: white
paper, serif-safe headings, blue section links, numbered bullets */
/* blended with the glass: no white paper, wiki typography directly on
the blue card background */
html body .sky-window .tricks-view {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .sky-window .tks-head {
display: block;
padding: 18px 26px 10px;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
background: transparent;
}
html body .sky-window .tks-title {
font-family: Georgia, "Times New Roman", Heebo, serif;
font-weight: 400;
font-size: 24px;
color: #14344a;
}
html body .sky-window .tks-crumb {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin-top: 2px;
}
html body .sky-window .tks-badge { display: none !important; }
html body .sky-window .tks-wiki {
padding: 14px 26px 12px;
display: flex;
flex-flow: column nowrap;
gap: 10px;
font-family: Heebo, Arial, sans-serif;
font-size: 14px;
color: #1c3f58;
line-height: 1.65;
overflow: hidden;
flex: 1 1 auto;
min-height: 0;
}
html body .sky-window .tks-intro {
margin: 0;
color: rgba(20, 52, 74, 0.82);
}
html body .sky-window .tks-sec {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 19px;
color: #1a5fd0;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 3px;
margin: 4px 0 2px;
}
html body .sky-window .tks-wiki ul {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .tks-wiki li { color: rgba(20, 52, 74, 0.85); }
html body .sky-window .tks-rule {
border: none;
border-top: 1px solid rgba(20, 52, 74, 0.14);
margin: 4px 0 2px;
}
html body .sky-window .tks-note {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin: 0;
}
html body .sky-window .tks-badge { display: none !important; }
html body .sky-window .tks-wiki {
padding: 14px 26px 12px;
display: flex;
flex-flow: column nowrap;
gap: 10px;
font-family: Heebo, Arial, sans-serif;
font-size: 14px;
color: #1c3f58;
line-height: 1.65;
overflow: hidden;
flex: 1 1 auto;
min-height: 0;
}
html body .sky-window .tks-intro {
margin: 0;
color: rgba(20, 52, 74, 0.82);
}
html body .sky-window .tks-sec {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 19px;
color: #1a5fd0;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 3px;
margin: 4px 0 2px;
}
html body .sky-window .tks-wiki ul {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .tks-wiki li { color: rgba(20, 52, 74, 0.85); }
html body .sky-window .tks-rule {
border: none;
border-top: 1px solid rgba(20, 52, 74, 0.14);
margin: 4px 0 2px;
}
html body .sky-window .tks-note {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin: 0;
}
html body .sky-window .tks-list { display: none !important; }
html body .sky-window .tks-logo { display: none !important; }
html body .sky-window .tks-foot { display: none !important; }
/* part 97 - clicking a sidebar game swaps the wiki into a YouTube-like
watch page with a real player */
html body .sky-window .yt-view {
position: relative;
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
gap: 12px;
padding: 18px 24px 12px;
overflow: hidden;
}
html body .sky-window .yt-close {
position: absolute;
top: 14px;
left: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: #14344a;
color: #fff;
font-size: 16px;
cursor: pointer;
z-index: 5;
}
html body .sky-window .yt-player {
position: relative;
flex: 1 1 auto;
min-height: 220px;
border-radius: 12px;
overflow: hidden;
background: #0f0f0f;
box-shadow: 0 10px 30px rgba(10, 40, 64, 0.30);
}
html body .sky-window .yt-video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
html body .sky-window .yt-body {
display: flex;
flex-flow: column nowrap;
gap: 8px;
}
html body .sky-window .yt-title {
font-family: Heebo, Arial, sans-serif;
font-weight: 700;
font-size: 17px;
color: #14344a;
}
html body .sky-window .yt-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
html body .sky-window .yt-channel {
display: flex;
align-items: center;
gap: 10px;
}
html body .sky-window .yt-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: contain;
background: rgba(255, 255, 255, 0.5);
padding: 3px;
}
html body .sky-window .yt-name {
font-weight: 700;
font-size: 13.5px;
color: #14344a;
}
html body .sky-window .yt-subs {
font-size: 11.5px;
color: rgba(20, 52, 74, 0.55);
}
html body .sky-window .yt-btn {
background: #14344a;
color: #fff;
font-size: 12.5px;
font-weight: 700;
border-radius: 999px;
padding: 6px 14px;
}
html body .sky-window .yt-actions {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.6);
}
html body .sky-window .yt-desc {
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
color: rgba(20, 52, 74, 0.8);
}
html body .sky-window .yt-tag {
font-size: 11.5px;
color: rgba(20, 52, 74, 0.5);
text-align: center;
}
/* part 98 - the per-game wiki page opened by a sidebar game click.
Same blended glass look as the tricks wiki; plus a Wikipedia-style
infobox at the start-in side. */
html body .sky-window .game-wiki {
position: relative;
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
gap: 10px;
padding: 12px 26px 12px;
overflow: hidden;
font-family: Heebo, Arial, sans-serif;
font-size: 14px;
color: #1c3f58;
line-height: 1.65;
}
html body .sky-window .gw-close {
display: none !important;
}
html body .sky-window .gw-crumb {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
}
html body .sky-window .gw-title {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 26px;
color: #14344a;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 4px;
margin: 0;
}
html body .sky-window .gw-infobox {
float: left;
width: 220px;
margin: 2px 0 8px 0;
border: 1px solid rgba(20, 52, 74, 0.22);
border-radius: 4px;
background: rgba(255, 255, 255, 0.28);
font-size: 12.5px;
overflow: hidden;
}
html body .sky-window .gw-infobox-title {
background: rgba(20, 52, 74, 0.10);
font-weight: 700;
text-align: center;
padding: 5px 8px;
border-bottom: 1px solid rgba(20, 52, 74, 0.16);
color: #14344a;
}
html body .sky-window .gw-info {
width: 100%;
border-collapse: collapse;
}
html body .sky-window .gw-info th {
text-align: start;
font-weight: 700;
color: #14344a;
padding: 5px 10px;
vertical-align: top;
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
width: 46%;
}
html body .sky-window .gw-info td {
padding: 5px 8px;
color: rgba(20, 52, 74, 0.85);
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
}
html body .sky-window .gw-infobox tr:last-child th,
html body .sky-window .gw-infobox tr:last-child td {
border-bottom: none;
}
html body .sky-window .gw-about {
margin: 4px 0 0;
color: rgba(20, 52, 74, 0.85);
}
html body .sky-window .gw-h2 {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 20px;
color: #1a5fd0;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 3px;
margin: 6px 0 2px;
}
html body .sky-window .gw-tricks {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .gw-tricks b { color: #14344a; }
html body .sky-window .gw-feats {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .gw-feats li { color: rgba(20, 52, 74, 0.85); }
html body .sky-window .gw-rule {
border: none;
border-top: 1px solid rgba(20, 52, 74, 0.14);
margin: 6px 0 0;
}
html body .sky-window .gw-note {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin: 2px 0 0;
}
/* part 99 - serp inner search bar removed (the title bar already has one);
live transcript card nudged a bit further left */
html body .sky-window .serp-bar { display: none !important; }
html body #live-transcript.xt-card { inset-inline-end: -7vw; }
/* part 100 - idle watermark: while the card body is empty (just before
the demo mouse starts typing) show the Topmik logo large, dimmed and
slightly rotated so it never sits perfectly level */
html body .sky-window .win-idle { position: relative; }
html body .sky-window .idle-logo-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
}
html body .sky-window .idle-logo {
width: clamp(230px, 40%, 420px);
opacity: 0.32;
transform: translateY(-14px) rotate(-15deg);
user-select: none;
}
/* hide the watermark whenever real content is on stage */
html body .sky-window .win-idle:has(.serp-view:not([hidden])) .idle-logo-wrap,
html body .sky-window .win-idle:has(.tricks-view:not([hidden])) .idle-logo-wrap,
html body .sky-window .win-idle:has(.game-wiki:not([hidden])) .idle-logo-wrap {
display: none;
}
/* part 101 - the "׳³ֲ׳³ג„¢׳³ג€׳³ֲ¢ ׳³ג€”׳³ֲ©׳³ג€¢׳³ג€˜" header button is gone. In its place: a small
site icon pinned to the BOTTOM-LEFT corner (cookie-widget style). Clicking
it opens the disclosure card right above the icon, normal: no centering,
no dimmed/blurry backdrop. */
html body .disclose-icon {
position: fixed;
z-index: 90;
left: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.10);
background: #ffffe6;
cursor: pointer;
padding: 0;
box-shadow: 0 8px 26px rgba(20, 60, 84, 0.22);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
html body .disclose-icon img {
width: 38px;
height: 38px;
object-fit: contain;
}
html body .disclose-icon:hover {
transform: scale(1.06);
}
/* the disclosure card itself: cookie position, above the icon, plain */
html body .consent-drawer {
left: 20px;
right: auto;
bottom: 20px;
}
html body .consent-drawer.overlay-mode {
inset: auto;
width: min(360px, calc(100vw - 32px));
display: block;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
}
html body .consent-drawer.overlay-mode .consent-card {
max-width: none;
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
/* part 102 - the consent card must stay INSIDE its 360px cookie drawer
(part 49 made it 520px wide, so it was cut off-screen on the left) */
html body div#consent-drawer .consent-card {
width: 100%;
}
/* part 103 - consent card restyled to match the reference cookie banner:
cream card, small-radius pillish buttons (two ghost + one dark teal),
tiny footer links + a "powered by" line */
html body div#consent-drawer .consent-card {
background: #fdfbef;
border-radius: 12px;
padding: 20px 20px 12px;
}
html body div#consent-drawer .consent-card > strong {
font-size: 16px;
margin-bottom: 10px;
}
html body div#consent-drawer .consent-btn {
border-radius: 6px;
padding: 11px 16px;
font-size: 14px;
}
html body div#consent-drawer .consent-ghost {
background: #f4f2e9;
border: 1px solid #d9d6c8;
color: #191919;
}
html body div#consent-drawer .consent-ghost:hover {
background: #edeae0;
}
html body div#consent-drawer .consent-primary {
background: #0e3a38;
border: 1px solid #0e3a38;
border-radius: 6px;
}
html body div#consent-drawer .consent-primary:hover {
background: #14514f;
}
html body div#consent-drawer .consent-foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
font-size: 12.5px;
color: #6f6c60;
}
html body div#consent-drawer .consent-foot-link {
color: #6f6c60;
text-decoration: none;
}
html body div#consent-drawer .consent-foot-link:hover {
color: #191919;
text-decoration: underline;
}
html body div#consent-drawer .consent-brand {
margin-inline-start: auto;
white-space: nowrap;
font-size: 11.5px;
color: #96948a;
}
/* part 104 - consent card polish to match the reference banner exactly:
no shadow, no black focus ring around the speak icon, card sized like
the reference (~480px) with the three buttons on one row */
html body div#consent-drawer .consent-card {
box-shadow: none !important;
padding: 20px 22px 12px;
}
html body .consent-drawer {
width: min(480px, calc(100vw - 32px));
}
html body div#consent-drawer .consent-buttons {
flex-flow: row nowrap;
align-items: center;
gap: 12px;
}
html body div#consent-drawer .consent-btn {
white-space: nowrap;
padding: 10px 16px;
}
html body div#consent-drawer .consent-speak,
html body div#consent-drawer .consent-speak:hover,
html body div#consent-drawer .consent-speak:focus,
html body div#consent-drawer .consent-speak:focus-visible,
html body div#consent-drawer .consent-speak:active,
html body div#consent-drawer .consent-speak.is-speaking {
outline: none !important;
border-color: rgba(0, 0, 0, 0.12) !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
/* part 105 - during catalog scrolling the consent card fades out and
returns with a fade-in once a different section is on screen */
html body .consent-drawer {
transition: opacity 0.45s ease, transform 0.45s ease;
}
html body .consent-drawer.mm-out {
opacity: 0;
transform: translateY(18px);
pointer-events: none;
}
/* part 106 - the dark "׳³ֲ׳³ֲ׳³ֲ©׳³ֲ¨ ׳³ֲ©׳³ֲ§׳³ֲ¨׳³ֲ׳³ֳ—׳³ג„¢" button is gone. The powered-by text
stays and gets the hand-drawn dashed frame look exactly as sketched */
html body #consent-drawer .consent-brand {
position: absolute;
left: 18px;
bottom: 16px;
max-width: 42%;
border: 1.5px dashed #b9b6a8;
border-radius: 10px;
padding: 7px 11px;
font-size: 10.5px;
color: #8b897d;
background: transparent;
}
/* the speak icon joins the same row as the dashed frame, centered */
html body #consent-drawer .consent-card { position: relative; }
html body #consent-drawer .consent-text { margin-bottom: 58px; }
html body #consent-drawer .consent-speak {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 16px;
margin: 0;
padding: 8px 10px;
}
/* part 107 - consent card gets a very subtle glass blur: the cream tint
stays, but the content behind the card is softly blurred through it
(small backdrop-filter, background slightly translucent) */
html body div#consent-drawer .consent-card {
background: rgba(253, 251, 239, 0.82) !important;
-webkit-backdrop-filter: blur(5px) saturate(1.05) !important;
backdrop-filter: blur(5px) saturate(1.05) !important;
}
@supports not (backdrop-filter: blur(5px)) {
html body #consent-drawer .consent-card {
background: rgba(253, 251, 239, 0.94);
}
}
/* part 108 - sidebar game icons get a "lighting up" hover effect:
a bright glow bloom above the existing color/scale hover */
html body .sky-window .games-arc img {
position: relative;
transition:
filter 0.28s ease,
transform 0.28s ease;
}
/* part 108 - hover keeps only the existing "wake to color" effect from
part 94: no brightness bump and no golden glow (user request) */
html body .sky-window .games-arc img:hover,
html body .sky-window .games-arc img:focus-visible {
filter: grayscale(0) opacity(1) !important;
transform: scale(1.06) !important;
}
/* part 109 - game icons: instead of a brightness bump / golden glow,
a soft WHITE diagonal shine sweeps downward over the hovered image.
Each image is wrapped by JS in .gc-w so the streak can be clipped */
html body .sky-window .games-arc .gc-w {
position: relative;
display: block;
width: fit-content;
align-self: center;
overflow: hidden;
border-radius: 22%;
}
html body .sky-window .games-arc .gc-w img {
display: block;
margin: 0 !important;
}
html body .sky-window .games-arc .gc-w::after {
content: "";
position: absolute;
left: -40%;
top: -150%;
width: 200%;
height: 130%;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 32%,
rgba(255, 255, 255, 0.5) 49%,
rgba(255, 255, 255, 0) 66%);
transform: rotate(14deg);
opacity: 0;
pointer-events: none;
}
html body .sky-window .games-arc .gc-w:hover::after {
animation: gcShineSweep 0.8s ease;
}
@keyframes gcShineSweep {
0% { top: -150%; opacity: 0; }
18% { opacity: 1; }
100% { top: 150%; opacity: 0; }
}
/* part 110 - the white diagonal shine must live INSIDE the game icon
itself, not on a rectangle above it: the streak is masked with the
icon's own transparency (mask-image = the same PNG), so it can never
show outside the picture's pixels */
html body .sky-window .games-arc .gc-w::after {
width: 100%;
height: 170%;
left: 0;
top: -160%;
transform: none;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.55) 49%,
rgba(255, 255, 255, 0) 60%);
-webkit-mask-image: var(--gcimg);
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: var(--gcimg);
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
/* part 111 - showcase section redesign: the two rarity "books" sit as
two separate labeled strips (never merged), and the trade bad-choice
block shows a real mini trade board instead of generic copy */
html body .showcase-copy .duel-score {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: stretch;
margin-top: 18px;
}
html body .showcase-copy .duel {
display: grid;
gap: 4px;
align-content: start;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--line);
}
html body .showcase-copy .duel-official {
background: linear-gradient(180deg, rgba(214, 164, 66, 0.10), rgba(214, 164, 66, 0.03));
border-inline-start: 3px solid #b98a1e;
}
html body .showcase-copy .duel-community {
background: linear-gradient(180deg, rgba(92, 106, 136, 0.09), rgba(92, 106, 136, 0.03));
border-inline-start: 3px solid #5c6a88;
}
html body .showcase-copy .duel-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-3, #6d707c);
}
html body .showcase-copy .duel-official .duel-value { color: #8a6110; }
html body .showcase-copy .duel-community .duel-value { color: #43506b; }
html body .showcase-copy .duel-value {
font-size: 21px;
font-weight: 800;
line-height: 1.1;
}
html body .showcase-copy .duel-expl {
font-size: 12.5px;
line-height: 1.45;
color: var(--text-2, #565a66);
}
html body .showcase-copy .duel-div {
align-self: center;
font-size: 26px;
font-weight: 800;
color: #9aa0ae;
}
@media (max-width: 640px) {
html body .showcase-copy .duel-score { grid-template-columns: 1fr; }
html body .showcase-copy .duel-div { justify-self: center; }
}
/* mini live trade preview inside block 2 */
html body .showcase-copy .trade-preview {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
margin-top: 16px;
}
html body .showcase-copy .tp-side {
display: grid;
gap: 5px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--panel-2, rgba(255,255,255,.55));
}
html body .showcase-copy .tp-tag {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text-3, #6d707c);
}
html body .showcase-copy .tp-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--text-1, #23252d);
}
html body .showcase-copy .tp-item img {
width: 30px;
height: 30px;
object-fit: contain;
padding: 2px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--panel);
}
html body .showcase-copy .tp-rarity {
font-size: 11.5px;
color: var(--text-2, #565a66);
}
html body .showcase-copy .tp-vs {
font-size: 20px;
color: #9aa0ae;
}
html body .showcase-copy .tp-verdict {
margin-top: 10px;
padding: 10px 14px;
border-radius: 12px;
border-inline-start: 3px solid #3d8a4e;
background: rgba(90, 170, 110, 0.10);
font-size: 13px;
font-weight: 600;
color: #2c6237;
}
@media (max-width: 640px) {
html body .showcase-copy .trade-preview { grid-template-columns: 1fr; }
html body .showcase-copy .tp-vs { justify-self: center; }
}
/* part 112 - showcase rebuild: the whole band is filled top-to-bottom
with the site banner image; NO boxed cards inside (no card-on-card),
content sits directly on the artwork with one soft readability veil.
The band stays in normal document flow (its own block, never
floating above neighbors) */
html body #showcase {
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(180deg,
rgba(250, 250, 252, 0.30) 0%,
rgba(250, 250, 252, 0.62) 58%,
rgba(250, 250, 252, 0.94) 100%),
url("images/bg-banner.png") center / cover no-repeat;
}
html body #showcase::before {
display: none;
content: none;
}
html body #showcase .shell {
position: relative;
z-index: 1;
}
/* kill every inner box: the media frames become plain artwork */
html body #showcase .showcase-media {
border: 0;
background: transparent;
box-shadow: none;
min-height: 260px;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs img {
border: 0;
background: transparent;
}
/* duel score: no card boxes anymore - open strips with a colored spine */
html body #showcase .showcase-copy .duel {
border: 0;
border-top: 1px solid rgba(24, 28, 44, 0.14);
border-radius: 0;
background: transparent;
padding: 14px 6px 6px;
margin-bottom: 26px;
}
html body #showcase .showcase-copy .duel-official {
border-top: 3px solid #b98a1e;
border-top-width: 3px;
border-inline-start: 0;
background: transparent;
}
html body #showcase .showcase-copy .duel-community {
border-top: 3px solid #5c6a88;
border-top-width: 3px;
border-inline-start: 0;
background: transparent;
}
html body #showcase .showcase-copy .duel-label { font-size: 12.5px; }
html body #showcase .showcase-copy .duel-value { font-size: 30px; }
html body #showcase .showcase-copy .duel-expl { font-size: 14.5px; line-height: 1.55; color: #353945; }
html body #showcase .showcase-copy .duel-div { font-size: 30px; color: #6f7584; }
html body #showcase .showcase-copy .duel-official .duel-value { color: #7c5709; }
html body #showcase .showcase-copy .duel-community .duel-value { color: #3c4760; }
/* trade preview: no chips - directly on the artwork */
html body #showcase .showcase-copy .tp-side {
border: 0;
border-top: 1px solid rgba(24, 28, 44, 0.14);
border-radius: 0;
background: transparent;
padding: 12px 6px 4px;
}
html body #showcase .showcase-copy .tp-item { font-size: 17px; color: #1e2029; }
html body #showcase .showcase-copy .tp-item img { width: 42px; height: 42px; border: 0; background: transparent; }
html body #showcase .showcase-copy .tp-rarity { font-size: 13.5px; color: #3a3e4a; }
html body #showcase .showcase-copy .tp-verdict {
font-size: 14.5px;
background: rgba(250, 250, 252, 0.72);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
html body #showcase .showcase-copy h3 {
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing: -0.01em;
}
html body #showcase .showcase-copy > p {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6;
color: #2e323e;
max-width: 56ch;
}
/* part 113 - showcase thumbs: bigger legendary items grid, and the
items-count badge gets a real amber background + colored text */
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
html body #showcase .showcase-thumbs img {
height: clamp(150px, 16vw, 220px);
padding: 18px;
border-radius: 18px;
}
html body #showcase .showcase-media.is-grid {
min-height: 0;
padding: 24px;
}
/* the count badge: warm amber fill, dark amber text, larger */
html body #showcase .showcase-media.is-grid .showcase-badge {
background: #f6dd8f;
border: 1px solid #d9ab35;
color: #6a4a08;
font-size: 14px;
font-weight: 800;
padding: 8px 16px;
box-shadow: 0 10px 24px -14px rgba(122, 84, 8, 0.55);
}
/* part 114 - the TEXT side of the showcase blocks (not the images!)
gets one soft glass card, this time in a warm ORANGE tint instead
of the usual pale blue. Applied to the FIRST TWO blocks only */
html body #showcase .showcase-copy {
position: relative;
}
html body #showcase .showcase-block:nth-child(-n+2) .showcase-copy {
background: rgba(252, 196, 88, 0.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: none;
border: 1px solid rgba(252, 196, 88, 0.3);
border-radius: 16px;
padding: clamp(22px, 3vw, 38px);
}
html body #showcase .showcase-block:nth-child(3) .showcase-copy,
html body #showcase .showcase-block:last-child .showcase-copy {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
box-shadow: none;
padding: 0;
}
/* inside the warm card the open strips read better on cream - give
them back their spine separation without recreating boxes */
html body #showcase .showcase-copy .duel {
border-top: 3px solid #b98a1e;
padding: 14px 10px 6px;
}
html body #showcase .showcase-copy .duel-community {
border-top-color: #5c6a88;
}
html body #showcase .showcase-copy .tp-verdict {
background: rgba(255, 250, 242, 0.85);
}
/* part 116 - mobile accessibility (Samsung S22 and friends): the
consent card must never overflow a 360px-wide screen */
html body #consent-drawer {
width: min(480px, calc(100vw - 32px)) !important;
max-width: none !important;
left: 16px !important;
bottom: 16px !important;
}
html body #consent-drawer .consent-brand {
max-width: 48%;
}
/* part 117 - break the showcase band OUT of the narrow rails column:
the artwork must fill the whole viewport width edge-to-edge (no more
white paper margins on both sides), while the shell content stays
centered and readable in the middle */
html body section#showcase {
box-sizing: border-box;
padding-block: clamp(30px, 4vw, 60px);
}
html body section#showcase .shell {
max-width: 1060px;
margin-inline: auto !important;
}
/* safety: a scrollbar must not create sideways scrolling */
html body {
overflow-x: clip;
}
/* part 118 - trade preview as a real checker interface:
hierarchy = kicker line > two item cards > value swap > verdict > one button */
html body .tp-kicker {
margin: 0 0 4px;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted, #5b6b7c);
}
html body .trade-preview .tp-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
html body .trade-preview .tp-card img {
width: 120px;
height: 120px;
object-fit: contain;
display: block;
}
html body .trade-preview .tp-card strong {
font-size: 17px;
line-height: 1.25;
}
html body .trade-preview .tp-rarity {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
}
html body .tp-dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
html body .tp-dot-amber { background: #b98a1e; }
html body .tp-dot-blue { background: #3e6bd6; }
html body .trade-preview .tp-note {
font-size: 12px;
color: var(--muted, #5b6b7c);
}
html body .trade-preview .tp-middle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
html body .trade-preview .tp-vs {
font-size: 26px;
line-height: 1;
}
html body .trade-preview .tp-gap {
font-family: var(--mono, monospace);
font-size: 13px;
color: var(--muted, #5b6b7c);
white-space: nowrap;
}
html body .tp-verdict {
display: flex;
flex-direction: column;
gap: 3px;
}
html body .tp-verdict strong {
font-size: 17px;
}
html body .tp-verdict > span {
font-size: 13px;
}
html body .tp-verdict small {
font-family: var(--mono, monospace);
font-size: 12px;
color: var(--muted, #5b6b7c);
}
/* mobile: keep the checker readable on the S22 width */
@media (max-width: 640px) {
html body .trade-preview .tp-card img {
width: 88px;
height: 88px;
}
}
/* part 119 - checker concept, pure data: side >= side, value >= value,
balance meter, big verdict. no explanatory text at all */
html body .showcase-checker .showcase-copy {
max-width: 620px;
margin-inline: auto;
}
html body .trade-preview .tp-head {
display: block;
text-align: center;
font-size: 13px;
letter-spacing: 0.08em;
color: var(--muted, #5b6b7c);
margin-bottom: 14px;
}
html body .trade-preview .tp-cols {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: start;
}
html body .trade-preview .tp-card {
border: 1px solid var(--line, rgba(20, 52, 74, .15));
border-radius: 16px;
padding: 14px 12px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
}
html body .trade-preview .tp-card img {
width: 92px;
height: 92px;
object-fit: contain;
display: block;
}
html body .trade-preview .tp-card strong {
font-size: 15px;
line-height: 1.3;
text-align: center;
}
html body .trade-preview .tp-val {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
margin-top: 8px;
}
html body .trade-preview .tp-val b {
font-family: var(--mono, monospace);
font-size: 20px;
font-weight: 600;
}
html body .trade-preview .tp-val em {
font-style: normal;
color: var(--muted, #5b6b7c);
}
/* balance meter: a thin track with a pin sitting on the "-" mark */
html body .trade-preview .tp-meter {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 18px;
}
html body .trade-preview .tp-track {
position: relative;
width: min(380px, 100%);
height: 6px;
border-radius: 999px;
background: var(--line-soft, rgba(20, 52, 74, .12));
}
html body .trade-preview .tp-track::before {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
inset-inline-start: 50%;
width: 1px;
background: var(--line, rgba(20, 52, 74, .25));
}
html body .trade-preview .tp-pin {
position: absolute;
top: 50%;
inset-inline-start: 62%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #d9a12b;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(20, 52, 74, .25);
transform: translate(-50%, -50%);
}
html[data-dir="rtl"] .trade-preview .tp-pin,
[dir="rtl"] .trade-preview .tp-pin {
transform: translate(50%, -50%);
}
html body .trade-preview .tp-gap {
font-family: var(--mono, monospace);
font-size: 13px;
color: #a3520f;
}
/* the result is the loudest thing on the card */
html body .trade-preview .tp-verdict {
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 10px;
}
html body .trade-preview .tp-verdict strong {
font-size: 26px;
letter-spacing: -0.01em;
}
html body .trade-preview .tp-verdict > span {
font-size: 14px;
color: var(--muted, #5b6b7c);
}
html body .showcase-checker [data-open-trade] {
display: block;
margin: 16px auto 0;
}
/* mobile: single column, meter stays centered */
@media (max-width: 640px) {
html body .trade-preview .tp-cols {
grid-template-columns: 1fr;
justify-items: center;
}
html body .trade-preview .tp-vs {
order: 5;
}
html body .trade-preview .tp-card {
max-width: 240px;
}
}
/* part 120 - the checker block is a standalone full-width interface,
NOT half of a media+copy grid (later rules force 2 columns on every
.showcase-block, we un-grid this one explicitly) */
html body .showcase-block.showcase-checker {
display: flex;
justify-content: center;
grid-template-columns: none;
gap: 0;
padding-block: clamp(30px, 4vw, 56px);
}
html body .showcase-checker .showcase-copy {
max-width: 620px;
width: 100%;
margin-inline: 0 !important;
box-sizing: border-box;
}
html body .showcase-checker .trade-preview {
width: 100%;
}
/* the verdict must never wrap letter by letter */
html body .showcase-checker .tp-verdict strong {
font-size: 24px;
white-space: nowrap;
}
html body .showcase-checker .tp-verdict > span {
white-space: nowrap;
}
/* meter sits centered under the two sides, not squeezed in a corner */
html body .showcase-checker .tp-meter {
width: 100%;
padding-inline: 12px;
}
html body .showcase-checker .tp-track {
width: 100%;
}
/* part 121 - neutralize legacy trade-preview chrome inside the new
checker: container is a plain block (the inner .tp-cols owns the
columns), sides are unboxed, verdict loses its old green box */
html body .showcase-checker .trade-preview {
display: block;
grid-template-columns: none;
gap: 0;
margin-top: 0;
}
html body .showcase-checker .trade-preview .tp-side {
border: 0;
background: none;
padding: 0;
gap: 8px;
}
html body .showcase-checker .trade-preview .tp-tag {
font-size: 12px;
color: var(--muted, #5b6b7c);
}
html body .showcase-checker .trade-preview .tp-verdict {
background: none;
border: 0;
padding: 0;
margin-top: 14px;
color: inherit;
font-weight: 400;
}
html body .showcase-checker .trade-preview .tp-verdict strong {
color: var(--text, #14252f);
}
html body .showcase-checker .trade-preview .tp-vers {
display: none;
}
/* part 122 - legacy rules carry the #showcase id (higher specificity),
so these overrides match that same specificity and come later */
html body #showcase .showcase-checker .tp-verdict {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
padding: 0;
font-size: inherit;
}
html body #showcase .showcase-checker .tp-side {
border: 0;
border-top: 0;
background: none;
padding: 0;
border-radius: 0;
}
/* part 123 - no card at all: just two big items, the more valuable one
breathing in color, the less valuable one graying out */
html body #showcase .showcase-checker .showcase-copy {
background: none !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
}
html body #showcase .showcase-checker .showcase-copy,
html body #showcase .showcase-checker .showcase-copy::before,
html body #showcase .showcase-checker .showcase-copy::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html body .showcase-checker .trade-preview .tp-head {
display: none;
}
/* items lose their inner boxes - the item IS the visual */
html body .showcase-checker .trade-preview .tp-card {
border: 0;
background: none;
border-radius: 0;
padding: 0;
}
html body .showcase-checker .trade-preview .tp-card img {
width: 150px;
height: 150px;
margin-inline: auto;
display: block;
}
/* the side that is worth more: living color with a subtle breathing glow */
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
filter: saturate(1.15);
will-change: filter, transform;
}
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
animation: tpLive 3.4s ease-in-out infinite;
}
@keyframes tpLive {
0%, 100% {
filter: saturate(1.12);
transform: scale(1);
}
50% {
filter: saturate(1.35) drop-shadow(0 8px 20px rgba(61, 138, 78, 0.30));
transform: scale(1.035);
}
}
@media (prefers-reduced-motion: reduce) {
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
animation: none;
filter: saturate(1.2);
}
}
/* the side that is worth less: gray, still */
html body .showcase-checker .tp-side:nth-child(3) .tp-card img {
filter: grayscale(1) opacity(0.75);
}
/* the numbers tell the same story */
html body .showcase-checker .tp-side:nth-child(1) .tp-val b { color: #2c6237; }
html body .showcase-checker .tp-side:nth-child(3) .tp-val b { color: #9aa0ae; }
html body .showcase-checker .tp-side:nth-child(3) .tp-val em { color: #9aa0ae; }
html body .showcase-checker .tp-side:nth-child(3) .tp-val .tp-dot-amber { background: #b9bcc4; }
/* part 124 - remove what was crossed out in red: side labels, swap
arrow, balance meter and verdict. only items + the one button live */
html body .showcase-checker .trade-preview .tp-tag,
html body .showcase-checker .trade-preview .tp-vs,
html body .showcase-checker .trade-preview .tp-meter,
html body .showcase-checker .trade-preview .tp-verdict {
display: none !important;
}
html body .showcase-checker .trade-preview .tp-cols {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* part 125 - designed value badge under each item */
html body .showcase-checker .trade-preview .tp-side {
justify-items: center;
text-align: center;
}
html body .showcase-checker .trade-preview .tp-val {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 13px;
}
html body .showcase-checker .trade-preview .tp-val b {
font-family: var(--mono, monospace);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
}
html body .showcase-checker .trade-preview .tp-val em {
font-style: normal;
font-size: 13px;
order: 2;
}
html body .showcase-checker .trade-preview .tp-val .tp-dot {
order: 3;
}
html body .showcase-checker .tp-side:nth-child(3) .tp-val .tp-dot {
order: 1;
}
/* worth more: alive */
html body .showcase-checker .tp-side:nth-child(1) .tp-val {
background: rgba(61, 138, 78, 0.10);
border-color: rgba(61, 138, 78, 0.30);
}
html body .showcase-checker .tp-side:nth-child(1) .tp-val b {
color: #2c6237;
}
html body .showcase-checker .tp-side:nth-child(1) .tp-val em {
color: #2c6237;
}
/* worth less: quiet gray */
html body .showcase-checker .tp-side:nth-child(3) .tp-val {
background: rgba(120, 128, 140, 0.10);
border-color: rgba(120, 128, 140, 0.22);
}
html body .showcase-checker .tp-side:nth-child(3) .tp-val b {
color: #8d93a0;
}
html body .showcase-checker .tp-side:nth-child(3) .tp-val em {
color: #8d93a0;
}
/* part 126 - crossed out: both value pills, and the hairline separators
above/below the checker block. items go bigger */
html body .showcase-checker .trade-preview .tp-val {
display: none !important;
}
html body #showcase .showcase-block.showcase-checker {
border-top: 0;
}
html body #showcase .showcase-block.showcase-checker + .showcase-block,
html body #showcase .showcase-block.showcase-checker {
border-top: 0;
padding-block: clamp(26px, 3vw, 44px);
}
/* bigger items */
html body .showcase-checker .trade-preview .tp-card img {
width: 185px;
height: 185px;
}
/* the name sits a bit tighter under the bigger art */
html body .showcase-checker .trade-preview .tp-card strong {
font-size: 16px;
}
/* mobile: smaller but still large */
@media (max-width: 640px) {
html body .showcase-checker .trade-preview .tp-card img {
width: 130px;
height: 130px;
}
}
/* part 127 - live comparison: cards fade between rotating pairs;
both items breathe, the rare one breathes in color, the common in gray */
html body .showcase-checker .trade-preview .tp-card {
transition: opacity 0.35s ease, transform 0.35s ease;
}
html body .showcase-checker .trade-preview .tp-card.is-fading {
opacity: 0;
transform: scale(0.97);
}
html body .showcase-checker .trade-preview .tp-card img {
transition: none;
}
/* living color breath = already tpLive (part 123); add matching gray breath */
@keyframes tpLiveGray {
0%, 100% { transform: scale(1); opacity: 0.72; }
50% { transform: scale(1.025); opacity: 0.8; }
}
html body .showcase-checker .tp-side:nth-child(3) .tp-card img {
animation: tpLiveGray 3.4s ease-in-out infinite;
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
html body .showcase-checker .tp-side:nth-child(3) .tp-card img {
animation: none;
}
}
/* part 128 - micro breath, no shadow, names never collide */
html body .showcase-checker .trade-preview .tp-cols {
gap: clamp(36px, 6vw, 72px);
}
@keyframes tpLive {
0%, 100% { transform: scale(1); filter: saturate(1.05); }
50% { transform: scale(1.012); filter: saturate(1.18); }
}
@keyframes tpLiveGray {
0%, 100% { transform: scale(1); opacity: 0.72; }
50% { transform: scale(1.008); opacity: 0.78; }
}
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
filter: saturate(1.05) !important;
}
/* keep names a single line with a little air under the art */
html body .showcase-checker .trade-preview .tp-card strong {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
html body .showcase-checker .trade-preview .tp-card strong {
font-size: 15px;
}
/* part 129 - block 1: same item speaks twice, with color instead of text.
gold copy = official legendary, gray copy = community common */
html body #showcase .showcase-media.is-duel {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(20px, 4vw, 44px);
min-height: 0;
}
html body #showcase .showcase-media.is-duel .showcase-badge {
display: none;
}
html body .showcase-media.is-duel .duel-ghost {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
html body .showcase-media.is-duel .duel-ghost img {
width: 130px;
height: 130px;
object-fit: contain;
display: block;
}
/* official: full color with a warm gold presence */
html body .showcase-media.is-duel .is-gold img {
filter: saturate(1.12) drop-shadow(0 10px 18px rgba(185, 138, 30, 0.25));
}
/* community: the same item, grayed */
html body .showcase-media.is-duel .is-slate img {
filter: grayscale(1) opacity(0.7);
}
html body .duel-chip {
font-size: 12.5px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
html body .duel-chip-gold {
background: rgba(185, 138, 30, 0.14);
border-color: rgba(185, 138, 30, 0.35);
color: #7a5a12;
}
html body .duel-chip-slate {
background: rgba(92, 106, 136, 0.14);
border-color: rgba(92, 106, 136, 0.30);
color: #5c6a88;
}
html body .showcase-media.is-duel .duel-div {
font-size: 30px;
font-weight: 700;
color: var(--text-3, #6d707c);
}
@media (max-width: 640px) {
html body .showcase-media.is-duel .duel-ghost img {
width: 96px;
height: 96px;
}
}
/* part 130 - the != mark becomes a designed badge: half gold (official),
half slate (community), tied to both item copies by a hairline */
html body .showcase-media.is-duel .duel-div {
position: relative;
width: 52px;
height: 52px;
font-size: 0;
flex-shrink: 0;
}
html body .showcase-media.is-duel .duel-div::before {
content: "\2260";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: #ffffff;
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #b98a1e 0%, #b98a1e 50%, #5c6a88 50%, #5c6a88 100%);
box-shadow: 0 6px 14px rgba(20, 52, 74, 0.18), inset 0 0 0 2px #ffffff;
}
/* the hairline that ties the badge to both copies - one story, two books */
html body .showcase-media.is-duel .duel-div::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: clamp(16px, 3vw, 34px);
height: 2px;
background: linear-gradient(to left, rgba(185, 138, 30, 0.8), rgba(185, 138, 30, 0));
}
html body .showcase-media.is-duel .duel-ghost.is-slate {
position: relative;
}
html body .showcase-media.is-duel .duel-ghost.is-slate::before {
content: "";
position: absolute;
top: 65px; /* center of the item art */
left: clamp(-40px, -4vw, -18px);
width: clamp(14px, 3vw, 32px);
height: 2px;
background: linear-gradient(to right, rgba(92, 106, 136, 0.8), rgba(92, 106, 136, 0));
}
/* part 131 - block 1 trimmed: no title card, no gray copy; badge and
both chips go small; block centers its single media */
html body .showcase-block:has(.is-duel) {
display: flex;
justify-content: center;
grid-template-columns: none;
gap: 0;
}
html body #showcase .showcase-media.is-duel {
max-width: none;
width: auto;
}
html body .showcase-media.is-duel .duel-chip {
font-size: 11px;
padding: 4px 10px;
font-weight: 600;
}
html body .showcase-media.is-duel .duel-div {
width: 34px !important;
height: 34px !important;
font-size: 0;
}
html body .showcase-media.is-duel .duel-div::before {
font-size: 16px;
width: 34px;
height: 34px;
inset: 0;
box-shadow: 0 4px 10px rgba(20, 52, 74, 0.16), inset 0 0 0 1.5px #fff;
}
/* connectors off - the trio sits tight */
html body .showcase-media.is-duel .duel-div::after,
html body .showcase-media.is-duel .duel-ghost.is-slate::before {
content: none;
}
/* the slate chip stands alone under nothing - keep it aligned with the badge */
html body .showcase-media.is-duel .duel-chip.duel-chip-slate {
align-self: center;
}
html body .showcase-media.is-duel .duel-ghost.is-gold img {
width: 130px;
height: 130px;
}
/* part 132 - one composed section: the two comparison demos side by
side, everything tightened vertically (no stacked full-height rows) */
html body .showcase-pair {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(18px, 3vw, 44px);
align-items: center;
padding-block: clamp(6px, 1vw, 14px);
}
html body .showcase-pair .showcase-block {
padding-block: 0 !important;
border-top: 0 !important;
display: flex !important;
justify-content: center;
grid-template-columns: none !important;
}
html body #showcase .showcase-block {
padding-block: clamp(12px, 2vw, 24px);
border-top: 0;
}
@media (max-width: 900px) {
html body .showcase-pair {
grid-template-columns: minmax(0, 1fr);
}
}
/* part 133 - the light background must always reach both screen edges
(CSS-only fallback: even if JS is off, the band spans the viewport) */
html body section#showcase {
width: 100vw;
}
/* checker moves to the left station (the marked dot on the Y axis)
and gets a slight size bump */
html body .showcase-pair {
grid-template-columns: 1fr;
justify-items: end; /* RTL: end = left side */
max-width: 1072px;
margin-inline: auto;
padding-inline: clamp(12px, 3vw, 40px);
box-sizing: border-box;
}
html body .showcase-checker .showcase-copy {
max-width: 680px !important;
}
html body .showcase-checker .trade-preview .tp-card img {
width: 165px;
height: 165px;
}
@media (max-width: 640px) {
html body .showcase-checker .trade-preview .tp-card img {
width: 130px;
height: 130px;
}
}
/* part 134 - sides clean: no vertical hairlines on the showcase band;
the band now sits outside the clipping rails so its artwork can
genuinely reach the screen edges */
html body #showcase .shell {
border-inline: 0 !important;
}
html body #showcase {
border-inline: 0 !important;
}
/* part 135 - the checker CTA: wider reach, clean hairline outline */
html body .showcase-checker [data-open-trade] {
min-width: 230px;
padding-inline: 34px;
background: none;
border: 1px dashed rgba(20, 52, 74, 0.45);
box-shadow: none;
color: #2c3a46;
}
/* part 136 - rotation must never move layout: fixed card box, name on
a single locked line (long names get ellipsis, never a second row) */
html body .showcase-checker .tp-card {
box-sizing: border-box;
width: 165px;
}
html body .showcase-checker .tp-card strong {
display: block;
max-width: 165px;
line-height: 20px;
height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* part 137 - the checker CTA leaves its old spot under the items and
takes the open station beside them (the marked rectangle), RTL:
row-reverse keeps the items at the left and pushes the button right */
html body .showcase-checker .showcase-copy {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: clamp(28px, 6vw, 90px);
justify-content: center;
}
/* part 138 - no separator edges between showcase and its neighbors:
the band flows straight into the sky above and the catalog below */
html body #showcase {
border-block: 0 !important;
}
/* part 140 - mobile S (320px): the checker stacks (items on top, button
below), cards shrink fluidly to half the viewport, thumbs shrink */
@media (max-width: 640px) {
html body #showcase .shell {
padding-inline: clamp(10px, 4vw, 20px);
}
html body .showcase-pair {
justify-items: center;
padding-inline: 0;
max-width: none;
}
html body .showcase-checker .showcase-copy {
flex-direction: column;
gap: 16px;
padding-inline: 12px;
box-sizing: border-box;
}
html body .showcase-checker .tp-cols {
gap: 12px;
}
html body .showcase-checker .tp-card {
width: min(140px, calc((100vw - 104px) / 2)) !important;
}
html body .showcase-checker .tp-card img {
width: 100% !important;
height: auto;
aspect-ratio: 1;
}
html body .showcase-checker .tp-card strong {
max-width: 100%;
}
html body .showcase-checker [data-open-trade] {
min-width: 0;
width: min(230px, calc(100vw - 96px));
padding-inline: 18px;
}
html body #showcase #showcase .showcase-block .showcase-media.is-grid img {
width: clamp(96px, 28vw, 130px) !important;
height: auto;
aspect-ratio: 1;
}
}
/* part 141 - the island map is the backdrop of the showcase band itself
(where the artwork/white used to be) */
html body #showcase {
background-image: url("images/island-map.png") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* part 142 - the map band reaches into the white corner notches that
the catalog's 140px rounding leaves: map patches sit behind the
catalog exactly in its rounded corners, continuing the band */
html body #showcase {
position: relative;
isolation: isolate;
}
html body #showcase::before,
html body #showcase::after {
content: "";
position: absolute;
bottom: -141px;
width: min(360px, 40vw);
height: 141px;
z-index: -1;
background-image: url("images/island-map.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html body #showcase::before { right: 0; }
html body #showcase::after { left: 0; }
/* part 143 - sky's 28px bottom rounding also leaves white notches:
masked map patches fill exactly the curve's missing quarter while the
band itself goes viewport-locked so every patch stays seamless */
html body #showcase {
background-attachment: fixed !important;
}
html body .sky-frame .sky-canvas {
position: relative;
}
html body .sky-frame .sky-canvas::before,
html body .sky-frame .sky-canvas::after {
content: "";
position: absolute;
bottom: 0;
width: 28px;
height: 28px;
background-image: url("images/island-map.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html body .sky-frame .sky-canvas::before {
right: 0;
-webkit-mask-image: radial-gradient(circle 28.5px at 0 0, transparent 27.5px, #000 28.5px);
mask-image: radial-gradient(circle 28.5px at 0 0, transparent 27.5px, #000 28.5px);
}
html body .sky-frame .sky-canvas::after {
left: 0;
-webkit-mask-image: radial-gradient(circle 28.5px at 100% 0, transparent 27.5px, #000 28.5px);
mask-image: radial-gradient(circle 28.5px at 100% 0, transparent 27.5px, #000 28.5px);
}
/* part 144 - the blue quote card's 96px top rounding leaves white
quarters below the map band: masked map patches fill exactly those
curve notches, viewport-locked to continue the band seamlessly */
html body .blue-quote {
position: relative;
}
html body .blue-quote::before,
html body .blue-quote::after {
content: "";
position: absolute;
top: 0;
width: 97px;
height: 97px;
background-image: url("images/island-map.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html body .blue-quote::before {
right: 0;
-webkit-mask-image: radial-gradient(circle 97px at 100% 0, transparent 96px, #000 97px);
mask-image: radial-gradient(circle 97px at 100% 0, transparent 96px, #000 97px);
}
html body .blue-quote::after {
left: 0;
-webkit-mask-image: radial-gradient(circle 97px at 0 0, transparent 96px, #000 97px);
mask-image: radial-gradient(circle 97px at 0 0, transparent 96px, #000 97px);
}
/* part 145 - the band returns to a flat navy #172B4D: the island map
and every masked patch it spawned are gone, and the section texts
flip to light tones so they read on the dark ground */
html body #showcase {
background: transparent !important;
}
html body #showcase::before,
html body #showcase::after {
content: none !important;
}
html body .sky-frame .sky-canvas::before,
html body .sky-frame .sky-canvas::after {
content: none !important;
}
html body .blue-quote::before,
html body .blue-quote::after {
content: none !important;
}
html body #showcase h1,
html body #showcase h2,
html body #showcase h3 {
color: #eaf1fb !important;
}
html body #showcase p {
color: #b9c8dd !important;
}
html body .showcase-checker .tp-card strong {
color: #dfe9f6 !important;
}
html body .showcase-checker [data-open-trade] {
border-color: rgba(255, 255, 255, 0.42) !important;
color: #eef4fc !important;
}
html body #showcase .button-ghost {
border-color: rgba(255, 255, 255, 0.42) !important;
color: #eef4fc !important;
}
/* part 147 - navy sweeps need light ink: every light-theme text token
flips so the site reads on #172B4D ground */
[data-theme="light"] {
--text: #eaf1fb;
--text-2: #c7d5e9;
--muted: #9db3d2;
--muted-2: #8aa3c4;
--line: rgba(255, 255, 255, 0.14);
--line-strong: rgba(255, 255, 255, 0.24);
}
html body {
background-color: #172B4d;
background-image: url("images/hero-bg-radial.png") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}
/* part 148 - hero sits on the light sky: its ink returns to deep navy
(the earlier light flip wrongly assumed a night ground there);
header nav on the sky likewise stays dark, only the navy tail bands
keep light ink */
html body header.site-header a {
color: #2c4a5e !important;
}
html body .hero-lead,
html body .hero-lead strong {
color: #14344a !important;
}
html body .accent-text {
color: #14344a !important;
}
html body .xt-text {
color: #14344a !important;
}
html body .hero-stats dt {
color: #33566c !important;
}
html body .hero-stats dd,
html body .hero-stats .mono {
color: #14344a !important;
}
html body .site-rails.is-tail h2 {
color: #eaf1fb !important;
}
html body .site-rails.is-tail .section-lead {
color: #9db3d2 !important;
}
/* part 149 - the trade board + the CTA band below get a native navy
design instead of paper cards washed in on the night ground */
html body #trade {
background: transparent !important;
color: #eaf1fb;
}
html body #trade .section-head h2,
html body #trade .section-head h3 {
color: #eaf1fb !important;
}
html body #trade .section-head p,
html body #trade .section-lead {
color: #9db3d2 !important;
}
html body #trade #trade-board {
border-color: rgba(255, 255, 255, 0.1) !important;
color: #eaf1fb !important;
box-shadow: none !important;
}
html body #trade-board .trade-column {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
html body #trade-board .search-field-small,
html body #trade-board .verdict.verdict-inner {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
html body #trade-board .search-field-small input,
html body #trade-board .verdict-copy strong,
html body #trade-board .trade-column strong {
color: #eaf1fb !important;
}
html body #trade-board .search-field-small input::placeholder,
html body #trade-board .search-field-small .icon {
color: #8aa3c4 !important;
}
html body #trade-board .verdict-copy p,
html body #trade-board .trade-column p {
color: #9db3d2 !important;
}
html body section#start,
html body section.band-start {
background: transparent !important;
}
html body section#start h2,
html body section#start h3,
html body section#start p {
color: #eaf1fb !important;
}
html body section#start .section-lead,
html body section#start p.muted,
html body section#start small {
color: #9db3d2 !important;
}
/* part 150 - the radial background's recipe, applied site-wide:
(1) one huge soft glow of the section's own hue, slightly brighter,
off-center; (2) a bottom/edge darkening so content sits in depth;
light zones (sky) get a lighter-glow + gentle navy falloff, dark
zones get a violet glow + deeper falloff. New layers only - each
section keeps its own base color. */
html body #showcase,
html body #trade,
html body #start,
html body #catalog {
background-image:
linear-gradient(180deg, rgba(4, 6, 14, 0) 55%, rgba(4, 6, 14, 0.42) 100%),
radial-gradient(120% 90% at 72% 46%, rgba(98, 78, 214, 0.20) 0%, rgba(98, 78, 214, 0) 62%) !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
html body .sky-frame .sky-canvas {
background-image:
linear-gradient(180deg, rgba(16, 26, 42, 0) 62%, rgba(16, 26, 42, 0.30) 100%),
radial-gradient(110% 80% at 68% 40%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%) !important;
}
/* part 151 - retire the old island-map corner patches behind the blue
quote card: the page artwork fills those notches now */
html body .blue-quote::before,
html body .blue-quote::after {
content: none !important;
}
/* part 152 - the blue quote keeps its 96px top rounding; the two notch
squares behind those corners are now filled with the page artwork
itself (same fixed/cover/center anchors as the body), painted at the
band level so the card's blue is drawn over them and only the notch
shows the continuing ground */
html body .band-tint:has(.blue-quote),
html body .site-rails .band-tint:has(.blue-quote) {
position: relative;
}
html body .band-tint:has(.blue-quote)::before,
html body .band-tint:has(.blue-quote)::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
width: 96px !important;
height: 96px !important;
z-index: -1 !important;
background: url("images/hero-bg-radial.png") !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
transform: none !important;
}
html body .band-tint:has(.blue-quote)::after {
inset-inline-start: 0 !important;
}
html body .band-tint:has(.blue-quote)::before {
inset-inline-end: 0 !important;
}
/* part 153 - item modal slimmed to what users actually open it for:
a big central item picture plus the two rarity verdicts below it */
html body .modal-hero {
display: block !important;
text-align: center !important;
margin-top: 20px !important;
padding: 22px !important;
border: 0 !important;
border-radius: 20px !important;
background: rgba(0, 0, 0, 0.22) !important;
}
html body .modal-hero .modal-gem {
width: min(64vw, 300px) !important;
height: min(64vw, 300px) !important;
margin: 0 auto !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 22px !important;
background: transparent !important;
}
html body .modal-hero .modal-gem svg {
width: 46% !important;
height: 46% !important;
}
html body .modal-rarity-split {
max-width: 560px !important;
margin: 22px auto 0 !important;
}
/* part 154 - modal typography: big, heavy, crisp. solid offset shadows
(zero blur) instead of soft glows so every word stays razor sharp */
html body .item-modal .modal-title {
font-size: clamp(28px, 4.2vw, 40px) !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: 0.2px !important;
text-shadow:
0 2px 0 #07102254,
2px 0 0 #07101f,
0 3px 22px rgba(0, 0, 0, 0.55) !important;
}
html body .item-modal .modal-subtitle {
color: #a9bad1 !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
}
html body .item-modal .modal-eyebrow {
margin-bottom: 8px !important;
}
html body .item-modal .modal-eyebrow .badge {
font-weight: 800 !important;
letter-spacing: 0.4px !important;
box-shadow: 0 1px 0 #07101f !important;
}
html body .item-modal .modal-eyebrow .item-id {
color: #cbd8ea !important;
font-weight: 700 !important;
}
html body .item-modal .modal-rarity-col {
border-width: 1.5px !important;
}
html body .item-modal .modal-rarity-col .micro-label {
color: #9fb2cb !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
}
html body .item-modal .modal-rarity-col strong {
font-size: 22px !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: 0.3px !important;
text-shadow:
2px 0 0 #0a1226,
0 2px 0 #0a1226 !important;
}
html body .item-modal .modal-rarity-col .rarity-scale {
font-size: 14px !important;
font-weight: 800 !important;
color: #d9e3f2 !important;
}
/* part 155 - catalog card flips on hover: front stays the item as it is
today, back face carries the game rarity readout plus the two
add-to-side buttons. 3D turn, both faces backface-hidden, back faces
are inert and invisible until hover/focus-within so nothing steals
clicks or tab stops while face-down */
html body .item-card {
position: relative !important;
perspective: 1100px !important;
}
html body .item-card .item-card-main {
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
transform-origin: center !important;
transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.24, 1) !important;
}
html body .item-card-back {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-align: center !important;
border-radius: inherit !important;
background: rgba(9, 16, 34, 0.94) !important;
border: 1px solid var(--rarity-line, rgba(255, 255, 255, 0.14)) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
transform: rotateY(180deg) !important;
visibility: hidden !important;
pointer-events: none !important;
padding: 16px 14px !important;
}
html body .item-card-back .micro-label {
color: #9fb2cb !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
font-size: 11px !important;
}
html body .item-card-back .back-rarity {
font-size: 20px !important;
font-weight: 900 !important;
color: #ffffff !important;
text-shadow: 2px 0 0 #0a1226, 0 2px 0 #0a1226 !important;
}
html body .item-card-back .back-scale {
font-size: 13px !important;
font-weight: 800 !important;
color: #d9e3f2 !important;
}
html body .item-card-back .back-community {
margin-top: 2px !important;
font-size: 11.5px !important;
}
html body .item-card-back .item-card-actions {
width: 100% !important;
margin-top: 10px !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
html body .item-card:hover .item-card-main,
html body .item-card:focus-within .item-card-main {
transform: rotateY(180deg) !important;
pointer-events: none !important;
}
html body .item-card:hover .item-card-back,
html body .item-card:focus-within .item-card-back {
transform: rotateY(0deg) !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* part 156 - catalog cards adopt the OlympicAngel card recipe, tuned to
our gold/night palette: glass surface with backdrop blur, gold
hairline border that brightens on hover, lift + deep soft shadow,
the item art does the little rotate+scale kick, and every motion
uses their exact easing (0.25s cubic-bezier(0.16,1,0.3,1)). The
flip from part 155 stays - it just gets the same timing curve. */
html body .item-card {
background: rgba(255, 255, 255, 0.035) !important;
-webkit-backdrop-filter: blur(18px) !important;
backdrop-filter: blur(18px) !important;
border: 1px solid rgba(240, 184, 58, 0.22) !important;
border-radius: 22px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
transition:
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
border-color: rgba(240, 184, 58, 0.5) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
html body .card-in,
html body .item-card {
animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
html body .item-card .item-media {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card:hover .item-media {
transform: rotate(-6deg) scale(1.08) !important;
}
html body .item-card .item-card-main {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card .item-card-back {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card-actions button {
transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* part 157 - drop the two-faced flip; the hover now mirrors the
recorded OlympicAngel motion exactly: lift + deep shadow + gold
border glow + inner warm glow + a diagonal shine sweep across the
face, plus the existing -6deg/1.08 art kick */
html body .item-card-back {
display: none !important;
}
html body .item-card:hover .item-card-main,
html body .item-card:focus-within .item-card-main {
transform: none !important;
pointer-events: auto !important;
}
html body .item-card {
overflow: hidden !important;
}
html body .item-card::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
border-radius: inherit !important;
pointer-events: none !important;
background: linear-gradient(105deg,
rgba(255, 255, 255, 0) 34%,
rgba(255, 214, 120, 0.10) 44%,
rgba(255, 255, 255, 0.28) 50%,
rgba(255, 214, 120, 0.10) 56%,
rgba(255, 255, 255, 0) 66%) !important;
transform: translateX(-130%) !important;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card:hover::after,
html body .item-card:focus-within::after {
transform: translateX(130%) !important;
}
html body .item-card:hover {
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.45),
inset 0 0 46px rgba(240, 184, 58, 0.06) !important;
}
/* part 158 - the two card action buttons: taller, felted dark surface
with a gold hairline, bright gold text with a firm solid shadow */
html body .item-card-actions {
border-top: 1px solid rgba(240, 184, 58, 0.20) !important;
background: rgba(9, 16, 34, 0.72) !important;
}
html body .item-card-actions button {
padding: 16px 8px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
color: #f0b83a !important;
text-shadow: 1px 1px 0 #0a1226 !important;
background: rgba(9, 16, 34, 0.72) !important;
}
html body .item-card-actions button + button {
border-inline-start: 1px solid rgba(240, 184, 58, 0.20) !important;
}
html body .item-card-actions button:hover {
background: rgba(240, 184, 58, 0.14) !important;
color: #ffd98a !important;
}
/* part 159 - remove the white separator line under the card artwork
(it was a border-bottom on .item-media) and enlarge the two marked
elements: the rarity badge and the item name */
html body .item-card .item-media {
border-bottom: 0 !important;
}
html body .item-card .item-topline .badge {
font-size: 12.5px !important;
padding: 5px 12px !important;
min-height: 24px !important;
line-height: 1.2 !important;
}
html body .item-card .item-name {
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
color: #ffffff !important;
text-shadow: 1px 1px 0 rgba(10, 18, 38, 0.9) !important;
}
/* part 160 - kill the tone boundary (the media zone carries its own
darker gradient which reads as a separator line), flatten the whole
card to one uniform surface, and scale up every bit of card text
and the action row so no one has to zoom the screen */
html body .item-card .item-media {
background: transparent !important;
padding: 26px 26px 30px !important;
}
html body .item-card .item-card-main {
background: transparent !important;
padding: 14px 18px 18px !important;
}
html body .item-card .item-topline .badge {
font-size: 14px !important;
padding: 7px 16px !important;
}
html body .item-card .item-id {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #cfd9e6 !important;
}
html body .item-card .item-slot-label {
font-size: 14px !important;
font-weight: 700 !important;
color: #b9c8dd !important;
}
html body .item-card .item-name {
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
html body .item-card .item-sub {
font-size: 14px !important;
margin-top: 12px !important;
}
html body .item-card .item-flags {
font-size: 14px !important;
gap: 6px !important;
}
html body .item-card .community-chip {
font-size: 13.5px !important;
}
html body .item-card-actions button {
padding: 19px 10px !important;
font-size: 14px !important;
font-weight: 800 !important;
}
/* part 161 - trade board display restyled to the night glass language:
the verdict strip can never appear as an opaque light card anymore,
whatever state it reports (balanced / unbalanced / empty) */
html body #trade-board .verdict.verdict-inner,
html body #trade-board .verdict.verdict-inner.is-balanced,
html body #trade-board .verdict.verdict-inner.is-unbalanced,
html body #trade-board .verdict.verdict-inner.is-empty {
background: rgba(9, 16, 34, 0.78) !important;
border: 1px solid rgba(240, 184, 58, 0.22) !important;
border-radius: 18px !important;
-webkit-backdrop-filter: blur(18px) !important;
backdrop-filter: blur(18px) !important;
color: #eaf1fb !important;
}
html body #trade-board .verdict.verdict-inner strong {
color: #ffffff !important;
font-weight: 900 !important;
text-shadow: 1px 1px 0 rgba(6, 12, 26, 0.92) !important;
}
html body #trade-board .verdict.verdict-inner p {
color: #b9c8dd !important;
}
html body #trade-board .verdict.verdict-inner .verdict-icon {
color: #f0b83a !important;
}
html body #trade-board .verdict.verdict-inner.is-unbalanced {
border-color: rgba(214, 69, 69, 0.34) !important;
}
html body #trade-board .verdict.verdict-inner.is-unbalanced .verdict-icon {
color: #ff9496 !important;
}
/* part 162 - the showcase becomes the wooden task board: board.png is
the section's own scene, fixed/cover so every neighbour keeps One
continuous wall (the catalog's 140px rounded top corners take
matching patches of the same fixed image, so no notch and no seam
line is ever painted between them) */
html body #showcase {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.10) 0%, rgba(24, 14, 2, 0.34) 100%) !important;
background-color: transparent !important;
}
html body #showcase::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
background: url("images/board.png") !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
html body #showcase h2,
html body #showcase h3 {
color: #2f1c06 !important;
text-shadow: 1px 1px 0 rgba(255, 246, 224, 0.55) !important;
}
html body #showcase .section-lead {
color: #5a4020 !important;
}
html body #showcase .showcase-checker .showcase-card,
html body #showcase .showcase-checker .tp-visual {
background: rgba(255, 248, 225, 0.94) !important;
border: 1px solid #b9791f !important;
border-radius: 16px !important;
}
html body #showcase .showcase-checker .tp-name,
html body #showcase .showcase-checker .tp-labels,
html body #showcase .showcase-checker .tp-val em {
color: #3a2410 !important;
}
html body #showcase [data-open-trade] {
color: #3a2410 !important;
border-color: rgba(122, 84, 16, 0.55) !important;
background: rgba(255, 248, 225, 0.6) !important;
}
/* the catalog's rounded top corners: same fixed board continues there */
html body #catalog {
position: relative !important;
}
html body #catalog::before,
html body #catalog::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
width: 140px !important;
height: 140px !important;
z-index: -1 !important;
background: url("images/board.png") !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
margin: 0 !important;
transform: none !important;
}
html body #catalog::before {
inset-inline-start: 0 !important;
}
html body #catalog::after {
inset-inline-end: 0 !important;
}
/* part 163 - adopt the "Arsenet" background recipe: the section owns
its background, painted directly on the element (no hidden pseudos);
the wooden task board is layer 2 of #showcase's own background */
html body #showcase {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.10) 0%, rgba(24, 14, 2, 0.38) 100%),
url("images/board.png") !important;
background-repeat: no-repeat, no-repeat !important;
background-size: cover, cover !important;
background-position: center, center !important;
background-attachment: scroll, fixed !important;
background-color: transparent !important;
}
html body #showcase::before {
display: none !important;
}
/* part 164 - the wooden board must scroll WITH the site, not stay
pinned to the viewport; and both top corner notches of #catalog must
keep the wood continuing (an old rule hid one of the two patches) */
html body #showcase {
background-attachment: scroll, scroll !important;
background-position: center, center !important;
}
html body section#catalog::before {
display: block !important;
}
html body #catalog::before,
html body #catalog::after {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center !important;
}
/* part 165 - board.png retired by review decision; the showcase now
uses the wooden-workshop language of the in-game shop screenshot:
warm plank-wood frame, a cream "paper board" stage for the content,
and colorful sticky-tile squares with a pin dot */
html body #showcase {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.05) 0%, rgba(24, 14, 2, 0.32) 100%),
repeating-linear-gradient(90deg, rgba(58, 36, 8, 0.16) 0 2px, rgba(255, 236, 190, 0.10) 2px 5px, rgba(0, 0, 0, 0) 5px 148px),
linear-gradient(180deg, #dcaf5e 0%, #c99340 52%, #a8742c 100%) !important;
background-attachment: scroll, scroll, scroll !important;
background-size: cover, auto, cover !important;
background-color: transparent !important;
}
html body #showcase::before { display: none !important; }
/* the cream paper stage - content sits on it, wood stays visible as frame */
html body #showcase .shell {
background:
linear-gradient(112deg, rgba(90, 60, 10, 0.06) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 58%),
linear-gradient(180deg, #fdf9ee 0%, #f6e9c9 100%) !important;
border-radius: 16px !important;
box-shadow: 0 14px 44px rgba(47, 28, 6, 0.35), inset 0 0 0 1px rgba(185, 121, 31, 0.35) !important;
padding: 26px 28px !important;
}
/* sticky tiles - rounded squares with the folded corner and pin dot */
html body #showcase .showcase-thumbs img {
border-radius: 16px 16px 16px 5px !important;
background: linear-gradient(180deg, #eef5fc 0%, #d3e4f2 100%) !important;
border: 0 !important;
box-shadow: 0 8px 18px rgba(47, 28, 6, 0.30), inset 0 0 0 1px rgba(58, 36, 8, 0.10) !important;
position: relative !important;
}
html body #showcase .showcase-thumbs img:nth-child(2) { background: linear-gradient(180deg, #f4e9fb 0%, #ddc7ef 100%) !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { background: linear-gradient(180deg, #fdf6c9 0%, #f4dd75 100%) !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { background: linear-gradient(180deg, #eaf7cd 0%, #cce893 100%) !important; }
html body #showcase .showcase-thumbs img:nth-child(5) { background: linear-gradient(180deg, #fdeaD2 0%, #f8c98c 100%) !important; }
html body #showcase .showcase-badge {
background: linear-gradient(135deg, #f9e79f 0%, #f2d565 100%) !important;
color: #5a4020 !important;
border-radius: 4px 14px 14px 14px !important;
box-shadow: 0 8px 18px rgba(47, 28, 6, 0.30), inset 0 0 0 1px rgba(58, 36, 8, 0.14) !important;
transform: rotate(-1.4deg) !important;
font-weight: 800 !important;
}
/* checker verdict strip reads as ink on the paper stage */
html body #showcase .showcase-checker .tp-verdict {
background: rgba(255, 250, 238, 0.9) !important;
color: #3a2410 !important;
}
html body #showcase .showcase-checker .tp-verdict strong { color: #2f1c06 !important; }
/* catalog top corner notches stop sampling the retired image and take
the wood tones instead, so no mismatched line appears there */
html body #catalog::before,
html body #catalog::after {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.18) 0%, rgba(24, 14, 2, 0.40) 100%),
linear-gradient(180deg, #c99340 0%, #a8742c 100%) !important;
background-attachment: scroll !important;
background-size: cover !important;
}
/* part 166/167 retired - the reference-site hero recipe actually belongs
to the showcase section; the hero keeps its original sky recipe */
/* part 168 - the showcase takes the reference-site recipe (from the
screenshot the user sent): deep naval gradient filling the band,
faint vertical grid lines, soft top glow, light ink, glass stage */
html body #showcase {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
radial-gradient(120% 85% at 50% 0%, rgba(74, 158, 255, 0.14) 0%, rgba(74, 158, 255, 0) 58%),
linear-gradient(180deg, #0e2138 0%, #0a1730 46%, #071026 100%) !important;
background-attachment: scroll, scroll, scroll !important;
background-size: cover, cover, cover !important;
background-position: center, center, center !important;
background-color: #08122a !important;
}
/* the former cream stage becomes a soft glass panel like their pill */
html body #showcase .shell {
background:
linear-gradient(112deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 60%) !important;
border-radius: 24px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 60px rgba(3, 8, 20, 0.5) !important;
padding: 30px 32px !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
/* light ink on the deep ground */
html body #showcase h2,
html body #showcase h3 {
color: #ffffff !important;
text-shadow: none !important;
}
html body #showcase .section-lead {
color: #c3d3e8 !important;
}
/* checker cards stay readable: night glass seen against the deep ground */
html body #showcase .showcase-checker .showcase-card,
html body #showcase .showcase-checker .tp-visual {
background: rgba(255, 248, 225, 0.94) !important;
border: 1px solid rgba(185, 121, 31, 0.5) !important;
}
html body #showcase .showcase-checker .tp-name,
html body #showcase .showcase-checker .tp-labels,
html body #showcase .showcase-checker .tp-val em {
color: #3a2410 !important;
}
html body #showcase .showcase-checker .tp-verdict {
background: rgba(255, 250, 238, 0.9) !important;
color: #3a2410 !important;
}
html body #showcase .showcase-checker .tp-verdict strong { color: #2f1c06 !important; }
/* primary action as the reference pill: gold fill, dark weight */
html body #showcase .hero-stats,
html body #showcase [data-open-trade] {
border-radius: 999px !important;
}
html body #showcase [data-open-trade] {
background: #f0b83a !important;
color: #241300 !important;
border: 0 !important;
font-weight: 800 !important;
box-shadow: 0 10px 26px rgba(240, 184, 58, 0.22) !important;
}
/* catalog corner notches return to the night ground so no warm seam */
html body #catalog::before,
html body #catalog::after {
background-image:
linear-gradient(180deg, rgba(4, 6, 14, 0) 55%, rgba(4, 6, 14, 0.32) 100%),
radial-gradient(140% 110% at 60% 40%, rgba(98, 78, 214, 0.10) 0%, rgba(98, 78, 214, 0) 62%) !important;
background-attachment: scroll !important;
background-size: cover !important;
}
/* part 169 - behind the blue quote card's rounded corners there must be
no color of the catalog's own: its gradient layer is removed, and the
two top corner notches continue the showcase recipe above instead */
html body #catalog {
background-image: none !important;
background-color: transparent !important;
}
html body #catalog::before,
html body #catalog::after {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0d1f36 0%, #071026 100%) !important;
background-attachment: scroll !important;
background-size: cover !important;
background-position: center !important;
}
/* part 170 - the corner patches of the catalog were still 96x96 from an
older part, leaving a ring of the body artwork visible inside the
140px rounded notch; they now cover the full notch square */
html body #catalog::before,
html body #catalog::after {
width: 140px !important;
height: 140px !important;
top: 0 !important;
border: 0 !important;
margin: 0 !important;
transform: none !important;
}
/* part 171 - every seam corner the reviewer circled showed leftover body
artwork behind rounded corners; the seams now butt flat: sky ends
straight on the showcase, the blue quote starts straight under it,
and the old corner patches are not needed anymore */
html body .sky-canvas {
border-radius: 28px 28px 0 0 !important;
}
html body #catalog .blue-quote {
border-radius: 0 0 0 0 !important;
}
html body #catalog {
border-radius: 0 !important;
}
html body #catalog::before,
html body #catalog::after {
display: none !important;
}
html body .band-tint:has(.blue-quote)::before,
html body .band-tint:has(.blue-quote)::after {
content: none !important;
}
/* part 172 - final kill of the catalog corner pseudos */
html body section#catalog::before,
html body section#catalog::after,
html body #catalog::before,
html body #catalog::after {
content: none !important;
display: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
}
/* part 173 - reviewer rule: keep the beautiful rounding, and let the
NEXT section's own background flow up and fill the notches behind it
1) the sky band keeps all four 28px corners; its frame paints the
showcase's naval grid recipe, exposed only in the bottom slivers
2) the blue quote keeps its 96px top shoulders; the catalog itself
carries the same showcase recipe so the slivers continue it */
html body .sky-canvas {
border-radius: 28px !important;
}
html body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 46%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-color: #08122a !important;
}
html body #catalog .blue-quote {
border-radius: 96px 96px 0 0 !important;
}
html body #catalog {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0a1730 0%, #08122a 55%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-position: center, center !important;
border-radius: 0 !important;
}
/* part 174 - the naval continuation must beat the [data-theme] selector
that blanked the sky frame; same-shape selectors, later in the file */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 46%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-color: #08122a !important;
}
/* part 175 - the shoulders region must be tonally continuous: the
catalog opens with the exact tone the showcase closes with, holds it
through the 96px shoulder zone, then deepens gently */
html body #catalog {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #071026 0%, #071026 170px, #0a1a33 52%, #0a1730 70%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-position: center, center !important;
}
/* part 176 - the sky-showcase seam, same reviewer mechanics: the
sky keeps all four rounded corners, and the frame behind the bottom
slivers closes with the exact tone the showcase opens with
(#0e2138), so no tone jump and no seam line at the curves */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0a1730 0%, #0e2138 38%, #0e2138 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-color: #0e2138 !important;
}
/* part 177 - one ground for the whole page: the naval grid recipe
becomes the body ground itself, ill every section now floats on the
same deep grid - no more per-section patches anywhere */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 28%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
background-color: #071026 !important;
}
/* retire every section-owned backdrop from the patch era */
html body #showcase,
html body #catalog,
html body #trade,
html body .band-tint,
html body .band-rails,
html body .band-plain {
background-image: none !important;
background-color: transparent !important;
}
/* the sky frame returns to fully transparent: the body ground shows
behind the sky window's rounded corners */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background: transparent !important;
padding: 0 !important;
}
/* part 178 - restored the original grid density: "cover" was scaling
the repeating pattern on the body ground; "auto" keeps the 141px
cadence exactly as the mid-section recipe used it */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-size: auto, auto !important;
background-repeat: repeat, no-repeat !important;
background-position: left top, center !important;
}
/* part 179 - full square grid: horizontal lines at the same 141px
cadence join the vertical ones, on the deep graded ground */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 28%, #071026 100%) !important;
background-size: auto, auto, auto !important;
background-repeat: repeat, repeat, no-repeat !important;
background-position: left top, left top, center !important;
}
/* part 180 - the showcase card goes quiet-luxury glass: no opaque
backdrops behind the small items, smooth type, subtly glowing pill */
html body #showcase .showcase-thumbs img {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)) !important;
}
/* the counter sticker becomes a soft glass chip */
html body #showcase .showcase-badge {
background: rgba(255, 255, 255, 0.06) !important;
color: #eaf1fb !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
transform: none !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
}
/* checker surfaces: cream sticky notes retire into dark glass */
html body #showcase .showcase-checker .showcase-card,
html body #showcase .showcase-checker .tp-visual {
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 18px !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(16px) !important;
backdrop-filter: blur(16px) !important;
}
html body #showcase .showcase-checker .tp-name,
html body #showcase .showcase-checker .tp-labels,
html body #showcase .showcase-checker .tp-val em {
color: #eaf1fb !important;
font-weight: 600 !important;
}
html body #showcase .showcase-checker .tp-verdict {
background: rgba(255, 255, 255, 0.035) !important;
color: #c9d7ea !important;
border-radius: 14px !important;
}
html body #showcase .showcase-checker .tp-verdict strong {
color: #f0b83a !important;
font-weight: 700 !important;
text-shadow: none !important;
}
/* the action pill: dark glass with a gentle gold aura */
html body #showcase [data-open-trade] {
background: rgba(255, 255, 255, 0.06) !important;
color: #f0b83a !important;
border: 1px solid rgba(240, 184, 58, 0.30) !important;
border-radius: 999px !important;
font-weight: 650 !important;
letter-spacing: 0.02em !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04),
0 8px 26px rgba(0, 0, 0, 0.30),
0 0 22px rgba(240, 184, 58, 0.10) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
/* part 181 - the nth-child sticky-note rules from the tile era still
outranked the general transparent rule; they are now overridden at
the same strength, so every item tile is fully transparent */
html body #showcase .showcase-thumbs img:nth-child(1),
html body #showcase .showcase-thumbs img:nth-child(2),
html body #showcase .showcase-thumbs img:nth-child(3),
html body #showcase .showcase-thumbs img:nth-child(4),
html body #showcase .showcase-thumbs img:nth-child(5) {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)) !important;
}
/* part 182 - depth-field concept: many items floating in a soft blur
behind, only the featured ones rise from them freely - no boxes,
no rectangles, the items sit directly on the grid ground */
html body #showcase .showcase-media.is-grid {
display: block !important;
position: relative !important;
height: 440px !important;
overflow: hidden !important;
background: radial-gradient(60% 55% at 62% 40%, rgba(74, 158, 255, 0.10) 0%, rgba(74, 158, 255, 0) 70%) !important;
border-radius: 24px !important;
}
/* blurred scatter layer */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
opacity: 0.5 !important;
filter: blur(5px) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 6% !important; top: 10% !important; width: 96px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 20% !important; top: 58% !important; width: 78px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 38% !important; top: 12% !important; width: 116px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 55% !important; top: 66% !important; width: 88px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 70% !important; top: 8% !important; width: 92px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 86% !important; top: 44% !important; width: 104px !important; }
/* featured items: free-floating, sharp, bigger */
html body #showcase .showcase-thumbs {
position: absolute !important;
inset: 0 !important;
display: block !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 26% !important; top: 30% !important; width: 200px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 52% !important; top: 14% !important; width: 148px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 48% !important; top: 52% !important; width: 142px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 72% !important; top: 40% !important; width: 178px !important; }
/* the badge floats above everything */
html body #showcase .showcase-badge {
position: absolute !important;
right: 4% !important;
bottom: 6% !important;
z-index: 3 !important;
}
/* part 183 - free space everywhere: the dark center box is gone, the
blur field spreads across the WHOLE section, and the copy/buttons
get the quiet-luxury voice */
html body #showcase {
position: relative !important;
}
/* the big dark box: retired */
html body #showcase .shell {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html body #showcase .showcase-media.is-grid {
position: static !important;
height: 440px !important;
overflow: visible !important;
background: none !important;
border-radius: 0 !important;
}
/* the blur field now belongs to the whole section */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
opacity: 0.45 !important;
filter: blur(5px) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 3% !important; top: 7% !important; width: 96px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 11% !important; top: 76% !important; width: 80px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 27% !important; top: 14% !important; width: 112px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 44% !important; top: 84% !important; width: 86px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 87% !important; top: 12% !important; width: 94px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 91% !important; top: 62% !important; width: 104px !important; }
/* featured items float on the items side, frame-free */
html body #showcase .showcase-thumbs {
position: absolute !important;
inset: 0 !important;
display: block !important;
z-index: 1 !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
height: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 63% !important; top: 16% !important; width: 200px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 84% !important; top: 34% !important; width: 150px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 59% !important; top: 48% !important; width: 142px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 76% !important; top: 66% !important; width: 172px !important; }
html body #showcase .showcase-badge {
position: absolute !important;
right: 5% !important;
bottom: auto !important;
top: 4% !important;
z-index: 3 !important;
}
/* quiet-luxury voice for the copy */
html body #showcase .showcase-copy h3 {
color: #ffffff !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-shadow: none !important;
}
html body #showcase .showcase-copy p {
color: #b9c8dd !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
/* the ghost link as a small glowing pill */
html body #showcase .showcase-copy .button-ghost {
background: rgba(255, 255, 255, 0.06) !important;
color: #f0b83a !important;
border: 1px solid rgba(240, 184, 58, 0.28) !important;
border-radius: 999px !important;
font-weight: 650 !important;
letter-spacing: 0.02em !important;
box-shadow: 0 0 20px rgba(240, 184, 58, 0.10) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
/* part 184 - composed stage instead of scattered chaos: the media
column is a frame-free stage (no box, just geometry), items are
arranged harmonically inside it and never touch the copy */
html body #showcase .showcase-media.is-grid {
position: relative !important;
height: 440px !important;
overflow: hidden !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* scatter layer, contained and balanced */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
opacity: 0.45 !important;
filter: blur(5px) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 4% !important; top: 5% !important; width: 88px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 15% !important; top: 64% !important; width: 76px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 36% !important; top: 8% !important; width: 108px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 53% !important; top: 72% !important; width: 82px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 74% !important; top: 6% !important; width: 90px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 84% !important; top: 60% !important; width: 98px !important; }
/* featured: a calm diagonal inside the stage */
html body #showcase .showcase-thumbs {
position: absolute !important;
inset: 0 !important;
display: block !important;
z-index: 1 !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
height: auto !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 20% !important; top: 24% !important; width: 186px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 52% !important; top: 13% !important; width: 136px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 46% !important; top: 54% !important; width: 134px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 71% !important; top: 40% !important; width: 164px !important; }
html body #showcase .showcase-badge {
position: absolute !important;
right: 6% !important;
top: 5% !important;
z-index: 3 !important;
}
/* last remaining box-ghosts: nothing behind any item image here */
html body #showcase .showcase-checker img,
html body #showcase .tp-visual img {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* part 185 - two floats poked past the right edge of the stage;
nudged inside so nothing is ever clipped */
html body #showcase .showcase-depth img:nth-child(6) { left: 70% !important; top: 60% !important; width: 96px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 60% !important; top: 40% !important; width: 156px !important; }
/* part 186 - reset to the familiar structure: the four items as one
tidy even cluster (like the original layout), no frame around it,
and the blurred items drift gently AROUND the cluster - small,
unhurried, never crammed into corners */
html body #showcase .showcase-media.is-grid {
position: relative !important;
height: 440px !important;
overflow: hidden !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* featured cluster: one even 2x2 body in the middle of the stage */
html body #showcase .showcase-thumbs {
position: absolute !important;
left: 50% !important; top: 50% !important;
width: 300px !important; height: 300px !important;
transform: translate(-50%, -50%) !important;
display: block !important;
z-index: 1 !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
width: 132px !important;
height: auto !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.45)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 18px !important; top: 24px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 156px !important; top: 24px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 18px !important; top: 162px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 156px !important; top: 162px !important; }
/* gentle drift around the cluster */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
width: 72px !important;
opacity: 0.4 !important;
filter: blur(6px) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)) !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 36% !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 38% !important; top: 3% !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 73% !important; top: 6% !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 3% !important; top: 79% !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 72% !important; top: 82% !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 41% !important; top: 86% !important; }
/* part 187 - same-strength overrides: the older per-child positioning
and sizing rules finally give way to the tidy composition */
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 36% !important; width: 72px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 38% !important; top: 3% !important; width: 78px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 72% !important; top: 6% !important; width: 70px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 3% !important; top: 78% !important; width: 74px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 71% !important; top: 81% !important; width: 72px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 40% !important; top: 85% !important; width: 76px !important; }
html body #showcase .showcase-thumbs img:nth-child(1) { left: 18px !important; top: 24px !important; width: 132px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 156px !important; top: 24px !important; width: 132px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 18px !important; top: 162px !important; width: 132px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 156px !important; top: 162px !important; width: 132px !important; }
/* part 188 - the container: fully defined anchor, no right/bottom
residue from the old inset rule (which fought RTL) */
html body #showcase .showcase-thumbs {
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
width: 300px !important;
height: 300px !important;
transform: translate(-50%, -50%) !important;
}
/* part 189 - FINAL arrangement, by exact reviewer instruction: one tidy
block, like the original layout - the four items in an even static
2x2 grid inside the media column, no outer box, nothing floating
anywhere else on the section */
html body #showcase .showcase-depth {
display: none !important;
}
html body #showcase .showcase-thumbs {
position: static !important;
display: grid !important;
grid-template-columns: repeat(2, 150px) !important;
gap: 22px !important;
justify-content: center !important;
align-content: center !important;
width: auto !important;
height: auto !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 auto !important;
}
html body #showcase .showcase-thumbs img {
position: static !important;
width: 150px !important;
height: auto !important;
left: auto !important;
top: auto !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42)) !important;
}
/* part 190 - the correct build, one time, final:
(1) blurred item field wraps the WHOLE section, harmonious drift,
(2) the four featured items big and frame-free beside the copy,
(3) everything transparent on the grid ground */
html body #showcase .showcase-media.is-grid {
position: static !important;
height: auto !important;
min-height: 440px !important;
overflow: visible !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* (1) the blur field, full-section scope */
html body #showcase .showcase-depth {
display: block !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
width: 80px !important;
height: auto !important;
opacity: 0.42 !important;
filter: blur(6px) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)) !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 3% !important; top: 12% !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 96% !important; top: 24% !important; margin-left: -80px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 4% !important; top: 56% !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 94% !important; top: 72% !important; margin-left: -80px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 30% !important; top: 88% !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 64% !important; top: 92% !important; }
/* (2) featured cluster: bigger, still frame-free, beside the copy */
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, 172px) !important;
gap: 26px !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { width: 172px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { width: 172px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { width: 172px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { width: 172px !important; }
/* part 191 - scatter tuning: item 1 slid under the copy band */
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 40% !important; }
/* part 192 - final decisive pass: the two floating placeholder blobs of
the live pair (tossed at the top, disconnected) are removed; the blur
field stays gentle and never pokes above the section */
html body #showcase .tp-card.is-live > img {
display: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { top: 42% !important; }
html body #showcase .showcase-depth img:nth-child(2) { top: 34% !important; left: 90% !important; margin-left: -78px !important; }
html body #showcase .showcase-depth img:nth-child(3) { top: 62% !important; }
html body #showcase .showcase-depth img:nth-child(4) { top: 74% !important; left: 88% !important; margin-left: -80px !important; }
/* part 193 - the blur field now owns the FULL section: items pinned to
the extreme edges and corners, arcing around the central cluster */
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 6% !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: calc(98% - 78px) !important; top: 5% !important; margin-left: 0 !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 1.5% !important; top: 52% !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 99% !important; top: 50% !important; margin-left: -80px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 34% !important; top: 91% !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 63% !important; top: 92% !important; }
/* part 194 - the live rotating pair returns: those two items change
every few seconds and they are the life of the stage - visible at
full size in their top area */
html body #showcase .tp-card.is-live > img {
display: block !important;
}
/* part 195 - use the room: the stage panel was capped at 1060px, which
left wide empty bands on big screens; it now breathes to 1620px and
the composition spreads with it */
html body #showcase .shell {
max-width: 1620px !important;
width: 100% !important;
}
html body #showcase .showcase-block {
max-width: none !important;
}
/* the featured cluster grows with the wider stage */
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, 188px) !important;
gap: 30px !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { width: 188px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { width: 188px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { width: 188px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { width: 188px !important; }
/* part 198 - size hierarchy for the blur field: a few items enlarged
for real depth variance, small ones stay small */
html body #showcase .showcase-depth img:nth-child(1) { width: 118px !important; }
html body #showcase .showcase-depth img:nth-child(2) { width: 76px !important; }
html body #showcase .showcase-depth img:nth-child(3) { width: 126px !important; }
html body #showcase .showcase-depth img:nth-child(4) { width: 106px !important; }
html body #showcase .showcase-depth img:nth-child(5) { width: 72px !important; }
html body #showcase .showcase-depth img:nth-child(6) { width: 78px !important; }
/* keep edges inside the section at the new sizes */
html body #showcase .showcase-depth img:nth-child(2) { left: calc(98% - 128px) !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: calc(99% - 112px) !important; }
/* part 199 - full strength: the glass-pill rules carried [data-theme]
weight, so the outline voice matches that weight and wins, and the
enlarged blur item 3 steps away from the copy */
html body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 1px solid rgba(240, 184, 58, 0.55) !important;
color: #f0b83a !important;
letter-spacing: 0.14em !important;
}
html body #showcase .showcase-badge::before,
html[data-theme="dark"] body #showcase .showcase-badge::before {
display: none !important;
}
html body #showcase [data-open-trade],
html[data-theme="dark"] body #showcase [data-open-trade],
html body .showcase-copy [data-open-trade],
html[data-theme="dark"] body .showcase-copy [data-open-trade] {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
padding: 14px 30px !important;
}
html body #showcase .button-ghost,
html[data-theme="dark"] body #showcase .button-ghost {
background: none !important;
box-shadow: none !important;
border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
color: #e7eef6 !important;
}
html body #showcase .showcase-depth img:nth-child(3) { left: 44% !important; top: 4% !important; }
html body #showcase .showcase-depth img:nth-child(1) { top: 12% !important; }
/* part 200 - decisive override: exact same selectors as the glass
rules, appended later, so the outline voice wins for good */
html body #showcase [data-open-trade] {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
}
html body .showcase-checker [data-open-trade] {
background: none !important;
box-shadow: none !important;
}
/* part 202 - the real winner found in the CSSOM: the glass pill lives
at html body #showcase .showcase-copy .button-ghost - matched at
equal or higher strength, appended later, so the outline wins */
html body #showcase .showcase-copy .button-ghost {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
font-weight: 700 !important;
padding: 14px 30px !important;
}
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
background: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
}
/* part 203 - the enlarged blur item 1 sits above the copy band */
html body #showcase .showcase-depth img:nth-child(1) { top: 4% !important; left: 3% !important; }
/* part 204 - a less rounded, dashed, differently-colored button voice:
tiny corner radius (6px), dashed hairline frame, cool mint-teal
instead of orange gold - applying to every circled action pill and
the badge, site-wide for consistency */
html body [data-open-trade],
html body .button-ghost,
html body .showcase-badge {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 2px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
html body .showcase-badge {
border-width: 1.5px !important;
}
html body [data-open-trade]:hover,
html body .button-ghost:hover {
border-color: rgba(110, 214, 196, 0.95) !important;
color: #a4ecdc !important;
}
/* part 205 - id-weight dashes: the mint dashed voice matched at the
same selectors that carry #showcase weight, so they finally win */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 2px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 1.5px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
/* the header copy-side CTA inside the copy column carries id weight too */
html body #showcase .showcase-copy [data-open-trade],
html[data-theme="light"] body #showcase .showcase-copy [data-open-trade] {
border-radius: 6px !important;
border: 2px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
/* part 206 - the header pill joins the same voice: small radius,
dashed mint frame, transparent body */
html body .main-nav a,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 1.5px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
html body .main-nav a:hover {
border-color: rgba(110, 214, 196, 0.95) !important;
color: #a4ecdc !important;
}
/* part 207 - the badge relocates beside the cluster (right, between
rows), and the featured four grow up and tilt a little each in its
own direction - orderly grid gone, gentle scatter in */
html body #showcase .showcase-badge {
position: absolute !important;
right: 13% !important;
top: 30% !important;
left: auto !important;
margin: 0 !important;
z-index: 3 !important;
}
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, 214px) !important;
gap: 20px 26px !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { width: 210px !important; transform: rotate(-9deg) translateY(10px) !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { width: 216px !important; transform: rotate(7deg) translateY(-6px) !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { width: 208px !important; transform: rotate(5deg) translateY(-10px) translateX(-6px) !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { width: 214px !important; transform: rotate(-7deg) translateY(8px) translateX(4px) !important; }
/* part 208 - the "3,900+ items" badge: bigger, bolder text in a loud
orange, dashed frame tinted to match */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
color: #ff8a3d !important;
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
padding: 12px 22px !important;
border-color: rgba(255, 138, 61, 0.75) !important;
}
/* part 209 - the showcase copy joins the orange voice, heading and
description deliberately different from each other:
title = big bold loud orange, description = soft pale warm gray */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
color: #ff8a3d !important;
font-size: 34px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
border-bottom: 2px dashed rgba(255, 138, 61, 0.6) !important;
padding-bottom: 8px !important;
}
html body #showcase .showcase-copy p {
color: #c4b8ae !important;
font-weight: 400 !important;
font-size: 16px !important;
letter-spacing: 0 !important;
}
/* the catalog CTA echoes the badge: orange dashed outline */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
border: 2px dashed rgba(255, 138, 61, 0.75) !important;
color: #ff8a3d !important;
}
html body #showcase .showcase-copy .button-ghost:hover {
border-color: rgba(255, 138, 61, 1) !important;
color: #ffb380 !important;
}
/* part 210 - color re-choice: orange reads as warning, mint reads as
green; the new voice is a confident bright blue, and everything
gets one size step bigger */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
color: #4fa8ff !important;
border: 2px dashed rgba(79, 168, 255, 0.8) !important;
font-size: 27px !important;
font-weight: 800 !important;
padding: 14px 26px !important;
}
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
color: #4fa8ff !important;
font-size: 40px !important;
border-bottom: 2px dashed rgba(79, 168, 255, 0.6) !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost,
html body .main-nav a,
html[data-theme="dark"] body .main-nav a {
color: #4fa8ff !important;
border: 2px dashed rgba(79, 168, 255, 0.8) !important;
font-size: 17px !important;
padding: 14px 34px !important;
}
html body #showcase .showcase-copy .button-ghost:hover,
html body .main-nav a:hover {
border-color: rgba(122, 190, 255, 1) !important;
color: #8cc5ff !important;
}
/* other data-open-trade pills that keep the dashed voice */
html body #showcase [data-open-trade],
html body .showcase-checker [data-open-trade] {
color: #4fa8ff !important;
border: 2px dashed rgba(79, 168, 255, 0.8) !important;
border-radius: 6px !important;
background: none !important;
box-shadow: none !important;
}
/* part 211 - live query exchange in the showcase copy: rotating typed
questions like people asking the same search over and over */
html body #showcase .showcase-copy .live-queries {
min-height: 96px !important;
color: #c4b8ae !important;
font-size: 17px !important;
line-height: 1.7 !important;
}
html body #showcase .showcase-copy .live-queries .lq-name {
color: #4fa8ff !important;
font-weight: 700 !important;
margin-inline-end: 6px !important;
}
html body #showcase .showcase-copy .live-queries .lq-text {
color: #e8d9cf !important;
}
html body #showcase .showcase-copy .live-queries .lq-caret {
display: inline-block !important;
width: 2px !important;
height: 1em !important;
background: #4fa8ff !important;
margin-inline-start: 2px !important;
vertical-align: -3px !important;
animation: lqBlink 0.9s steps(1) infinite !important;
}
@keyframes lqBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* part 212 - editorial hero treatment of the copy block: the title
becomes a huge dimmed background layer, tilted, underline gone;
the query line and the button tilt a little and get rounder */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-size: 64px !important;
font-weight: 800 !important;
opacity: 0.38 !important;
transform: rotate(-2deg) !important;
border-bottom: 0 !important;
border: 0 !important;
padding-bottom: 0 !important;
line-height: 1.15 !important;
letter-spacing: 0.01em !important;
}
html body #showcase .showcase-copy .live-queries {
transform: rotate(-1.6deg) !important;
border-radius: 16px !important;
}
html body #showcase .showcase-copy .button-ghost {
transform: rotate(-1.2deg) !important;
border-radius: 16px !important;
}
/* part 213 - same-strength rounding for the CTA |
the [data-theme] variant rules were out-ranking the plain one */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
transform: rotate(-1.2deg) !important;
border-radius: 16px !important;
}
/* part 214 - one-line shorter title, even dimmer, and everything
leans the OTHER way with stronger rounding */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
opacity: 0.20 !important;
transform: rotate(2.6deg) !important;
white-space: nowrap !important;
font-size: 62px !important;
}
html body #showcase .showcase-copy .live-queries {
transform: rotate(1.7deg) !important;
border-radius: 22px !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
transform: rotate(1.3deg) !important;
border-radius: 22px !important;
}
/* part 215 - Tazeq wave hover, ported: every site button gets the two
rising rounded water layers on hover, swim included; the rest of
the button voice (dashed blue frame, radius) stays untouched */
html body [data-open-trade],
html body .showcase-copy .button-ghost,
html body .main-nav a {
position: relative !important;
overflow: hidden !important;
}
html body [data-open-trade] > *,
html body .showcase-copy .button-ghost > *,
html body .main-nav a > * {
position: relative !important;
z-index: 2 !important;
}
html body [data-open-trade]::before,
html body [data-open-trade]::after,
html body .showcase-copy .button-ghost::before,
html body .showcase-copy .button-ghost::after,
html body .main-nav a::before,
html body .main-nav a::after {
content: "" !important;
position: absolute !important;
left: -15% !important;
right: -15% !important;
bottom: -45% !important;
height: 75% !important;
background: rgba(79, 168, 255, 0.22) !important;
border-radius: 48% 52% 0 0 / 60% 60% 0 0 !important;
transform: translateY(105%) !important;
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
pointer-events: none !important;
z-index: 1 !important;
}
html body [data-open-trade]::after,
html body .showcase-copy .button-ghost::after,
html body .main-nav a::after {
background: rgba(79, 168, 255, 0.12) !important;
border-radius: 55% 45% 0 0 / 70% 70% 0 0 !important;
transition-delay: 0.07s !important;
}
html body [data-open-trade]:hover::before,
html body .showcase-copy .button-ghost:hover::before,
html body .main-nav a:hover::before {
transform: translateY(0) !important;
}
html body [data-open-trade]:hover::after,
html body .showcase-copy .button-ghost:hover::after,
html body .main-nav a:hover::after {
transform: translateY(0) !important;
animation: tazeqWaveSwim 2.4s ease-in-out infinite !important;
}
@keyframes tazeqWaveSwim {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(7px) translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
html body [data-open-trade]:hover::after,
html body .showcase-copy .button-ghost:hover::after,
html body .main-nav a:hover::after {
animation: none !important;
}
}
/* part 216 - three different button characters instead of one clone:
(1) ׳”׳—׳׳₪׳•׳× = pill, solid frame, airy caps
(2) 3,900+ badge = double frame, tight, stamp-like
(3) ׳¢׳‘׳¨׳• ׳׳§׳¡׳˜׳•׳ = squared solid 3px frame with an arrow tail */
html body #showcase .showcase-copy [data-open-trade],
html[data-theme="light"] body #showcase .showcase-copy [data-open-trade] {
border-radius: 999px !important;
border: 2px solid rgba(79, 168, 255, 0.9) !important;
border-style: solid !important;
letter-spacing: 0.12em !important;
padding: 13px 40px !important;
}
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge {
border-radius: 4px !important;
border: 2px double rgba(79, 168, 255, 0.9) !important;
letter-spacing: 0.03em !important;
font-size: 25px !important;
padding: 10px 24px !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
border-radius: 2px !important;
border: 3px solid rgba(79, 168, 255, 0.95) !important;
border-style: solid !important;
letter-spacing: 0.05em !important;
padding: 13px 26px 13px 20px !important;
}
/* the arrow tail only on the squared CTA */
html body #showcase .showcase-copy .button-ghost::after,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost::after {
content: none !important;
}
/* part 217 - the header \u05d4\u05d7\u05dc\u05e4\u05d5\u05ea pill: full round, solid frame,
wide-tracked caps - its own character, not the dashed clone */
html body .main-nav a,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
border-radius: 999px !important;
border: 2px solid rgba(79, 168, 255, 0.9) !important;
border-style: solid !important;
letter-spacing: 0.12em !important;
padding: 10px 28px !important;
color: #4fa8ff !important;
}
/* part 218 - bubble-arc title: rounded Hebrew letterforms (Varela
Round -> Rubik), inflated size, soft arch curve on the letters */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 78px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
-webkit-text-stroke: 2px rgba(79, 168, 255, 0.35) !important;
transform: rotate(2.6deg) skewY(-2deg) !important;
border-radius: 40px !important;
}
/* part 219 - the copy block becomes the purple bubble he drew: whole
block tilted at that angle, huge round pill corners, big scale */
html body #showcase .showcase-copy {
transform: rotate(-7deg) !important;
border: 2px dashed rgba(79, 168, 255, 0.45) !important;
border-radius: 170px !important;
padding: 90px 110px !important;
background: none !important;
box-shadow: none !important;
}
html body #showcase .showcase-copy h3 {
font-size: 88px !important;
opacity: 0.28 !important;
}
html body #showcase .showcase-copy .live-queries {
font-size: 19px !important;
transform: none !important;
}
/* inner tilts cancel: the bubble carries the single angle now */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
transform: none !important;
margin-top: 18px !important;
}
/* part 220 - theme-variant strength for the bubble: the light/dark
armed rules from part 218 were out-ranking the plain copy rules */
html body #showcase .showcase-copy,
html[data-theme="light"] body #showcase .showcase-copy,
html[data-theme="dark"] body #showcase .showcase-copy {
border: 2px dashed rgba(79, 168, 255, 0.45) !important;
border-radius: 170px !important;
padding: 90px 110px !important;
transform: rotate(-7deg) !important;
}
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-size: 88px !important;
opacity: 0.28 !important;
}
/* part 221 - keep the bubble fully on-screen: tighter horizontal
padding, slightly smaller title, nudge the block off the left edge */
html body #showcase .showcase-copy,
html[data-theme="light"] body #showcase .showcase-copy,
html[data-theme="dark"] body #showcase .showcase-copy {
padding: 80px 88px !important;
margin-inline-start: 34px !important;
margin-inline-end: 20px !important;
}
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-size: 80px !important;
text-align: center !important;
width: 100% !important;
}
/* part 222 - bubble scoped to the real copy block, sized so the
one-line bubble title always fits inside the rounded frame */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
width: 600px !important;
max-width: none !important;
margin-inline: auto !important;
padding: 66px 72px 60px !important;
box-sizing: border-box !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 74px !important;
width: max-content !important;
margin-inline: auto !important;
white-space: nowrap !important;
}
/* part 223 - fitting the arc inside the viewport: narrower bubble,
gentler tilt, title scaled to comfortably fit inside the rounding */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
width: 500px !important;
padding: 58px 54px 52px !important;
transform: rotate(-5deg) !important;
margin-inline: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 66px !important;
}
/* part 224 - shift the bubble rightward (inline-end margin in RTL) so
its tilted arc never crosses the viewport edge */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
margin-inline-end: 90px !important;
margin-inline-start: 0 !important;
}
/* part 225 - the bubble fills its column naturally: no fixed width,
compact padding and a title size that always fits inside */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
width: auto !important;
max-width: 470px !important;
margin-inline: 0 auto !important;
padding: 46px 40px 44px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 56px !important;
}
/* part 226 - correction: NO bubble frame around the block; the TEXT
itself is the bubble - rounded letterforms + arc on title and on the
description line, frame deleted */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
transform: none !important;
width: auto !important;
max-width: none !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 72px !important;
font-weight: 800 !important;
-webkit-text-stroke: 2.5px rgba(79, 168, 255, 0.4) !important;
letter-spacing: 0.05em !important;
transform: rotate(2.6deg) skewY(-2deg) !important;
opacity: 0.28 !important;
width: auto !important;
margin: 0 !important;
}
/* the description gets the same rounded voice, smaller and readable */
html body #showcase .showcase-copy .live-queries,
html[data-theme="light"] body #showcase .showcase-copy .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy .live-queries {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 21px !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
transform: rotate(-1.6deg) !important;
}
html body #showcase .showcase-copy .live-queries .lq-name {
-webkit-text-stroke: 1.5px rgba(79, 168, 255, 0.3) !important;
}
/* archive the old per-element tilts that are now superseded */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
transform: none !important;
}
/* part 227 - final clean pass: every dashed frame and every box ghost
is deleted site-wide; buttons become quiet solid hairlines; the copy
voice is pure fluid typography - no balloon strokes, no wobble */
/* buttons: solid, thin, calm */
html body [data-open-trade],
html body .button-ghost,
html body .main-nav a,
html body .showcase-badge,
html[data-theme="light"] body [data-open-trade],
html[data-theme="light"] body .button-ghost,
html[data-theme="light"] body .main-nav a,
html[data-theme="light"] body .showcase-badge,
html[data-theme="dark"] body [data-open-trade],
html[data-theme="dark"] body .button-ghost,
html[data-theme="dark"] body .main-nav a,
html[data-theme="dark"] body .showcase-badge {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
border-style: solid !important;
background: none !important;
box-shadow: none !important;
color: #4fa8ff !important;
}
/* per-button character kept in shape only */
html body .main-nav a { border-radius: 999px !important; }
html body .showcase-badge { border-radius: 10px !important; }
html body #showcase .showcase-copy [data-open-trade] { border-radius: 14px !important; }
html body #showcase .showcase-copy .button-ghost { border-radius: 12px !important; }
/* copy: fluid luxury typography, no balloon stroke, no absurd tilt */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 72px !important;
font-weight: 800 !important;
-webkit-text-stroke: 0 !important;
letter-spacing: 0.02em !important;
transform: none !important;
opacity: 0.92 !important;
}
html body #showcase .showcase-copy .live-queries,
html[data-theme="light"] body #showcase .showcase-copy .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy .live-queries {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 21px !important;
font-weight: 600 !important;
transform: none !important;
-webkit-text-stroke: 0 !important;
}
html body #showcase .showcase-copy .live-queries .lq-name {
-webkit-text-stroke: 0 !important;
}
/* part 228 - last stragglers: the double badge frame and the thick 3px
CTA frame from the character round are calmed to the solid hairline */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
border-style: solid !important;
color: #4fa8ff !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
border-style: solid !important;
color: #4fa8ff !important;
}
html[data-theme="light"] body #showcase .showcase-copy [data-open-trade],
html body #showcase .showcase-copy [data-open-trade] {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
color: #4fa8ff !important;
}
/* part 229 - the giant dashed frame at the top was the SECOND legacy
copy block (the trade preview). Borders that only dashed rules ever
drew are deleted site-wide now, decisively */
/* 1) the trade-preview copy block: frame gone completely */
html body #showcase .showcase-copy,
html[data-theme="light"] body #showcase .showcase-copy,
html[data-theme="dark"] body #showcase .showcase-copy {
border: 0 !important;
border-style: none !important;
border-radius: 0 !important;
padding: 0 !important;
transform: none !important;
width: auto !important;
max-width: none !important;
margin-inline: 0 auto !important;
}
/* 3) the places whose dashed was their only visible border / box: box deleted */
html body .empty-state,
html body .trade-empty,
html body #trade-board .trade-empty,
html body .modal-disclaimer,
html body #consent-drawer .consent-brand {
border: 0 !important;
box-shadow: none !important;
}
/* part 230 - recovery: the global border-style sweep is deleted from the
cascade; the two dashed-origin rules that are still wanted (the solid
hairline button voice) are re-armed explicitly, and every border that
was white-by-default is dead */
html body [data-open-trade],
html body .button-ghost,
html body .main-nav a,
html body .showcase-badge,
html[data-theme="light"] body [data-open-trade],
html[data-theme="light"] body .button-ghost,
html[data-theme="light"] body .main-nav a,
html[data-theme="light"] body .showcase-badge,
html[data-theme="dark"] body [data-open-trade],
html[data-theme="dark"] body .button-ghost,
html[data-theme="dark"] body .main-nav a,
html[data-theme="dark"] body .showcase-badge {
border-style: solid !important;
border-color: rgba(79, 168, 255, 0.55) !important;
border-width: 1.5px !important;
}
/* part 231 - torn sticky-notes: the title and the live description sit
on cut paper stickers with a ragged torn top edge - like the pad in
the reference; no dashed lines, no white frames */
/* --- title note: warm yellow cut paper --- */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
display: inline-block !important;
background: #ffe98f !important;
color: #1d3a52 !important;
opacity: 1 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 56px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.01em !important;
padding: 44px 46px 40px !important;
margin: 30px auto 6px !important;
border: 0 !important;
border-radius: 2px 2px 10px 10px !important;
transform: rotate(-2.2deg) !important;
clip-path: polygon(0 14px, 4% 5px, 9% 15px, 14% 4px, 20% 12px, 26% 3px, 32% 13px, 38% 5px, 44% 15px, 50% 6px, 56% 14px, 62% 4px, 68% 13px, 74% 5px, 80% 15px, 86% 4px, 92% 12px, 97% 6px, 100% 14px, 100% 100%, 0 100%);
box-shadow: 0 16px 34px rgba(4, 16, 30, 0.45) !important;
white-space: nowrap !important;
}
/* --- description note: soft mint cut paper, slightly offset --- */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: inline-block !important;
background: #cdeef9 !important;
color: #14344a !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
padding: 30px 30px 26px !important;
margin: 10px auto 24px !important;
border: 0 !important;
border-radius: 2px 2px 10px 10px !important;
transform: rotate(1.8deg) !important;
clip-path: polygon(0 12px, 6% 3px, 13% 13px, 21% 4px, 29% 14px, 37% 5px, 45% 13px, 53% 4px, 61% 13px, 69% 4px, 77% 14px, 85% 5px, 93% 13px, 100% 5px, 100% 100%, 0 100%);
box-shadow: 0 12px 26px rgba(4, 16, 30, 0.35) !important;
min-height: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #075985 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #17415c !important;
}
/* the copy stack centers its two notes */
html body #showcase .showcase-copy:has(> .live-queries) {
text-align: center !important;
}
/* part 232 - WhatsApp chat bubbles: paper torn edges replaced with
clean rounded chat bubbles; each incoming message pops in like a
chat message landing */
/* --- title bubble: user-style bubble anchored to the right --- */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
display: inline-block !important;
background: #155e63 !important;
color: #ffffff !important;
opacity: 1 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 44px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
padding: 30px 44px !important;
margin: 22px auto 10px !important;
border: 0 !important;
border-radius: 26px 26px 6px 26px !important;
clip-path: none !important;
transform: none !important;
box-shadow: 0 10px 26px rgba(0, 8, 14, 0.5) !important;
white-space: nowrap !important;
animation: waPopIn 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) both !important;
}
/* --- live description bubble: incoming-style bubble, left-aligned --- */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: inline-block !important;
background: #123038 !important;
color: #eef7f9 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
padding: 22px 30px !important;
margin: 6px auto 26px !important;
border: 0 !important;
border-radius: 26px 26px 26px 6px !important;
clip-path: none !important;
transform: none !important;
box-shadow: 0 8px 22px rgba(0, 8, 14, 0.4) !important;
min-height: 0 !important;
animation: waPopIn 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) both !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #8fd4e8 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #ffffff !important;
}
@keyframes waPopIn {
0% { opacity: 0; transform: translateY(16px) scale(0.88); }
60% { opacity: 1; transform: translateY(-3px) scale(1.02); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* part 233 - the WhatsApp typing indicator: three bouncing dots in a
small bubble, shown while the next asker is composing */
html body #showcase .live-queries .lq-typing {
display: inline-flex !important;
gap: 5px !important;
align-items: center !important;
background: #0d242b !important;
border-radius: 18px 18px 18px 6px !important;
padding: 12px 16px !important;
margin: 6px auto 26px !important;
box-shadow: 0 8px 22px rgba(0, 8, 14, 0.4) !important;
}
html body #showcase .live-queries .lq-typing i {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #8fd4e8 !important;
display: inline-block !important;
animation: waDot 1.1s ease-in-out infinite !important;
}
html body #showcase .live-queries .lq-typing i:nth-child(2) { animation-delay: 0.18s !important; }
html body #showcase .live-queries .lq-typing i:nth-child(3) { animation-delay: 0.36s !important; }
@keyframes waDot {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-5px); opacity: 1; }
}
/* part 234 - WhatsApp animations are cancelled entirely; the bubbles
become fixed chat cards, and the title gets a deep 3D perspective
locked solidly in place */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
animation: none !important;
transform: perspective(900px) rotateX(34deg) skewX(-7deg) scale(1.04) !important;
transform-style: preserve-3d !important;
font-size: 50px !important;
text-shadow: 1px 1px 0 #0b3a3e, 2px 2px 0 #0b3a3e, 3px 3px 0 #0a2f33, 4px 4px 0 #092a2e, 5px 5px 0 #082528, 6px 6px 0 #072023, 8px 8px 18px rgba(0, 8, 14, 0.55) !important;
line-height: 1.5 !important;
padding: 34px 46px 44px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
animation: none !important;
transform: none !important;
}
/* the typing-dots indicator is retired */
html body #showcase .live-queries .lq-typing {
display: none !important;
}
/* part 235 - the last visible motion is the blinking caret inside the
bubble (lqBlink) - it is killed now; the title grows +20px to 70px,
drops every shadow, and sits to the side instead of centered */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-caret,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-caret,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-caret {
animation: none !important;
opacity: 0 !important;
display: none !important;
}
/* title: huge, shadowless, start-aligned (to the side) */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 70px !important;
text-shadow: none !important;
animation: none !important;
display: block !important;
white-space: nowrap !important;
margin: 26px 0 10px auto !important;
text-align: start !important;
transform: perspective(900px) rotateX(34deg) skewX(-7deg) scale(1.04) !important;
}
/* the copy stack sides with the title, not centered */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
text-align: start !important;
align-items: flex-start !important;
}
/* part 236 - backgrounds of both bubbles are deleted; the title grows
huge and wears an aged, weathered look; the downward lean (rotateX
view from above) is cancelled so it stands facing the viewer */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
background: none !important;
box-shadow: none !important;
color: #d9cfb2 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 96px !important;
font-weight: 800 !important;
letter-spacing: 0.03em !important;
line-height: 1.15 !important;
padding: 0 !important;
margin: 20px 0 12px auto !important;
border-radius: 0 !important;
transform: none !important;
opacity: 0.94 !important;
filter: none !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}
/* the live description: bubble bg gone, quiet aged ink */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
color: #b9ab8d !important;
font-size: 21px !important;
transform: none !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #cbb98a !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .lq-text {
color: #b9ab8d !important;
}
/* part 237 - the logo treatment: the title is redrawn like the Mikmak 2
game logo - chunky white crayon letters with a thick playful outline */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
color: #ffffff !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 88px !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
-webkit-text-stroke: 0 !important;
text-shadow:
0 0 0 #2e5fa3,
3px 0 0 #2e5fa3, -3px 0 0 #2e5fa3, 0 3px 0 #2e5fa3, 0 -3px 0 #2e5fa3,
2px 2px 0 #2e5fa3, -2px 2px 0 #2e5fa3, 2px -2px 0 #2e5fa3, -2px -2px 0 #2e5fa3,
4px 4px 0 #2e5fa3, -4px 4px 0 #2e5fa3, 4px -4px 0 #2e5fa3, -4px -4px 0 #2e5fa3,
0 10px 24px rgba(0, 0, 0, 0.55) !important;
}
/* part 238 - the player chat restyle: each message sits in a wide flat
card like the Mikmak in-game chat log - pale paper, thin blue hairline,
rounded corners, timestamp on the far left, bold name on the right */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: block !important;
width: min(560px, 100%) !important;
margin: 14px 0 18px auto !important;
background: #fbfcff !important;
color: #3f5573 !important;
border: 1px solid #a9bfe8 !important;
border-radius: 14px !important;
padding: 18px 20px 20px !important;
box-shadow: 0 4px 14px rgba(4, 16, 30, 0.22) !important;
}
/* the message line becomes the card body */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
display: block !important;
}
/* bold navy name, right-aligned like the game log */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
display: block !important;
color: #1c2f4e !important;
font-weight: 800 !important;
font-size: 16px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #3f5573 !important;
font-size: 14.5px !important;
}
/* the timestamp rides the far left edge, faint like the game */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries::after {
content: "13:21 17/08/2026" !important;
position: absolute !important;
inset-inline-end: auto !important;
left: 18px !important;
top: 22px !important;
color: #8ea1c0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
position: relative !important;
}
/* the avatar placeholder chip on the far side, like the player icon */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-avatar {
display: none !important;
}
/* part 239 - the game-log detail: real time+date stamp per message,
a running number under it on the left, and the player avatar chip
beside the name on the right */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries::after,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries::after {
content: var(--lq-stamp, "13:21 17/08/2026") !important;
position: absolute !important;
left: 18px !important;
top: 20px !important;
color: #8ea1c0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries::before,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries::before {
content: var(--lq-num, "54") !important;
position: absolute !important;
left: 18px !important;
bottom: 18px !important;
color: #aab9d4 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* avatar chip rides the far right beside the name */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
font-size: 19px !important;
border-radius: 50% !important;
background: linear-gradient(160deg, #e8f1ff, #c8d8f5) !important;
border: 1px solid #a9bfe8 !important;
box-shadow: 0 2px 8px rgba(4, 16, 30, 0.25) !important;
position: absolute !important;
top: 14px !important;
right: 16px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-inline-end: 46px !important;
}
/* part 240 - the log chips are real DOM elements now (inline styles and
pseudo-content were unreliable): stamp top-left, number bottom-left,
avatar chip beside the name */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
position: absolute !important;
left: 18px !important;
top: 20px !important;
color: #8ea1c0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
position: absolute !important;
left: 18px !important;
bottom: 16px !important;
color: #aab9d4 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* part 241 - real Mikmak profile pictures replace the emoji chips */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center top !important;
background: #dfe9fb !important;
border: 2px solid #ffffff !important;
box-shadow: 0 2px 8px rgba(4, 16, 30, 0.35) !important;
font-size: 0 !important;
position: absolute !important;
top: 12px !important;
right: 14px !important;
}
/* part 242 - the chat card rebuilt to match the game log exactly:
full-width pale card, name + avatar on one top row at the right,
the message on its own line beneath, time top-left and count
bottom-left with real clearance so nothing collides */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: block !important;
width: 100% !important;
max-width: 620px !important;
box-sizing: border-box !important;
background: #f7f9fe !important;
border: 1.5px solid #9db4dd !important;
border-radius: 12px !important;
padding: 20px 74px 34px 108px !important;
margin: 18px 0 20px auto !important;
text-align: right !important;
min-height: 96px !important;
box-shadow: 0 6px 18px rgba(4, 16, 30, 0.28) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding: 0 !important;
text-align: right !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
display: block !important;
color: #16324f !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
display: block !important;
color: #41597a !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.55 !important;
margin-top: 9px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
left: 20px !important;
top: 22px !important;
color: #8ba0c0 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
left: 20px !important;
bottom: 16px !important;
color: #a7b7d3 !important;
font-size: 13px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
top: 14px !important;
right: 16px !important;
border: 2px solid #c9d8f0 !important;
}
/* part 243 - breathing room: the stamp column no longer touches the
message text (left gutter widened), name sits closer to its avatar */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
padding: 20px 72px 34px 126px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-inline-end: 0 !important;
}
/* part 244 - exact game-log geometry: time top-left, number bottom-left,
name + avatar top-right, and the message on a full-width line beneath
them (no cramped left gutter, no clipped words) */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
padding: 18px 74px 34px 20px !important;
min-height: 104px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
display: block !important;
text-align: right !important;
padding: 30px 0 0 0 !important;
min-height: 46px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
position: absolute !important;
top: 18px !important;
right: 74px !important;
margin: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
display: inline !important;
margin: 0 !important;
white-space: normal !important;
overflow: visible !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
left: 20px !important;
top: 20px !important;
white-space: nowrap !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
left: 20px !important;
bottom: 15px !important;
}
/* part 245 - the name must sit beside its avatar, and the message line
begins exactly under the name row - reference spacing */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
right: 76px !important;
top: 20px !important;
max-width: calc(100% - 210px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-top: 34px !important;
}
/* part 246 - match the blog log proportions: the card grows wider than
the text column (extra room pulled from the quiet left side), so the
message has the same long, calm line as the game chat */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
width: calc(100% + 84px) !important;
margin: 18px -84px 20px auto !important;
max-width: none !important;
}
/* part 247 - the card rectangle melts into the page: its own fill is
gone (the dark background shows through), and the whole unit is
enlarged - wider card, bigger message, name and avatar */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: none !important;
width: calc(100% + 116px) !important;
margin: 20px -116px 24px auto !important;
min-height: 138px !important;
padding: 20px 84px 38px 22px !important;
border: 1.5px solid rgba(122, 158, 216, 0.55) !important;
box-shadow: none !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-top: 40px !important;
min-height: 56px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
font-size: 20px !important;
right: 86px !important;
top: 22px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
font-size: 17.5px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
top: 14px !important;
right: 18px !important;
box-shadow: 0 3px 10px rgba(4, 16, 30, 0.45) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
font-size: 13px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
font-size: 14px !important;
}
/* part 248 - theme-proof avatar sizing (the dark theme rule outranks
the base selector) */
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
top: 14px !important;
right: 18px !important;
border: 2px solid rgba(200, 216, 240, 0.75) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
right: 86px !important;
}
/* part 249 - the active theme here is LIGHT: the avatar enlargement and
the dark-text contrast must win in the light theme too */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
top: 14px !important;
right: 18px !important;
border: 2px solid #c9d8f0 !important;
box-shadow: 0 3px 10px rgba(4, 16, 30, 0.3) !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: none !important;
width: calc(100% + 116px) !important;
min-height: 138px !important;
padding: 20px 84px 38px 22px !important;
border: 1.5px solid rgba(122, 158, 216, 0.55) !important;
box-shadow: none !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #16324f !important;
font-size: 20px !important;
right: 86px !important;
top: 22px !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #41597a !important;
font-size: 17.5px !important;
}
/* part 250 - frosted glass card: translucent plate with a real blur
behind it, sky-blue player names, orange stamps and counters */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: rgba(255, 255, 255, 0.07) !important;
backdrop-filter: blur(14px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
border: 1.5px solid rgba(160, 200, 255, 0.35) !important;
border-radius: 16px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 26px rgba(2, 10, 24, 0.35) !important;
}
/* names - sky blue */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #4fc3f7 !important;
text-shadow: 0 1px 6px rgba(79, 195, 247, 0.35) !important;
}
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #4fc3f7 !important;
}
/* message stays soft white */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: rgba(233, 244, 255, 0.92) !important;
}
/* timestamps and the running number - orange */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
color: #ff9a3d !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
color: #ff9a3d !important;
}
/* part 251 - one composed section instead of scattered pieces:
the legacy "exchange" strip at the top is removed, the title, the
glass chat card and the CTA share one wide column with identical
edges, and the featured items rise to meet the text */
html body #showcase .showcase-pair,
html[data-theme="light"] body #showcase .showcase-pair,
html[data-theme="dark"] body #showcase .showcase-pair {
display: none !important;
}
/* one shared column width for title + card + CTA */
html body #showcase .showcase-copy:has(> .live-queries) h3 {
width: calc(100% + 116px) !important;
margin: 8px 0 6px auto !important;
}
/* CTA: pulled into the same row system, right under the card */
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
display: flex !important;
width: calc(100% + 116px) !important;
margin: 10px 0 0 auto !important;
justify-content: center !important;
align-items: center !important;
min-height: 54px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(12px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
border: 1.5px solid rgba(160, 200, 255, 0.4) !important;
border-radius: 14px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
/* the featured cluster rises so both columns start at the same line */
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin-top: -96px !important;
}
/* badge docks to the top edge of the featured cluster like a tab */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
position: absolute !important;
margin: 0 !important;
}
/* part 252 - cohesion pass: identical 100% column for all three pieces
(no off-screen spill), media column top aligned with the copy, and
the gaps tightened so title - card - CTA read as one unit */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
width: 100% !important;
margin: 14px 0 0 auto !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3 {
width: 100% !important;
text-align: start !important;
margin: 4px 0 2px auto !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
width: 100% !important;
margin: 12px 0 0 auto !important;
justify-content: center !important;
}
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin-top: -20px !important;
}
/* part 253 - final union: the item cluster and the text block start on
the exact same line */
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin-top: 28px !important;
}
/* part 254 - the showcase earns its height: a composed, centered stage
instead of a thin band - deep top/bottom breathing room, the two
columns vertically centered, and ordered rhythm inside the text
column (title, card, CTA with even spacing) */
html body #showcase .showcase-block,
html[data-theme="light"] body #showcase .showcase-block,
html[data-theme="dark"] body #showcase .showcase-block {
min-height: 620px !important;
padding-block: 96px 120px !important;
align-items: center !important;
align-content: center !important;
column-gap: 56px !important;
}
/* even vertical rhythm inside the text column */
html body #showcase .showcase-copy:has(> .live-queries) h3 {
margin: 0 0 18px auto !important;
text-align: start !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
margin: 0 0 16px auto !important;
min-height: 148px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
margin: 0 0 0 auto !important;
min-height: 58px !important;
}
/* the featured cluster keeps its own quiet counterweight on the side */
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin: 0 !important;
}
/* part 255 - professional pass over both circled clusters */
/* --- left cluster: calm editorial column --- */
/* title: tighter, a touch smaller, premium spacing */
html body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 64px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: 0.01em !important;
padding: 6px 4px 2px !important;
}
/* chat reads like a proper widget: meta row up top, message centered,
counter as a soft pill instead of a bare number */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(150, 190, 240, 0.28) !important;
min-height: 150px !important;
padding: 16px 84px 44px 20px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
font-size: 18px !important;
top: 20px !important;
right: 88px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
top: 13px !important;
right: 16px !important;
border: 1px solid rgba(180, 210, 250, 0.45) !important;
box-shadow: 0 4px 12px rgba(2, 10, 24, 0.4) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-top: 52px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
font-size: 16.5px !important;
font-weight: 500 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
top: 20px !important;
left: 20px !important;
font-size: 12px !important;
letter-spacing: 0.04em !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
bottom: 12px !important;
left: 20px !important;
font-size: 11.5px !important;
padding: 3px 10px !important;
border-radius: 999px !important;
background: rgba(255, 154, 61, 0.12) !important;
color: #ffb266 !important;
border: 1px solid rgba(255, 154, 61, 0.28) !important;
}
/* CTA: confident filled action, not another glass sheet */
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
background: linear-gradient(180deg, #3f8cff, #2563eb) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 0 !important;
border-radius: 13px !important;
color: #ffffff !important;
font-size: 19px !important;
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
/* --- right cluster: curated shelf instead of floating puddles --- */
html body #showcase .showcase-media.is-grid .showcase-thumbs,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 26px 30px !important;
justify-items: center !important;
align-items: center !important;
padding: 34px 30px 30px !important;
background: rgba(255, 255, 255, 0.035) !important;
backdrop-filter: blur(10px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
border: 1px solid rgba(150, 190, 240, 0.22) !important;
border-radius: 22px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
grid-auto-flow: row !important;
position: relative !important;
}
/* calm, deliberate tilts and a shared drop shadow */
html body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs > img {
width: min(190px, 100%) !important;
transform: none !important;
filter: drop-shadow(0 14px 22px rgba(2, 10, 24, 0.5)) !important;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs > img:nth-child(odd) {
transform: rotate(-3deg) !important;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs > img:nth-child(even) {
transform: rotate(2.6deg) !important;
}
/* the depth ghost layer is silent */
html body #showcase .showcase-media.is-grid .showcase-depth,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-depth {
display: none !important;
}
/* badge becomes a compact floating chip anchored to the panel */
html body #showcase .showcase-media.is-grid .showcase-badge,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-badge {
right: auto !important;
top: -16px !important;
inset-inline-start: 24px !important;
font-size: 15px !important;
padding: 6px 14px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #3f8cff, #2563eb) !important;
border: 0 !important;
color: #ffffff !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.4) !important;
}
/* part 256 - theme-proof overrides: both light and dark variants carry
the professional sizing, and the title follows */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 64px !important;
line-height: 1.1 !important;
}
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html[data-theme="dark"] body #showcase .showcase-media.is-grid .showcase-thumbs > img {
width: min(196px, 100%) !important;
height: auto !important;
}
/* part 257 - stable shelf: fixed item size so the panel keeps its
proportions even before the lazy images decode */
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html[data-theme="dark"] body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html body #showcase .showcase-media.is-grid .showcase-thumbs > img {
width: 190px !important;
height: 190px !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs {
min-height: 420px !important;
}
/* part 258 - the user ground: pure black replaces the deep-navy wash,
and every section that painted the blue gradient follows it; the
faint white grid lines stay as structure */
html body {
background-color: #000000 !important;
}
html[data-theme="light"] body {
background-color: #000000 !important;
}
html[data-theme="dark"] body {
background-color: #000000 !important;
}
html body #showcase,
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(255, 255, 255, 0) 1px 141px) !important;
background-color: #000000 !important;
}
html body .shell,
html body #showcase .shell {
background: rgba(255, 255, 255, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* part 259 - correction: the user meant WHITE (#FFFFFF) ג€” the whole
ground goes white, and the grid lines flip to a soft dark hairline
so the structure stays visible on the light paper */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-color: #ffffff !important;
}
html body #showcase,
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(11, 22, 41, 0.08) 0 1px, rgba(11, 22, 41, 0) 1px 141px) !important;
background-color: #ffffff !important;
}
html body #showcase .shell,
html body .shell {
background: rgba(17, 34, 64, 0.04) !important;
box-shadow: inset 0 0 0 1px rgba(17, 34, 64, 0.14) !important;
}
/* the deep-navy inks that were tuned for the dark ground now flip to
dark ink on white */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3 {
color: #10203a !important;
text-shadow: 0 2px 8px rgba(20, 40, 80, 0.28) !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3 {
/* logo-like: white letters with a navy outline still read on white */
color: #ffffff !important;
text-shadow:
3px 0 0 #2e5fa3, -3px 0 0 #2e5fa3, 0 3px 0 #2e5fa3, 0 -3px 0 #2e5fa3,
2px 2px 0 #2e5fa3, -2px 2px 0 #2e5fa3, 2px -2px 0 #2e5fa3, -2px -2px 0 #2e5fa3,
4px 4px 0 #2e5fa3, -4px 4px 0 #2e5fa3, 4px -4px 0 #2e5fa3, -4px -4px 0 #2e5fa3,
0 10px 22px rgba(20, 40, 80, 0.35) !important;
}
/* part 260 - white-paper contrast: the chat ink and glass edges flip to
dark so nothing vanishes on the white ground */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: rgba(20, 40, 80, 0.04) !important;
border: 1px solid rgba(17, 34, 64, 0.22) !important;
box-shadow: 0 8px 24px rgba(17, 34, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #2b4260 !important;
}
/* part 261 - the community-volunteers quote block is removed (markup too);
the catalog below goes black as the user wants, so its type flips to
light ink and its chrome to light hairlines */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog {
background-color: #000000 !important;
background-image: none !important;
}
html[data-theme="light"] body #catalog,
html body #catalog {
--line: rgba(255, 255, 255, 0.16);
--line-strong: rgba(255, 255, 255, 0.3);
color: #e8eefb !important;
}
html[data-theme="light"] body #catalog .shell,
html body #catalog .shell {
background: rgba(255, 255, 255, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="light"] body #catalog .catalog-display,
html[data-theme="dark"] body #catalog .catalog-display,
html body #catalog .catalog-display {
color: #ffffff !important;
}
html[data-theme="light"] body #catalog .catalog-kicker,
html[data-theme="dark"] body #catalog .catalog-kicker,
html body #catalog .catalog-kicker {
color: #7fb8ff !important;
}
html[data-theme="light"] body #catalog .section-lead,
html[data-theme="dark"] body #catalog .section-lead,
html body #catalog .section-lead {
color: #b9c8dd !important;
}
html[data-theme="light"] body #catalog .catalog-stat span,
html[data-theme="dark"] body #catalog .catalog-stat span,
html body #catalog .catalog-stat span {
color: #93a7c4 !important;
}
html[data-theme="light"] body #catalog .catalog-stat strong,
html[data-theme="dark"] body #catalog .catalog-stat strong,
html body #catalog .catalog-stat strong {
color: #ffffff !important;
}
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field,
html body #catalog .search-field {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #e8eefb !important;
}
html[data-theme="light"] body #catalog input::placeholder,
html body #catalog input::placeholder {
color: #7d92b3 !important;
}
html[data-theme="light"] body #catalog .filter-pill,
html[data-theme="dark"] body #catalog .filter-pill,
html body #catalog .filter-pill {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #dfe8f8 !important;
}
html[data-theme="light"] body #catalog .filter-pill.is-active,
html body #catalog .filter-pill.is-active {
background: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
}
/* part 262 - the black rounded catalog panel sits on a white page: the
section itself is cleared (white shows behind its corners), the black
becomes the rounded .shell plate, and everything under the catalog
joins the white ground */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog {
background-color: transparent !important;
background-image: none !important;
}
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-color: #000000 !important;
background-image: none !important;
border-radius: 96px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background-color: #ffffff !important;
background-image: none !important;
}
html body #trade .shell,
html[data-theme="light"] body #trade .shell,
html[data-theme="dark"] body #trade .shell {
background: rgba(17, 34, 64, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(17, 34, 64, 0.12) !important;
border-radius: 0 !important;
}
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
background-image: none !important;
background-color: transparent !important;
}
/* part 263 - the page-wide deep-navy sweep under sections is retired:
the white ground now rules the full page (the catalog black plate is
untouched), and the scrollbar becomes a short quiet glass pill */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image:
repeating-linear-gradient(90deg, rgba(17, 34, 64, 0.07) 0 1px, rgba(17, 34, 64, 0) 1px 141px),
linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
background-attachment: scroll, scroll !important;
background-size: auto, auto !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
background-color: #ffffff !important;
}
/* glass scrollbar: no track, a short translucent thumb that takes its
tone from whatever is behind it */
::-webkit-scrollbar {
width: 7px !important;
height: 7px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(90, 110, 140, 0.28) !important;
border-radius: 999px !important;
min-height: 42px !important;
-webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
backdrop-filter: blur(6px) saturate(1.1) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(90, 110, 140, 0.45) !important;
}
::-webkit-scrollbar-corner {
background: transparent !important;
}
html {
scrollbar-width: thin !important;
scrollbar-color: rgba(90, 110, 140, 0.28) transparent !important;
}
/* part 264 - big text pass matched to the reference Mikmod site:
the Assistant font, ink #111 body copy, navy #1a233a headings,
title-blue #3a7bd5 links, soft gray secondary text. The black
catalog plate keeps its own tuned inks (untouched). */
/* --- the font itself, theme-proof --- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
font-family: "Assistant", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
}
/* --- body copy: ink #111 on the white paper --- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
color: #111111 !important;
}
html body p:not(#catalog p):not(#showcase p),
html[data-theme="light"] body p:not(#catalog p):not(#showcase p) {
color: #3a3a3a !important;
}
/* showcase chat keeps its tuned message ink; other copy joins the pass */
html body #trade p,
html body #trade li,
html body .site-rails p,
html body footer p {
color: #3a3a3a !important;
}
/* --- headings: deep navy like the reference --- */
html body h1:not(#catalog h1):not(#showcase h1),
html body h2:not(#catalog h2):not(#showcase h2),
html body h3:not(#catalog h3),
html[data-theme="light"] body h2:not(#catalog h2),
html[data-theme="dark"] body h2:not(#catalog h2) {
color: #1a233a !important;
font-weight: 800 !important;
}
/* the reference hero title is title-blue #3a7bd5 */
html body .hero-band h1,
html body .hero-band h2,
html[data-theme="light"] body .hero-band h1,
html[data-theme="dark"] body .hero-band h1 {
color: #3a7bd5 !important;
}
/* --- links: title blue, like the reference footer --- */
html body a:not(#catalog a):not(#showcase a) {
color: #3a7bd5 !important;
}
/* --- small labels / kickers: ink, uppercase feel preserved by existing rules --- */
html body .section-head small,
html body footer .footer-copy,
html body footer .footer-disclaimer {
color: #7a7a7a !important;
}
/* --- selection tint like the reference --- */
::selection {
background: rgba(179, 142, 68, 0.25) !important;
}
/* part 265 - the hero headline takes the reference title-blue */
html body .hero-band h1,
html body .hero-band h2,
html body .hero-band h3,
html[data-theme="light"] body .hero-band h1,
html[data-theme="light"] body .hero-band h2,
html[data-theme="dark"] body .hero-band h1,
html[data-theme="dark"] body .hero-band h2 {
color: #3a7bd5 !important;
}
/* part 266 - same-shape higher-specificity fix: the .hero nested
headline also takes title-blue */
html body .hero-band .hero h1,
html body .hero-band .hero h2,
html body .hero-band .hero-copy h1,
html body .hero-band .hero-copy h2,
html[data-theme="light"] body .hero-band .hero h1,
html[data-theme="dark"] body .hero-band .hero h1 {
color: #3a7bd5 !important;
}
/* part 267 - specificity parity: the :not(#id) navy rules outrank plain
blue rules, so the blue rules carry the same :not guards */
html body .hero-band .hero h1:not(#catalog h1):not(#showcase h1),
html body .hero-band .hero h2:not(#catalog h2):not(#showcase h2),
html body .hero-band h1:not(#catalog h1):not(#showcase h1),
html[data-theme="light"] body .hero-band .hero h1:not(#catalog h1):not(#showcase h1),
html[data-theme="dark"] body .hero-band .hero h1:not(#catalog h1):not(#showcase h1) {
color: #3a7bd5 !important;
}
/* and the sibling headings (not hero, not catalog) go navy */
html body h2:not(#catalog h2):not(#showcase h2):not(.hero-band h2),
html body h3:not(#catalog h3):not(#showcase h3) {
color: #1a233a !important;
}
/* part 268 - the accent span inside the hero headline joins the blue */
html body .hero-band .hero h1 .accent-text:not(#catalog .accent-text),
html body .hero-band .hero h1 span.accent-text,
html[data-theme="light"] body .hero-band .hero h1 .accent-text,
html[data-theme="dark"] body .hero-band .hero h1 .accent-text {
color: #3a7bd5 !important;
}
/* part 269 - user pass: no more grid squares, header logo square off,
hero stats plain text, divider before footer off, consent tab readable */
/* --- the grid squares are removed everywhere --- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image: none !important;
}
html body #showcase,
html body .sky-frame,
html[data-theme="light"] body #showcase,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body #showcase,
html[data-theme="dark"] body .sky-frame {
background-image: none !important;
}
/* --- header: no logo square, the brand rests as text only --- */
html body .site-header .brand .brand-mark,
html body header .brand-mark {
display: none !important;
}
/* --- hero stats: the square background behind the numbers goes --- */
html body .hero-stats,
html body .hero-stats > div,
html body .hero-lead,
html[data-theme="light"] body .hero-stats,
html[data-theme="dark"] body .hero-stats {
background: none !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* --- the little side consent tab: the powered-by line sat absolutely
on top of the paragraph; now it flows below like normal text --- */
html body #consent-drawer .consent-brand {
position: static !important;
display: block !important;
margin: 12px 0 4px !important;
opacity: 0.75 !important;
}
html body #consent-drawer .consent-card {
padding-bottom: 18px !important;
}
html body #consent-drawer .consent-card p {
margin-bottom: 6px !important;
}
/* --- the divider between the last section and the footer goes --- */
html body .site-footer .footer-flare,
html body .site-footer .site-wave,
html body .site-footer .site-wave .wave-layer,
html body .site-footer .footer-flare i {
display: none !important;
}
html body .site-footer,
html body .site-footer .footer-bottom,
html[data-theme="light"] body .site-footer {
border-top: 0 !important;
background-image: none !important;
}
/* part 270 - corrections from the marked screenshot:
/* --- (X) the rounded panel behind the hero text is removed --- */
html body .hero-band .shell,
html body .hero-band .shell.hero,
html[data-theme="light"] body .hero-band .shell,
html[data-theme="dark"] body .hero-band .shell {
background: none !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* --- (top circle) nav pills become plain text: no pill background,
no border, no radius - only the words in their current blue --- */
html body .main-nav a,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
background: none !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #3a7bd5 !important;
padding: 2px 4px !important;
}
/* --- (side circle) the brand picture is back, but without the square
frame around it: image only, transparent, no border or fill --- */
html body .site-header .brand .brand-mark,
html body header .brand-mark {
display: block !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body .site-header .brand .brand-mark img {
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 40px !important;
height: 40px !important;
}
/* part 271 - the brand picture returns to its former size (the clamp
from the previous pass), and the nav links lose even the subtle
motion - plain text only */
html body .site-header .brand .brand-mark img,
html body header .brand-mark img {
width: clamp(92px, 10vw, 132px) !important;
height: auto !important;
object-fit: contain !important;
}
html body .main-nav a,
html body .main-nav a:hover,
html body .main-nav a:focus,
html body .main-nav a:active,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
transition: none !important;
animation: none !important;
transform: none !important;
}
/* part 272 - nav links: absolutely nothing happens on hover - no flash
background, no underline, no color shift. And a little air between
the words */
html body .main-nav a,
html body .main-nav a:hover,
html body .main-nav a:focus,
html body .main-nav a:active,
html body .main-nav a::before,
html body .main-nav a::after,
html[data-theme="light"] body .main-nav a,
html[data-theme="light"] body .main-nav a:hover,
html[data-theme="dark"] body .main-nav a,
html[data-theme="dark"] body .main-nav a:hover,
html body .site-header .main-nav a,
html body .site-header .main-nav a:hover {
background: none !important;
background-image: none !important;
box-shadow: none !important;
text-decoration: none !important;
color: #3a7bd5 !important;
transition: none !important;
animation: none !important;
}
html body .main-nav a::before,
html body .main-nav a::after,
html body .site-header .main-nav a::before,
html body .site-header .main-nav a::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
/* breathing room between the words */
html body .main-nav,
html[data-theme="light"] body .main-nav,
html[data-theme="dark"] body .main-nav {
gap: 26px !important;
}
/* part 273 - the nav row moves to the top-center of the header,
keeping its gaps */
html body .site-header .shell.header-inner,
html body .header-inner {
position: relative !important;
}
html body .site-header .main-nav,
html[data-theme="light"] body .site-header .main-nav,
html[data-theme="dark"] body .site-header .main-nav {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: 50% !important;
translate: 0 -50% !important;
margin: 0 !important;
align-self: auto !important;
}
/* part 274 - the seam between the browser mockup and the games column
becomes a straight line: the 16px radii that curved both inner edges
are squared off */
html body .win-main,
html body .win-sidebar,
html[data-theme="light"] body .win-main,
html[data-theme="light"] body .win-sidebar,
html[data-theme="dark"] body .win-main,
html[data-theme="dark"] body .win-sidebar {
border-radius: 0 !important;
}
html body .win-main .win-body,
html body .win-content {
border-radius: 0 !important;
}
/* part 275 - the separator lines at the tail of the site go away:
around the trade board, under the trade section, and above/inside
the footer */
html body #trade,
html body #trade .trade-board,
html body #trade .trade-column,
html body #trade .trade-column-head,
html body #trade .trade-summary,
html body .band-plain,
html body .site-rails,
html body .site-rails .band,
html[data-theme="light"] body #trade,
html[data-theme="light"] body .band-plain {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body .site-footer,
html body .site-footer .footer-cols,
html body .site-footer .footer-bottom,
html body .site-footer .footer-col {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* part 276 - footer band reaches the page edges, and the black strip
above the catalog title becomes blue */
html body .site-footer,
html[data-theme="light"] body .site-footer,
html[data-theme="dark"] body .site-footer {
background-color: rgba(17, 34, 64, 0.04) !important;
padding: 0 !important;
}
html body .site-footer .footer-cols,
html body .site-footer .footer-bottom {
background-color: transparent !important;
margin: 0 auto !important;
}
/* blue cap over the black catalog plate, above kicker */
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-image: linear-gradient(180deg, #2563eb 0px, #2563eb 158px, #000000 158px, #000000 100%) !important;
background-color: #000000 !important;
}
/* kicker stays visible on the blue */
html body #catalog .catalog-kicker {
color: #ffffff !important;
}
/* part 277 - the top corners of the black catalog plate get the same
clear rounding as the blue cap above the kicker: enforced late */
html body section#catalog .shell,
html[data-theme="light"] body section#catalog .shell,
html[data-theme="dark"] body section#catalog .shell,
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
border-radius: 140px 140px 96px 96px !important;
overflow: hidden !important;
}
/* nothing paints over the curve */
html body section#catalog,
html body #catalog {
border-radius: 140px 140px 96px 96px !important;
}
/* part 278 - the blue band becomes its own rounded card, and the black
catalog plate opens with its own rounded top corners beneath it */
html body .catalog-cap,
html[data-theme="light"] body .catalog-cap,
html[data-theme="dark"] body .catalog-cap {
height: 158px !important;
background: #2563eb !important;
border-radius: 140px 140px 0 0 !important;
}
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-image: none !important;
background-color: #000000 !important;
border-radius: 110px 110px 96px 96px !important;
padding-top: 46px !important;
margin-top: 0 !important;
}
html body #catalog .catalog-cap + .shell {
margin-top: 0 !important;
}
/* part 279 - the area behind the catalog plate (the white wedges around
its rounded corners) turns blue, matching the cap */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog {
background-color: #2563eb !important;
background-image: none !important;
}
/* part 280 - scrollbar redesign: ultra thin, invisible track, dark gray
capsule thumb */
::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
background: transparent !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(35, 43, 58, 0.62) !important;
border-radius: 999px !important;
min-height: 36px !important;
border: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
background: rgba(35, 43, 58, 0.86) !important;
}
html {
scrollbar-width: thin !important;
scrollbar-color: rgba(35, 43, 58, 0.62) transparent !important;
}
/* part 281 - scrollbar exactly per the user CSS snippet */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
::-webkit-scrollbar-corner {
background: transparent !important;
}
* {
scrollbar-width: thin !important;
scrollbar-color: #333333 transparent !important;
}
/* part 282 - keep the html color pair in sync with the thumb */
html {
scrollbar-color: #333333 transparent !important;
}
/* part 283 - block: hide the up/down arrow buttons of the scrollbar */
::-webkit-scrollbar-button {
display: none !important;
height: 0 !important;
width: 0 !important;
}
::-webkit-scrollbar {
width: 6px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
/* part 284 - final scrollbar state: nothing but a bare dark capsule;
no track, no corner, no piece, no buttons, in every corner case */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-track-piece {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
::-webkit-scrollbar-thumb:hover:active {
background: #333333 !important;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment {
display: none !important;
height: 0 !important;
width: 0 !important;
background: transparent !important;
background-image: none !important;
}
::-webkit-scrollbar-corner {
background: transparent !important;
}
::-webkit-resizer {
background: transparent !important;
}
html {
scrollbar-width: thin !important;
scrollbar-color: #333333 transparent !important;
}
/* part 285 - critical fix: scrollbar-width/scrollbar-color (the Firefox
pair) make Chromium ignore ALL ::-webkit-scrollbar rules and fall back
to the native arrows scrollbar. Both go back to auto */
html,
* {
scrollbar-width: auto !important;
scrollbar-color: auto !important;
}
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment {
display: none !important;
height: 0 !important;
width: 0 !important;
background: transparent !important;
background-image: none !important;
}
::-webkit-resizer {
background: transparent !important;
}
/* part 286 - scrollbar: the reserved column paints nothing at all, and
the thumb itself becomes glass */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(120, 140, 170, 0.35) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
backdrop-filter: blur(8px) saturate(1.2) !important;
border-radius: 999px !important;
border: 0 !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(120, 140, 170, 0.55) !important;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment {
display: none !important;
height: 0 !important;
width: 0 !important;
background: transparent !important;
background-image: none !important;
}
/* part 287 - content reclaims the reserved scrollbar strip: the body is
widened by exactly the scrollbar width (6px) and paints underneath the
transparent track; overflow-x guards against sideways drift */
html,
html body {
overflow-x: hidden !important;
}
html body {
width: calc(100% + 6px) !important;
}
/* part 288 - the direct page wrappers also paint under the scrollbar */
html body main,
html body main > section,
html body .site-footer,
html body .sky-frame,
html[data-theme="light"] body main {
width: calc(100% + 6px) !important;
}
/* part 289 - revert the per-section widening (it distorted the layout);
keep only the body-wide reclaim so the strip paints with the page */
html body main,
html body main > section,
html body .site-footer,
html body .sky-frame,
html[data-theme="light"] body main {
width: auto !important;
}
html body {
width: calc(100% + 6px) !important;
}
/* part 290 - RTL shift: the widened blocks sit 6px too far left; nudge
them back so their right edge reaches the window edge */
html body main,
html body #catalog,
html body .sky-frame,
html body .site-footer,
html body #showcase {
margin-left: 6px !important;
}
/* part 291 - correct RTL reclaim: pull each band's start edge (right, in
RTL) into the reserved scrollbar strip instead of widening */
html body,
html body main,
html body main > section,
html body .sky-frame,
html body .site-footer,
html body .site-rails {
width: auto !important;
margin-right: -6px !important;
}
html body .site-rails {
margin-right: 26px !important;
}
html body .site-rails.is-tail {
margin-right: 26px !important;
}
/* part 292 - cancel the earlier left-nudge; only the right pull counts */
html body main,
html body #catalog,
html body .sky-frame,
html body .site-footer,
html body #showcase,
html body main > section {
margin-left: 0 !important;
margin-right: -6px !important;
}
/* part 293 - native scrollbar goes to width zero: content spans the full
window; the glass thumb is drawn by app.v6.js instead */
::-webkit-scrollbar,
::-webkit-scrollbar:horizontal {
width: 0 !important;
height: 0 !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner,
::-webkit-resizer {
display: none !important;
}
/* part 294 - undo the margin tricks from the scrollbar-reserve era */
html body,
html body main,
html body main > section,
html body .sky-frame,
html body .site-footer,
html body .site-rails {
margin-right: 0 !important;
margin-left: 0 !important;
width: auto !important;
}
/* part 295 - the footer trade-check button loses the pill/wave voice:
plain text link like the rest of the footer, no border, no pseudo
waves, no animation */
html body .footer-col button[data-open-trade],
html[data-theme="light"] body .footer-col button[data-open-trade],
html[data-theme="dark"] body .footer-col button[data-open-trade] {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: inherit !important;
font: inherit !important;
cursor: pointer !important;
padding: 0 !important;
border-radius: 0 !important;
}
html body .footer-col button[data-open-trade],
html body .footer-col button[data-open-trade]:hover,
html body .footer-col button[data-open-trade]:active,
html body .footer-col button[data-open-trade]:focus {
animation: none !important;
transition: none !important;
}
html body .footer-col button[data-open-trade]::before,
html body .footer-col button[data-open-trade]::after,
html body .footer-col button[data-open-trade]:hover::before,
html body .footer-col button[data-open-trade]:hover::after {
content: none !important;
display: none !important;
animation: none !important;
}
html body .footer-col button[data-open-trade]:hover {
background: transparent !important;
}
html body .footer-col button[data-open-trade] > * {
transform: none !important;
}
/* part 296 - catalog area cleanup: remove the dividing line above the
footer band, delete the kicker line above the big heading, and shrink
the oversized display heading */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog,
html body #catalog::after,
html body #catalog .shell::after {
border-bottom: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .catalog-body-sep,
html body .catalog-sep,
html body #catalog hr {
display: none !important;
}
html body .catalog-kicker,
html[data-theme="light"] body .catalog-kicker,
html[data-theme="dark"] body .catalog-kicker {
display: none !important;
}
html body .catalog-display,
html[data-theme="light"] body .catalog-display,
html[data-theme="dark"] body .catalog-display {
font-size: 40px !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}
html body .catalog-display em,
html body .catalog-display br {
line-height: inherit !important;
}
/* part 297 - the hairline above the footer comes from the tail rails
pseudo element - remove it entirely and tighten the gap between the
trade band and the footer */
html body .site-rails.is-tail::after,
html[data-theme="light"] body .site-rails.is-tail::after,
html[data-theme="dark"] body .site-rails.is-tail::after {
border: 0 !important;
height: 0 !important;
content: none !important;
display: none !important;
}
html body .site-rails.is-tail::before {
border: 0 !important;
box-shadow: none !important;
}
html body #trade {
padding-bottom: 26px !important;
}
html body main {
padding-bottom: 0 !important;
}
/* part 298 - item cards become glass like the scroll thumb: translucent
blue tint, backdrop blur, no border, soft capsule radius */
html body .item-card,
html[data-theme="light"] body .item-card,
html[data-theme="dark"] body .item-card {
background: rgba(58, 123, 213, 0.16) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
backdrop-filter: blur(12px) saturate(1.6) !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 18px !important;
overflow: hidden !important;
}
html body .item-card:hover {
background: rgba(58, 123, 213, 0.26) !important;
}
html body .item-card .item-card-main {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* part 299 - per-rarity glass tint on item cards: same glass recipe,
different hue by rarity level */
html body .item-card[data-rarity="legendary"],
html[data-theme="light"] body .item-card[data-rarity="legendary"],
html[data-theme="dark"] body .item-card[data-rarity="legendary"] {
background: rgba(240, 184, 58, 0.20) !important;
}
html body .item-card[data-rarity="epic"],
html[data-theme="light"] body .item-card[data-rarity="epic"],
html[data-theme="dark"] body .item-card[data-rarity="epic"] {
background: rgba(147, 96, 240, 0.20) !important;
}
html body .item-card[data-rarity="rare"],
html[data-theme="light"] body .item-card[data-rarity="rare"],
html[data-theme="dark"] body .item-card[data-rarity="rare"] {
background: rgba(58, 123, 213, 0.24) !important;
}
html body .item-card[data-rarity="regular"],
html[data-theme="light"] body .item-card[data-rarity="regular"],
html[data-theme="dark"] body .item-card[data-rarity="regular"] {
background: rgba(120, 140, 170, 0.16) !important;
}
/* part 300 - card text pass: drop the crossed id number and the slot
line, enlarge the rounded badge pills, tint the item name by rarity
(tint opacity is low, so text takes the hue itself, brightened) */
html body .item-id,
html body .item-slot-label {
display: none !important;
}
html body .item-card .badge,
html body .item-card .badge.mono,
html[data-theme="light"] body .item-card .badge {
font-size: 16px !important;
padding: 11px 22px !important;
border-radius: 999px !important;
}
html body .item-card .item-name {
font-size: 22px !important;
font-weight: 700 !important;
color: rgb(232, 238, 251) !important;
}
html body .item-card[data-rarity="legendary"] .item-name {
color: #ffc757 !important;
}
html body .item-card[data-rarity="epic"] .item-name {
color: #c39af7 !important;
}
html body .item-card[data-rarity="rare"] .item-name {
color: #7fb2f7 !important;
}
html body .item-card[data-rarity="regular"] .item-name {
color: #b7c4d8 !important;
}
/* part 301 - every number inside the catalog section reads in orange:
filter pill counts, card prices, header stat numbers, kbd hint */
html body #catalog .mono,
html body #catalog .item-sub,
html body #catalog .catalog-stat strong,
html body #catalog kbd,
html[data-theme="light"] body #catalog .mono,
html[data-theme="light"] body #catalog .item-sub,
html[data-theme="light"] body #catalog .catalog-stat strong,
html[data-theme="dark"] body #catalog .mono,
html[data-theme="dark"] body #catalog .item-sub,
html[data-theme="dark"] body #catalog .catalog-stat strong {
color: #ff8a3d !important;
}/* =========================================================
Rarity Index ׳’ג‚¬ג€ Mikmak 2
========================================================= */
:root {
--bg: #0b0d10;
--bg-soft: #0f1318;
--panel: #12171d;
--panel-2: #161c24;
--panel-3: #1a212a;
--line: rgba(255, 255, 255, 0.085);
--line-strong: rgba(255, 255, 255, 0.16);
--text: #e9eef4;
--text-2: #b5c0cb;
--muted: #7f8b98;
--muted-2: #5f6b77;
--accent: #e3b341;
--accent-soft: rgba(227, 179, 65, 0.12);
--accent-line: rgba(227, 179, 65, 0.4);
--legendary: #e6b23c;
--legendary-soft: rgba(230, 178, 60, 0.12);
--legendary-line: rgba(230, 178, 60, 0.42);
--legendary-glow: rgba(240, 178, 62, 0.5);
--epic: #a06bff;
--epic-soft: rgba(160, 107, 255, 0.12);
--epic-line: rgba(160, 107, 255, 0.44);
--epic-glow: rgba(160, 107, 255, 0.45);
--rare: #4d8bf5;
--rare-soft: rgba(77, 139, 245, 0.12);
--rare-line: rgba(77, 139, 245, 0.42);
--rare-glow: rgba(77, 139, 245, 0.42);
--regular: #94a1af;
--regular-soft: rgba(148, 161, 175, 0.1);
--regular-line: rgba(148, 161, 175, 0.3);
--regular-glow: rgba(148, 161, 175, 0.24);
--danger: #e17878;
--success: #67c39d;
--radius: 20px;
--radius-sm: 12px;
--shell: 1320px;
--header-h: 76px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--font: "Heebo", "Segoe UI", Arial, sans-serif;
--mono: "IBM Plex Mono", "Consolas", monospace;
}
[data-rarity="legendary"] {
--rarity-color: var(--legendary);
--rarity-soft: var(--legendary-soft);
--rarity-line: var(--legendary-line);
--rarity-glow: var(--legendary-glow);
}
[data-rarity="epic"] {
--rarity-color: var(--epic);
--rarity-soft: var(--epic-soft);
--rarity-line: var(--epic-line);
--rarity-glow: var(--epic-glow);
}
[data-rarity="rare"] {
--rarity-color: var(--rare);
--rarity-soft: var(--rare-soft);
--rarity-line: var(--rare-line);
--rarity-glow: var(--rare-glow);
}
[data-rarity="regular"] {
--rarity-color: var(--regular);
--rarity-soft: var(--regular-soft);
--rarity-line: var(--regular-line);
--rarity-glow: var(--regular-glow);
}
[data-rarity="unknown"] {
--rarity-color: #b0a08a;
--rarity-soft: rgba(176, 160, 138, 0.1);
--rarity-line: rgba(176, 160, 138, 0.3);
--rarity-glow: rgba(176, 160, 138, 0.3);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
margin: 0;
min-width: 320px;
background:
radial-gradient(1100px 700px at 88% -12%, rgba(227, 179, 65, 0.075), transparent 62%),
radial-gradient(900px 620px at 4% 9%, rgba(91, 189, 178, 0.045), transparent 58%),
var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.modal-open {
overflow: hidden;
}
::selection {
background: rgba(227, 179, 65, 0.35);
color: #fff;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select {
font: inherit;
}
button {
color: inherit;
}
img,
svg {
display: block;
max-width: 100%;
}
.mono {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.icon {
width: 18px;
height: 18px;
flex: none;
}
.grain {
position: fixed;
inset: 0;
z-index: 80;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px 180px;
mix-blend-mode: overlay;
}
.shell {
width: min(var(--shell), calc(100% - 64px));
margin-inline: auto;
}
.skip-link {
position: fixed;
top: 12px;
inset-inline-start: 12px;
z-index: 200;
padding: 10px 16px;
border-radius: 10px;
background: var(--text);
color: var(--bg);
font-weight: 600;
transform: translateY(-160%);
transition: transform 0.2s var(--ease);
}
.skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(11, 13, 16, 0.72);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
flex: none;
}
.brand-mark {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid var(--accent-line);
border-radius: 11px;
color: var(--accent);
background: linear-gradient(145deg, rgba(227, 179, 65, 0.16), rgba(227, 179, 65, 0.03));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.brand-mark svg {
width: 25px;
height: 25px;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.12;
}
.brand-text strong {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand-text span {
margin-top: 3px;
color: var(--muted);
font-size: 11.5px;
}
.main-nav {
display: flex;
align-items: center;
gap: 4px;
}
.main-nav a {
position: relative;
padding: 8px 13px;
border-radius: 8px;
color: var(--text-2);
font-size: 13.5px;
font-weight: 500;
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.main-nav a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.04);
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
.count-pill {
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: var(--accent);
color: #17130a;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 600;
line-height: 1;
}
/* ---------------------------------------------------------
Buttons & shared bits
--------------------------------------------------------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: 11px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition:
transform 0.18s var(--ease),
background 0.2s var(--ease),
border-color 0.2s var(--ease),
color 0.2s var(--ease);
}
.button:active {
transform: translateY(1px) scale(0.99);
}
.button-primary {
background: var(--accent);
color: #17130a;
border-color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.button-primary:hover {
background: #f0c65d;
border-color: #f0c65d;
}
.button-ghost {
background: rgba(255, 255, 255, 0.035);
color: var(--text);
border-color: var(--line-strong);
}
.button-ghost:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.24);
}
.button-small {
min-height: 38px;
padding: 0 14px;
font-size: 12.5px;
border-radius: 9px;
}
.text-button {
padding: 0;
border: 0;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.22);
text-underline-offset: 4px;
transition: color 0.2s var(--ease);
}
.text-button:hover {
color: var(--text);
}
.icon-button {
width: 36px;
height: 36px;
padding: 0;
display: inline-grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.icon-button:hover {
color: var(--text);
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.05);
}
.icon-button svg {
width: 17px;
height: 17px;
}
.eyebrow,
.micro-label {
margin: 0;
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.4;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 20px;
color: var(--text-2);
font-size: 11px;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(227, 179, 65, 0.45);
animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(227, 179, 65, 0.38); }
50% { box-shadow: 0 0 0 6px rgba(227, 179, 65, 0); }
}
.micro-label {
display: block;
font-size: 9.5px;
}
/* ---------------------------------------------------------
Hero
--------------------------------------------------------- */
.hero {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
gap: clamp(40px, 6vw, 92px);
align-items: start;
padding-top: clamp(70px, 9vw, 128px);
padding-bottom: clamp(56px, 8vw, 104px);
}
.hero-copy {
max-width: 780px;
}
.hero h1 {
margin: 0;
font-size: clamp(3rem, 6.6vw, 6.25rem);
font-weight: 800;
line-height: 0.96;
letter-spacing: -0.045em;
}
.accent-text {
color: var(--accent);
}
.hero-lead {
max-width: 54ch;
margin: 26px 0 0;
color: var(--text-2);
font-size: clamp(1.02rem, 1.35vw, 1.16rem);
line-height: 1.75;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: clamp(38px, 5vw, 58px) 0 0;
padding: 0;
border-top: 1px solid var(--line);
}
.hero-stats > div {
flex: 1 1 110px;
padding: 18px 20px 0 0;
border-inline-end: 1px solid var(--line);
}
.hero-stats > div:last-child {
border-inline-end: 0;
}
.hero-stats dt {
color: var(--muted);
font-size: 11.5px;
font-weight: 500;
}
.hero-stats dd {
margin: 5px 0 0;
font-size: clamp(1.35rem, 2.1vw, 1.75rem);
font-weight: 500;
line-height: 1;
}
/* Ladder panel */
.hero-ladder {
position: relative;
padding: 26px 26px 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 42%),
var(--panel);
box-shadow:
0 30px 60px -50px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.hero-ladder::before {
content: "";
position: absolute;
inset: 0 26px auto;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.ladder-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 20px;
}
.ladder-head h2 {
margin: 4px 0 0;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
}
.ladder-code {
color: var(--muted-2);
font-size: 10.5px;
}
.ladder-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.ladder-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 14px 0 12px;
border-bottom: 1px solid var(--line);
}
.ladder-rank {
color: var(--muted-2);
font-size: 10px;
}
.ladder-main {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.ladder-main strong {
font-size: 14.5px;
font-weight: 600;
}
.ladder-main span {
color: var(--muted);
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ladder-count {
color: var(--rarity-color);
font-size: 12px;
font-weight: 500;
}
.ladder-bar {
grid-column: 2 / -1;
height: 2px;
margin-top: 3px;
overflow: hidden;
background: rgba(255, 255, 255, 0.065);
border-radius: 999px;
}
.ladder-bar i {
display: block;
height: 100%;
background: var(--rarity-color);
border-radius: inherit;
opacity: 0.9;
}
.ladder-note {
margin: 18px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.65;
}
/* ---------------------------------------------------------
Ticker
--------------------------------------------------------- */
.ticker {
overflow: hidden;
border-block: 1px solid var(--line);
background: rgba(255, 255, 255, 0.015);
direction: ltr;
}
.ticker-track {
display: flex;
align-items: center;
gap: 34px;
width: max-content;
padding: 13px 0;
color: var(--muted-2);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
animation: ticker 48s linear infinite;
}
.ticker:hover .ticker-track {
animation-play-state: paused;
}
.ticker-track i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
opacity: 0.55;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------------------------------------------------------
Sections
--------------------------------------------------------- */
.section {
padding-top: clamp(68px, 8vw, 116px);
}
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(24px, 5vw, 72px);
padding-top: 26px;
border-top: 1px solid var(--line);
margin-bottom: clamp(28px, 4vw, 44px);
}
.section-head h2 {
margin: 0;
max-width: 18ch;
font-size: clamp(1.9rem, 3.5vw, 3.1rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
}
.section-lead {
max-width: 47ch;
margin: 0 0 4px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.75;
}
/* ---------------------------------------------------------
Rarity cards
--------------------------------------------------------- */
.rarity-grid {
display: grid;
grid-template-columns: 1.24fr 0.76fr;
gap: 12px;
}
.rarity-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 206px;
padding: 24px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(155deg, var(--rarity-soft), transparent 48%),
var(--panel);
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.rarity-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, var(--rarity-color), transparent 72%);
opacity: 0.8;
}
.rarity-card:hover {
border-color: var(--rarity-line);
transform: translateY(-2px);
}
.rarity-card-large {
grid-row: span 2;
min-height: 424px;
padding: 30px;
}
.rarity-card-wide {
grid-column: 1 / -1;
min-height: 0;
}
.rarity-card-top,
.rarity-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.rarity-index {
color: var(--muted-2);
font-size: 9.5px;
}
.rarity-chip {
padding: 4px 8px;
border: 1px solid var(--rarity-line);
border-radius: 999px;
color: var(--rarity-color);
background: var(--rarity-soft);
font-size: 9.5px;
font-weight: 600;
}
.rarity-chip-muted {
color: var(--muted);
border-color: var(--line);
background: transparent;
}
.rarity-card-title {
display: flex;
align-items: baseline;
gap: 12px;
margin-top: auto;
padding-top: 42px;
}
.rarity-card-large .rarity-card-title {
padding-top: 100px;
}
.rarity-card-title h3 {
margin: 0;
color: var(--rarity-color);
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
.rarity-card-large .rarity-card-title h3 {
font-size: clamp(3rem, 5vw, 4.6rem);
}
.rarity-card-title span {
color: var(--muted);
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.rarity-card p {
max-width: 48ch;
margin: 14px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.7;
}
.rarity-card-foot {
justify-content: flex-start;
gap: 10px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.rarity-card-foot strong {
color: var(--text);
font-size: 1.35rem;
font-weight: 500;
line-height: 1;
}
.rarity-card-large .rarity-card-foot strong {
font-size: 2rem;
}
.rarity-card-foot span {
color: var(--muted);
font-size: 10.5px;
}
.rarity-glow {
position: absolute;
inset-inline-end: -60px;
bottom: -90px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(227, 179, 65, 0.16), transparent 68%);
pointer-events: none;
}
/* ---------------------------------------------------------
Catalog toolbar
--------------------------------------------------------- */
.catalog-toolbar {
display: grid;
gap: 18px;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 42%), var(--panel);
}
.search-field {
display: flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 14px;
border: 1px solid var(--line-strong);
border-radius: 11px;
background: var(--bg-soft);
color: var(--muted);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.search-field:focus-within {
border-color: var(--accent-line);
background: #0c1015;
}
.search-field input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font-size: 14px;
}
.search-field input::placeholder {
color: var(--muted-2);
}
.search-field input::-webkit-search-cancel-button {
appearance: none;
}
.search-field-main {
height: 54px;
padding-inline: 16px;
}
.search-field-main input {
font-size: 15px;
}
.search-kbd {
padding: 2px 7px;
border: 1px solid var(--line-strong);
border-radius: 5px;
color: var(--muted-2);
font-size: 10px;
line-height: 1.6;
}
.filter-block {
display: flex;
align-items: center;
gap: 16px;
}
.filter-label {
flex: none;
color: var(--muted);
font-size: 11.5px;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--text-2);
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-pill .mono {
color: var(--muted-2);
font-size: 9.5px;
transition: color 0.2s var(--ease);
}
.filter-pill:hover {
border-color: var(--line-strong);
color: var(--text);
}
.filter-pill.is-active {
border-color: var(--text);
background: var(--text);
color: var(--bg);
}
.filter-pill.is-active .mono {
color: rgba(11, 13, 16, 0.55);
}
/* Rarity-tinted active filter chips */
.filter-pill[data-rarity-filter="legendary"].is-active {
border-color: var(--legendary-line);
background: var(--legendary-soft);
color: var(--legendary);
}
.filter-pill[data-rarity-filter="epic"].is-active {
border-color: var(--epic-line);
background: var(--epic-soft);
color: var(--epic);
}
.filter-pill[data-rarity-filter="rare"].is-active {
border-color: var(--rare-line);
background: var(--rare-soft);
color: var(--rare);
}
.filter-pill[data-rarity-filter="regular"].is-active {
border-color: var(--regular-line);
background: var(--regular-soft);
color: var(--regular);
}
.filter-pill:not([data-rarity-filter="all"]).is-active .mono {
color: currentColor;
opacity: 0.68;
}
.select-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.select-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 160px;
}
.select-field > span,
.switch-field > span:last-child {
color: var(--muted);
font-size: 10.5px;
}
select {
appearance: none;
height: 40px;
padding: 0 12px 0 34px;
border: 1px solid var(--line);
border-radius: 9px;
outline: 0;
background-color: var(--bg-soft);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%237f8b98' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
color: var(--text-2);
font-size: 12.5px;
cursor: pointer;
}
select:hover {
border-color: var(--line-strong);
}
select:focus {
border-color: var(--accent-line);
}
.switch-field {
display: flex;
align-items: center;
gap: 9px;
height: 40px;
cursor: pointer;
user-select: none;
}
.switch-field input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.switch-track {
position: relative;
width: 36px;
height: 21px;
flex: none;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: var(--bg-soft);
transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.switch-track i {
position: absolute;
top: 3px;
inset-inline-start: 3px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--muted);
transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.switch-field input:checked + .switch-track {
border-color: var(--accent-line);
background: var(--accent-soft);
}
.switch-field input:checked + .switch-track i {
transform: translateX(-15px);
background: var(--accent);
}
.switch-field input:focus-visible + .switch-track {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.select-row .text-button {
margin-inline-start: auto;
padding-bottom: 10px;
}
.catalog-status {
min-height: 20px;
margin: 16px 2px 12px;
color: var(--muted);
font-size: 12px;
}
.catalog-status strong {
color: var(--text-2);
font-weight: 500;
}
/* ---------------------------------------------------------
Item grid & cards
--------------------------------------------------------- */
.item-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
min-height: 180px;
}
.item-card {
--i: 0;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--rarity-line);
border-radius: 14px;
background:
radial-gradient(130% 85% at 50% -12%, var(--rarity-soft), transparent 62%),
var(--panel);
box-shadow:
0 12px 28px -24px rgba(0, 0, 0, 0.95),
0 0 0 1px rgba(255, 255, 255, 0.015) inset,
0 0 22px -15px var(--rarity-glow);
animation: card-in 0.5s var(--ease) both;
animation-delay: calc(min(var(--i), 14) * 26ms);
transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.item-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: 2;
height: 2px;
background: linear-gradient(90deg, var(--rarity-color), transparent 82%);
opacity: 0.9;
}
.item-card:hover {
transform: translateY(-3px);
border-color: var(--rarity-color);
box-shadow:
0 18px 40px -26px rgba(0, 0, 0, 0.95),
0 0 28px -8px var(--rarity-glow);
}
.item-card-main {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
aspect-ratio: 1 / 1.06;
overflow: hidden;
padding: 12px;
border: 0;
background: rgba(0, 0, 0, 0.2);
color: inherit;
text-align: start;
cursor: pointer;
}
.item-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 20px;
}
.item-id {
color: var(--muted-2);
font-size: 9.5px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 7px;
border: 1px solid var(--rarity-line);
border-radius: 5px;
background: var(--rarity-soft);
color: var(--rarity-color);
font-size: 9.5px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.badge::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
}
.item-media {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 22px 22px 34px;
background:
radial-gradient(circle at 50% 34%, var(--rarity-soft), transparent 66%),
linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
}
/* Keep item art at (or below) its native resolution so it stays crisp:
it is centred with padding instead of being stretched edge-to-edge. */
.item-media .item-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.item-media svg {
width: 52%;
height: 52%;
color: var(--rarity-color);
opacity: 0.9;
}
.item-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to bottom, rgba(4, 6, 9, 0.62), rgba(4, 6, 9, 0) 32%),
linear-gradient(to top, rgba(4, 6, 9, 0.94) 0%, rgba(4, 6, 9, 0.72) 30%, rgba(4, 6, 9, 0) 62%);
}
.item-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
height: 100%;
}
.item-content-bottom {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: auto;
}
.item-gem {
width: 44px;
height: 44px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--rarity-line);
border-radius: 12px;
background:
radial-gradient(circle at 35% 28%, var(--rarity-soft), transparent 68%),
rgba(0, 0, 0, 0.16);
color: var(--rarity-color);
}
.item-gem svg {
width: 24px;
height: 24px;
}
.item-swatch {
position: relative;
display: block;
width: 44px;
height: 44px;
flex: none;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--swatch);
box-shadow:
inset 0 0 0 4px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.item-slot-label {
color: var(--text-2);
font-size: 11.5px;
font-weight: 500;
}
.item-name {
display: -webkit-box;
min-height: 2.6em;
overflow: hidden;
color: var(--text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-sub {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
color: var(--muted);
font-size: 10.5px;
}
.item-sub span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.item-sub span + span::before {
content: "";
width: 2px;
height: 2px;
border-radius: 50%;
background: var(--muted-2);
}
.item-flags {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-height: 18px;
margin-top: 2px;
}
.flag {
padding: 2px 6px;
border: 1px solid var(--line);
border-radius: 4px;
background: rgba(4, 6, 9, 0.55);
color: var(--muted);
font-size: 9px;
line-height: 1.5;
}
.flag-warn {
color: var(--danger);
border-color: rgba(225, 120, 120, 0.28);
background: rgba(74, 26, 26, 0.72);
}
.flag-member {
color: var(--accent);
border-color: var(--accent-line);
background: rgba(66, 52, 20, 0.72);
}
.item-card-actions {
display: flex;
border-top: 1px solid var(--line);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.item-card:hover .item-card-actions,
.item-card:focus-within .item-card-actions {
opacity: 1;
transform: translateY(0);
}
.item-card-actions button {
flex: 1;
padding: 9px 6px;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 10px;
font-weight: 500;
transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.item-card-actions button + button {
border-inline-start: 1px solid var(--line);
}
.item-card-actions button:hover {
background: rgba(255, 255, 255, 0.045);
color: var(--text);
}
@keyframes card-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Loading skeleton */
.skeleton-card {
min-height: 200px;
aspect-ratio: 1 / 1.06;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--panel);
overflow: hidden;
position: relative;
}
.skeleton-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 45%, transparent 70%);
transform: translateX(-100%);
animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
to { transform: translateX(100%); }
}
/* Empty state */
.empty-state {
padding: 64px 24px;
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
text-align: center;
background: rgba(255, 255, 255, 0.012);
}
.empty-mark {
display: inline-grid;
place-items: center;
width: 62px;
height: 62px;
margin-bottom: 14px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--muted);
}
.empty-mark svg {
width: 28px;
height: 28px;
}
.empty-state h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.empty-state p {
max-width: 42ch;
margin: 8px auto 20px;
color: var(--muted);
font-size: 13px;
}
/* ---------------------------------------------------------
Trade board
--------------------------------------------------------- */
.trade-board {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.032), transparent 44%), var(--panel);
}
.trade-column {
display: flex;
flex-direction: column;
min-width: 0;
padding: 24px;
}
.trade-column[data-side="offer"] {
border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius);
}
.trade-column[data-side="request"] {
border-start-start-radius: var(--radius);
border-end-start-radius: var(--radius);
}
.trade-column-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.trade-column-head h3 {
margin: 4px 0 0;
font-size: 21px;
font-weight: 700;
letter-spacing: -0.025em;
}
.trade-score {
min-width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(0, 0, 0, 0.16);
color: var(--text);
font-size: 18px;
font-weight: 500;
}
.trade-score.is-empty {
color: var(--muted-2);
}
.trade-search {
position: relative;
margin-top: 16px;
}
.search-field-small {
height: 42px;
border-radius: 9px;
}
.search-field-small input {
font-size: 12.5px;
}
.autocomplete {
position: absolute;
z-index: 30;
inset-inline: 0;
top: calc(100% + 6px);
max-height: 286px;
overflow: auto;
padding: 5px;
border: 1px solid var(--line-strong);
border-radius: 11px;
background: #0c1015;
box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.9);
}
.autocomplete-option {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 9px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text-2);
text-align: start;
cursor: pointer;
}
.autocomplete-option:hover,
.autocomplete-option.is-highlighted {
background: rgba(255, 255, 255, 0.055);
color: var(--text);
}
.autocomplete-dot {
width: 5px;
height: 22px;
flex: none;
border-radius: 3px;
background: var(--rarity-color);
opacity: 0.9;
}
.autocomplete-thumb {
width: 24px;
height: 24px;
flex: none;
object-fit: contain;
border: 1px solid var(--line);
border-radius: 6px;
background: rgba(0, 0, 0, 0.18);
}
.autocomplete-name {
flex: 1;
min-width: 0;
overflow: hidden;
font-size: 12px;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.autocomplete-meta {
flex: none;
color: var(--muted-2);
font-family: var(--mono);
font-size: 9px;
}
.autocomplete-empty {
padding: 12px;
color: var(--muted);
font-size: 12px;
text-align: center;
}
.trade-list {
display: flex;
flex-direction: column;
gap: 7px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.trade-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(0, 0, 0, 0.14);
animation: card-in 0.3s var(--ease) both;
}
.trade-item-img {
width: 30px;
height: 30px;
flex: none;
object-fit: contain;
border: 1px solid var(--line);
border-radius: 7px;
background: rgba(0, 0, 0, 0.18);
}
.trade-item-mark {
width: 4px;
height: 26px;
border-radius: 3px;
background: var(--rarity-color);
}
.trade-item-copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.trade-item-name {
overflow: hidden;
font-size: 12px;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.trade-item-meta {
color: var(--muted);
font-size: 9.5px;
}
.trade-item .badge {
font-size: 8.5px;
padding: 2px 6px;
}
.trade-item-remove {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--muted-2);
cursor: pointer;
}
.trade-item-remove:hover {
background: rgba(225, 120, 120, 0.1);
color: var(--danger);
}
.trade-item-remove svg {
width: 13px;
height: 13px;
}
.trade-empty {
margin: 16px 0 0;
padding: 28px 18px;
border: 1px dashed var(--line-strong);
border-radius: 10px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.65;
text-align: center;
}
.trade-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.trade-summary:empty {
display: none;
}
.summary-counts {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.summary-count {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border: 1px solid var(--rarity-line);
border-radius: 999px;
background: var(--rarity-soft);
color: var(--rarity-color);
font-size: 9px;
}
.summary-count .mono {
font-size: 9px;
}
.summary-total {
color: var(--muted);
font-size: 10.5px;
}
.trade-divider {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 18px 0;
}
.trade-divider-line {
width: 1px;
flex: 1;
background: var(--line);
}
.swap-button {
width: 38px;
height: 38px;
flex: none;
border-radius: 50%;
background: var(--panel-2);
color: var(--text-2);
}
.swap-button:hover {
color: var(--accent);
border-color: var(--accent-line);
}
.verdict {
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 14px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--panel);
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.verdict-icon {
width: 34px;
height: 34px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
color: var(--muted);
background: rgba(0, 0, 0, 0.14);
}
.verdict-icon svg {
width: 18px;
height: 18px;
}
.verdict-copy strong {
display: block;
font-size: 13.5px;
font-weight: 600;
}
.verdict-copy p {
margin: 3px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
.verdict.is-balanced {
border-color: var(--rare-line);
background: linear-gradient(90deg, var(--rare-soft), transparent 55%), var(--panel);
}
.verdict.is-balanced .verdict-icon {
color: var(--rare);
border-color: var(--rare-line);
}
.verdict.is-offer {
border-color: rgba(225, 120, 120, 0.3);
background: linear-gradient(90deg, rgba(225, 120, 120, 0.09), transparent 55%), var(--panel);
}
.verdict.is-offer .verdict-icon {
color: var(--danger);
border-color: rgba(225, 120, 120, 0.3);
}
.verdict.is-request {
border-color: var(--accent-line);
background: linear-gradient(90deg, var(--accent-soft), transparent 55%), var(--panel);
}
.verdict.is-request .verdict-icon {
color: var(--accent);
border-color: var(--accent-line);
}
.trade-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 14px;
}
.trade-disclaimer {
max-width: 66ch;
color: var(--muted-2);
font-size: 10.5px;
line-height: 1.6;
text-align: end;
}
/* ---------------------------------------------------------
About
--------------------------------------------------------- */
.about-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 42px);
}
.about-card {
padding-top: 18px;
border-top: 1px solid var(--line-strong);
}
.about-number {
color: var(--accent);
font-size: 10px;
}
.about-card h3 {
margin: 12px 0 8px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
}
.about-card p {
margin: 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.75;
}
.source-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-top: clamp(36px, 5vw, 56px);
padding: 20px 0;
border-block: 1px solid var(--line);
}
.source-strip > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.source-strip strong {
color: var(--text-2);
font-size: 12.5px;
font-weight: 500;
}
/* ---------------------------------------------------------
Footer
--------------------------------------------------------- */
.site-footer {
margin-top: clamp(70px, 9vw, 120px);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11.5px;
}
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding-block: 26px;
}
.footer-inner a {
margin-inline-start: auto;
color: var(--text-2);
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 4px;
}
.footer-inner a:hover {
color: var(--accent);
}
.footer-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--muted-2);
}
/* ---------------------------------------------------------
Modal
--------------------------------------------------------- */
.item-modal {
width: min(720px, calc(100vw - 28px));
max-height: min(88dvh, 860px);
margin: auto;
padding: 0;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--panel);
color: var(--text);
box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.95);
}
.item-modal::backdrop {
background: rgba(4, 6, 8, 0.72);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.item-modal[open] {
animation: modal-in 0.32s var(--ease) both;
}
@keyframes modal-in {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-body {
max-height: calc(min(88dvh, 860px) - 2px);
overflow-y: auto;
overscroll-behavior: contain;
padding: clamp(22px, 4vw, 36px);
}
.modal-close-form {
margin: 0;
}
.modal-close {
position: absolute;
top: 16px;
inset-inline-end: 16px;
z-index: 3;
background: rgba(11, 13, 16, 0.65);
backdrop-filter: blur(6px);
}
.modal-eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
}
.modal-title {
margin: 0;
padding-inline-end: 44px;
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.035em;
}
.modal-subtitle {
margin: 6px 0 0;
color: var(--muted);
font-size: 12.5px;
}
.modal-hero {
display: flex;
align-items: center;
gap: 18px;
margin-top: 24px;
padding: 18px;
border: 1px solid var(--rarity-line);
border-radius: 14px;
background: linear-gradient(100deg, var(--rarity-soft), transparent 72%);
}
.modal-gem {
width: 66px;
height: 66px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--rarity-line);
border-radius: 16px;
color: var(--rarity-color);
background: rgba(0, 0, 0, 0.16);
}
.modal-gem svg {
width: 36px;
height: 36px;
}
.item-gem.has-image,
.modal-gem.has-image {
padding: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.18);
}
.item-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.visual-fallback {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.visual-fallback[hidden] {
display: none;
}
.has-image .item-swatch {
border: none;
box-shadow: none;
}
.modal-hero-copy {
min-width: 0;
}
.modal-hero-copy .badge {
margin-bottom: 6px;
}
.modal-hero-copy p {
margin: 0;
color: var(--text-2);
font-size: 12.5px;
}
.modal-description {
margin: 20px 0 0;
color: var(--text-2);
font-size: 13px;
line-height: 1.75;
}
.modal-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 24px;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--line);
}
.modal-meta > div {
padding: 12px 14px;
background: var(--panel);
}
.modal-meta dt {
color: var(--muted);
font-size: 9.5px;
}
.modal-meta dd {
margin: 3px 0 0;
color: var(--text-2);
font-size: 12.5px;
font-weight: 500;
}
.modal-warning {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 16px;
padding: 10px 12px;
border: 1px solid rgba(225, 120, 120, 0.28);
border-radius: 9px;
background: rgba(225, 120, 120, 0.07);
color: var(--danger);
font-size: 11.5px;
line-height: 1.6;
}
.modal-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.modal-actions .button {
flex: 1 1 180px;
}
/* ---------------------------------------------------------
Toast
--------------------------------------------------------- */
.toast {
position: fixed;
z-index: 120;
bottom: 22px;
left: 50%;
max-width: min(420px, calc(100vw - 32px));
padding: 11px 17px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: rgba(22, 28, 36, 0.94);
color: var(--text);
font-size: 12px;
text-align: center;
box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
transform: translateX(-50%);
animation: toast-in 0.25s var(--ease) both;
}
.toast[hidden] {
display: none;
}
@keyframes toast-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 1180px) {
.item-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero {
gap: 44px;
}
}
@media (max-width: 980px) {
:root {
--header-h: 68px;
}
.main-nav {
display: none;
}
.hero {
grid-template-columns: 1fr;
gap: 38px;
padding-top: 56px;
}
.hero-copy {
max-width: 720px;
}
.hero-ladder {
max-width: 640px;
}
.section-head {
display: block;
}
.section-head h2 {
max-width: 26ch;
}
.section-lead {
margin-top: 14px;
}
.rarity-grid {
grid-template-columns: 1fr 1fr;
}
.rarity-card-large {
grid-row: auto;
grid-column: 1 / -1;
min-height: 300px;
}
.rarity-card-large .rarity-card-title {
padding-top: 56px;
}
.rarity-card-wide {
grid-column: 1 / -1;
}
.trade-board {
grid-template-columns: 1fr;
}
.trade-divider {
flex-direction: row;
padding: 0 24px;
}
.trade-divider-line {
width: auto;
height: 1px;
flex: 1;
}
.about-grid {
grid-template-columns: 1fr;
gap: 0;
}
.about-card {
padding: 20px 0;
}
.about-card:first-child {
border-top: 0;
padding-top: 0;
}
}
@media (max-width: 760px) {
.shell {
width: min(var(--shell), calc(100% - 36px));
}
.header-inner {
gap: 12px;
}
.brand-text span {
display: none;
}
.header-actions .button {
padding: 0 11px;
font-size: 11.5px;
}
.hero h1 {
font-size: clamp(2.8rem, 12vw, 4.4rem);
}
.hero-actions .button {
flex: 1 1 auto;
}
.hero-stats > div {
flex-basis: 50%;
padding: 14px 0 0;
border-inline-end: 0;
}
.hero-stats > div:nth-child(odd) {
border-inline-end: 1px solid var(--line);
}
.hero-stats > div:nth-child(n + 3) {
margin-top: 14px;
}
.rarity-grid {
grid-template-columns: 1fr;
}
.rarity-card-large,
.rarity-card-wide {
grid-column: auto;
}
.rarity-card-large {
min-height: 340px;
}
.catalog-toolbar {
padding: 14px;
}
.filter-block {
display: block;
}
.filter-label {
display: block;
margin-bottom: 8px;
}
.filter-pills {
gap: 5px;
}
.filter-pill {
padding: 6px 10px;
font-size: 11.5px;
}
.select-row {
gap: 10px;
}
.select-field {
flex: 1 1 140px;
min-width: 0;
}
.select-row .text-button {
margin-inline-start: 0;
}
.item-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.item-card-actions {
opacity: 1;
transform: none;
}
.item-card-main {
padding: 13px 13px 11px;
}
.item-name {
font-size: 13px;
}
.item-gem,
.item-swatch {
width: 38px;
height: 38px;
}
.trade-column {
padding: 18px;
}
.trade-actions {
display: block;
}
.trade-disclaimer {
display: block;
margin-top: 10px;
text-align: start;
}
.source-strip {
grid-template-columns: 1fr 1fr;
gap: 18px 12px;
}
.modal-meta {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.shell {
width: calc(100% - 28px);
}
.brand-mark {
width: 34px;
height: 34px;
}
.brand-text strong {
font-size: 13.5px;
}
.header-actions .button {
min-height: 34px;
padding: 0 9px;
}
.item-grid {
grid-template-columns: 1fr;
}
.item-name {
font-size: 14px;
}
.item-visual {
margin: 11px 0 9px;
}
.modal-meta {
grid-template-columns: 1fr;
}
.footer-inner a {
margin-inline-start: 0;
}
}
@media (hover: none) {
.item-card-actions {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.ticker-track {
animation: none;
}
}
/* =========================================================
Theme system
========================================================= */
html.theme-transition,
html.theme-transition body,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition:
background-color 0.35s var(--ease),
border-color 0.35s var(--ease),
color 0.35s var(--ease),
fill 0.35s var(--ease),
stroke 0.35s var(--ease),
box-shadow 0.35s var(--ease) !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition,
html.theme-transition body,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition-duration: 0.001ms !important;
}
}
/* ---------- Light theme palette ---------- */
[data-theme="light"] {
--bg: #eef1f6;
--bg-soft: #f6f8fb;
--panel: transparent;
--panel-2: #f6f8fb;
--panel-3: #eceff4;
--line: rgba(16, 26, 42, 0.1);
--line-strong: rgba(16, 26, 42, 0.18);
--text: #101725;
--text-2: #3b475a;
--muted: #64748b;
--muted-2: #94a3b8;
--accent: #b7791f;
--accent-soft: rgba(183, 121, 31, 0.12);
--accent-line: rgba(183, 121, 31, 0.42);
--legendary: #b7791f;
--legendary-soft: rgba(183, 121, 31, 0.14);
--legendary-line: rgba(183, 121, 31, 0.4);
--legendary-glow: rgba(183, 121, 31, 0.3);
--epic: #6d3aed;
--epic-soft: rgba(109, 58, 237, 0.12);
--epic-line: rgba(109, 58, 237, 0.34);
--epic-glow: rgba(109, 58, 237, 0.24);
--rare: #2563eb;
--rare-soft: rgba(37, 99, 235, 0.12);
--rare-line: rgba(37, 99, 235, 0.32);
--rare-glow: rgba(37, 99, 235, 0.22);
--regular: #64748b;
--regular-soft: rgba(100, 116, 139, 0.12);
--regular-line: rgba(100, 116, 139, 0.3);
--regular-glow: rgba(100, 116, 139, 0.18);
--danger: #d64545;
--success: #15803d;
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="light"] body {
background:
radial-gradient(1100px 700px at 88% -12%, rgba(183, 121, 31, 0.1), transparent 62%),
radial-gradient(900px 620px at 4% 9%, rgba(37, 99, 235, 0.05), transparent 58%),
var(--bg);
}
[data-theme="light"] .grain {
opacity: 0.02;
mix-blend-mode: multiply;
}
[data-theme="light"] ::selection {
background: rgba(183, 121, 31, 0.3);
color: #17130a;
}
[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] .main-nav a:hover {
background: rgba(16, 26, 42, 0.05);
}
[data-theme="light"] .brand-mark {
background: linear-gradient(145deg, rgba(183, 121, 31, 0.18), rgba(183, 121, 31, 0.04));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .button-ghost {
background: rgba(16, 26, 42, 0.035);
}
[data-theme="light"] .button-ghost:hover {
background: rgba(16, 26, 42, 0.07);
border-color: rgba(16, 26, 42, 0.24);
}
[data-theme="light"] .button-primary {
color: #1a1305;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .button-primary:hover {
background: #a46b16;
border-color: #a46b16;
color: #fff;
}
[data-theme="light"] .text-button {
text-decoration-color: rgba(16, 26, 42, 0.28);
}
[data-theme="light"] .icon-button:hover {
background: rgba(16, 26, 42, 0.06);
}
[data-theme="light"] .catalog-toolbar {
background: var(--panel);
box-shadow: 0 1px 2px rgba(16, 26, 42, 0.05);
}
[data-theme="light"] .search-field {
background: #f6f8fb;
}
[data-theme="light"] .search-field:focus-within {
background: transparent;
}
[data-theme="light"] select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="light"] .filter-pill[data-rarity-filter="all"].is-active .mono {
color: rgba(255, 255, 255, 0.66);
}
/* ---------- Item imagery: transparent + theme-aware ---------- */
:root {
--scrim-top: rgba(4, 6, 9, 0.58);
--scrim-fade: rgba(4, 6, 9, 0);
--scrim-mid: rgba(4, 6, 9, 0.68);
--scrim-bottom: rgba(4, 6, 9, 0.92);
}
[data-theme="light"] {
--scrim-top: rgba(255, 255, 255, 0.72);
--scrim-fade: rgba(255, 255, 255, 0);
--scrim-mid: rgba(255, 255, 255, 0.72);
--scrim-bottom: rgba(255, 255, 255, 0.94);
}
.item-card-main {
background: transparent;
}
.item-media {
padding: 12px 12px 22px;
background: radial-gradient(circle at 50% 30%, var(--rarity-soft), transparent 70%);
}
.item-media .item-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter:
drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45))
drop-shadow(0 14px 24px rgba(0, 0, 0, 0.4));
}
[data-theme="light"] .item-media .item-img {
filter:
drop-shadow(0 2px 3px rgba(16, 26, 42, 0.42))
drop-shadow(0 12px 20px rgba(16, 26, 42, 0.2));
}
/* The scrim follows the theme so overlaid text stays readable on either mode. */
.item-scrim {
background:
linear-gradient(to bottom, var(--scrim-top), var(--scrim-fade) 32%),
linear-gradient(to top, var(--scrim-bottom) 0%, var(--scrim-mid) 30%, var(--scrim-fade) 62%);
}
[data-theme="light"] .item-card .flag {
color: var(--muted);
border-color: var(--line);
background: rgba(255, 255, 255, 0.72);
}
[data-theme="light"] .item-card .flag-warn {
color: var(--danger);
border-color: rgba(214, 69, 69, 0.32);
background: rgba(214, 69, 69, 0.1);
}
[data-theme="light"] .item-card .flag-member {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-soft);
}
[data-theme="light"] .item-card {
box-shadow:
0 12px 26px -22px rgba(16, 26, 42, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 0 22px -15px var(--rarity-glow);
}
[data-theme="light"] .item-card:hover {
box-shadow:
0 18px 38px -24px rgba(16, 26, 42, 0.45),
0 0 26px -8px var(--rarity-glow);
}
/* ---------- Trade ---------- */
[data-theme="light"] .trade-item {
background: rgba(16, 26, 42, 0.04);
}
[data-theme="light"] .trade-score {
background: rgba(16, 26, 42, 0.05);
}
[data-theme="light"] .autocomplete {
background: var(--panel);
box-shadow: 0 22px 44px -18px rgba(16, 26, 42, 0.28);
}
[data-theme="light"] .autocomplete-option:hover,
[data-theme="light"] .autocomplete-option.is-highlighted {
background: rgba(16, 26, 42, 0.06);
}
[data-theme="light"] .autocomplete-thumb,
[data-theme="light"] .trade-item-img,
[data-theme="light"] .modal-gem,
[data-theme="light"] .modal-gem.has-image {
background: rgba(16, 26, 42, 0.05);
}
/* Crisp rendering for the smaller item thumbnails as well. */
.modal-gem .item-img,
.trade-item-img,
.autocomplete-thumb {
image-rendering: -webkit-optimize-contrast;
}
.modal-gem .item-img {
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .modal-gem .item-img {
filter: drop-shadow(0 5px 10px rgba(16, 26, 42, 0.2));
}
.trade-item-img,
.autocomplete-thumb {
filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
}
[data-theme="light"] .trade-item-img,
[data-theme="light"] .autocomplete-thumb {
filter: drop-shadow(0 3px 7px rgba(16, 26, 42, 0.16));
}
/* ---------- Modal + toast ---------- */
[data-theme="light"] .item-modal {
box-shadow: 0 40px 120px -30px rgba(16, 26, 42, 0.4);
}
[data-theme="light"] .item-modal::backdrop {
background: rgba(16, 26, 42, 0.5);
}
[data-theme="light"] .modal-close {
background: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] .toast {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 50px -18px rgba(16, 26, 42, 0.35);
}
/* =========================================================
Theme switch
========================================================= */
.theme-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--line);
border-radius: 11px;
background: rgba(255, 255, 255, 0.03);
flex: none;
}
[data-theme="light"] .theme-switch {
background: rgba(16, 26, 42, 0.035);
}
.theme-option {
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.theme-option svg {
width: 16px;
height: 16px;
}
.theme-option:hover {
color: var(--text);
}
.theme-option.is-active {
background: var(--accent-soft);
color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent-line);
}
/* =========================================================
Pagination
========================================================= */
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 28px;
}
.pagination[hidden] {
display: none;
}
.page-btn {
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 10px;
background: transparent;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-btn:hover:not(:disabled):not(.is-current) {
color: var(--text);
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .page-btn:hover:not(:disabled):not(.is-current) {
background: rgba(16, 26, 42, 0.05);
}
.page-btn.is-current {
border-color: var(--accent-line);
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
cursor: default;
}
.page-btn:disabled {
opacity: 0.38;
cursor: default;
}
.page-step {
min-width: 62px;
}
.page-ellipsis {
min-width: 22px;
color: var(--muted-2);
text-align: center;
user-select: none;
}
/* =========================================================
Back to top
========================================================= */
.back-to-top {
position: fixed;
inset-inline-end: 22px;
bottom: 22px;
z-index: 90;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--panel-2);
color: var(--text);
cursor: pointer;
box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.96);
transition:
opacity 0.25s var(--ease),
transform 0.25s var(--ease),
visibility 0.25s var(--ease),
background 0.2s var(--ease),
color 0.2s var(--ease),
border-color 0.2s var(--ease);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.back-to-top:hover {
border-color: var(--accent-line);
color: var(--accent);
}
.back-to-top svg {
width: 20px;
height: 20px;
}
[data-theme="light"] .back-to-top {
box-shadow: 0 16px 34px -18px rgba(16, 26, 42, 0.4);
}
@media (max-width: 480px) {
.theme-option {
width: 27px;
height: 27px;
}
.back-to-top {
inset-inline-end: 14px;
bottom: 14px;
width: 44px;
height: 44px;
}
.page-step {
min-width: 54px;
}
}
/* =========================================================
Design v2 ׳’ג‚¬ג€ light, sectioned landing design
(also defines the community-rarity visual language)
========================================================= */
/* ---------- Community rarity tokens (separate from official rarity) ---------- */
[data-community="common"] {
--community-color: #64748b;
--community-soft: rgba(100, 116, 139, 0.14);
--community-line: rgba(100, 116, 139, 0.34);
}
[data-community="uncommon"] {
--community-color: #0ea5e9;
--community-soft: rgba(14, 165, 233, 0.14);
--community-line: rgba(14, 165, 233, 0.34);
}
[data-community="rare"] {
--community-color: #6366f1;
--community-soft: rgba(99, 102, 241, 0.14);
--community-line: rgba(99, 102, 241, 0.34);
}
[data-community="very-rare"] {
--community-color: #8b5cf6;
--community-soft: rgba(139, 92, 246, 0.14);
--community-line: rgba(139, 92, 246, 0.36);
}
[data-community="extremely-rare"] {
--community-color: #d946ef;
--community-soft: rgba(217, 70, 239, 0.14);
--community-line: rgba(217, 70, 239, 0.36);
}
[data-community="ultra-rare"] {
--community-color: #f43f5e;
--community-soft: rgba(244, 63, 94, 0.14);
--community-line: rgba(244, 63, 94, 0.38);
}
/* ---------- Accent retune (violet) ---------- */
:root {
--accent: #8f7bff;
--accent-soft: rgba(143, 123, 255, 0.16);
--accent-line: rgba(143, 123, 255, 0.5);
--tint: rgba(255, 255, 255, 0.022);
--tint-2: rgba(255, 255, 255, 0.036);
--shadow-soft: 0 24px 60px -40px rgba(0, 0, 0, 0.85);
}
[data-theme="light"] {
--bg: #f5f6fb;
--bg-soft: #eef0f8;
--panel: transparent;
--panel-2: #f4f6fb;
--panel-3: #eceff7;
--line: rgba(20, 27, 60, 0.09);
--line-strong: rgba(20, 27, 60, 0.16);
--text: #131a2e;
--text-2: #43506b;
--muted: #667391;
--muted-2: #9aa3bb;
--accent: #6d5efc;
--accent-soft: rgba(109, 94, 252, 0.11);
--accent-line: rgba(109, 94, 252, 0.4);
--tint: #eceefb;
--tint-2: #e4e8fa;
--shadow-soft: 0 26px 60px -42px rgba(24, 30, 74, 0.45);
}
[data-theme="light"] body {
background:
radial-gradient(1200px 640px at 86% -12%, rgba(109, 94, 252, 0.1), transparent 60%),
radial-gradient(920px 560px at 5% 4%, rgba(56, 189, 248, 0.06), transparent 58%),
var(--bg);
}
[data-theme="light"] ::selection {
background: rgba(109, 94, 252, 0.24);
color: #120e35;
}
[data-theme="light"] .brand-mark {
background: linear-gradient(145deg, rgba(109, 94, 252, 0.18), rgba(109, 94, 252, 0.03));
}
[data-theme="light"] .grain {
opacity: 0.016;
mix-blend-mode: multiply;
}
/* Violet primary buttons read better with white text in both themes. */
.button-primary,
[data-theme="light"] .button-primary {
color: #ffffff;
}
.button-primary:hover {
background: #8577ff;
border-color: #8577ff;
}
[data-theme="light"] .button-primary {
background: #6d5efc;
border-color: #6d5efc;
}
[data-theme="light"] .button-primary:hover {
background: #5a4bf0;
border-color: #5a4bf0;
}
.count-pill {
color: #ffffff;
}
/* ---------- Bands / section tinting ---------- */
.band {
padding-block: clamp(54px, 7vw, 104px);
}
.band-tint {
background: var(--tint);
border-block: 1px solid var(--line);
}
.band-plain {
background: transparent;
}
.hero-band {
border-top: 0;
padding-block: clamp(44px, 6vw, 84px) clamp(46px, 6vw, 88px);
}
.section-head {
border-top: 0;
padding-top: 0;
margin-bottom: clamp(30px, 4vw, 48px);
}
.section-head-center {
display: block;
text-align: center;
max-width: 760px;
margin-inline: auto;
margin-bottom: clamp(34px, 4.4vw, 56px);
}
.section-head-center .eyebrow {
justify-content: center;
}
.section-head-center h2 {
max-width: 24ch;
margin-inline: auto;
font-size: clamp(1.8rem, 3.4vw, 2.85rem);
line-height: 1.1;
}
.section-head-center .section-lead {
max-width: 62ch;
margin: 18px auto 0;
font-size: 15px;
}
/* ---------- Hero (v2) ---------- */
.hero {
display: block;
padding-top: 0;
padding-bottom: 0;
text-align: center;
}
.hero-copy {
max-width: 900px;
margin-inline: auto;
}
.hero .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(2.05rem, 4.6vw, 4.05rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
}
.hero-lead {
max-width: 66ch;
margin: 24px auto 0;
color: var(--muted);
font-size: clamp(1rem, 1.3vw, 1.14rem);
line-height: 1.78;
}
.hero-lead strong {
color: var(--text-2);
font-weight: 600;
}
.hero-actions {
justify-content: center;
margin-top: 30px;
}
.hero-stats {
justify-content: center;
border-top: 0;
margin-top: clamp(34px, 4vw, 48px);
}
.hero-stats > div {
flex: 0 1 auto;
padding: 0 clamp(16px, 2.4vw, 30px);
}
.hero-stats > div:first-child {
padding-inline-start: 0;
}
.hero-stats > div:last-child {
padding-inline-end: 0;
border-inline-end: 0;
}
/* ---------- App preview card ---------- */
.app-preview {
position: relative;
max-width: 1040px;
margin: clamp(40px, 5vw, 66px) auto 0;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--panel);
box-shadow:
0 60px 110px -60px rgba(24, 30, 74, 0.55),
0 14px 36px -26px rgba(24, 30, 74, 0.4);
overflow: hidden;
text-align: start;
}
.app-preview-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 18px;
border-bottom: 1px solid var(--line);
background: var(--panel-2);
}
.app-preview-bar .dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--line-strong);
}
.app-preview-url {
margin-inline-start: 10px;
color: var(--muted-2);
font-size: 11.5px;
}
.app-preview-body {
padding: clamp(16px, 2.4vw, 28px);
}
.app-preview-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.app-pill {
flex: 1 1 200px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--panel-2);
color: var(--muted-2);
font-size: 12.5px;
}
.app-chip {
padding: 6px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
color: var(--rarity-color, var(--muted));
background: var(--rarity-soft, var(--panel-2));
border: 1px solid var(--rarity-line, var(--line));
}
.app-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.app-tile {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
padding: 14px;
border-radius: 14px;
border: 1px solid var(--line);
background:
radial-gradient(circle at 50% 40%, var(--rarity-soft, transparent), transparent 68%),
var(--panel-2);
}
.app-tile img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 12px 18px rgba(16, 20, 60, 0.2));
}
.app-tile::after {
content: "";
position: absolute;
top: 10px;
inset-inline-end: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--community-color, var(--line-strong));
box-shadow: 0 0 0 4px var(--community-soft, transparent);
}
.app-preview-badge {
position: absolute;
bottom: 16px;
inset-inline-start: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
font-size: 12px;
font-weight: 600;
color: var(--text-2);
box-shadow: 0 16px 34px -22px rgba(24, 30, 74, 0.5);
}
.app-preview-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
}
/* ---------- Features grid ---------- */
.feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
}
.feature-card {
padding: clamp(22px, 2.2vw, 28px);
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
box-shadow: var(--shadow-soft);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--accent-line);
box-shadow: 0 34px 64px -44px rgba(24, 30, 74, 0.5);
}
.feature-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 14px;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.feature-card h3 {
margin: 0 0 8px;
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.feature-card p {
margin: 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.72;
}
/* ---------- Showcase (zig-zag) ---------- */
.showcase-block {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(28px, 5vw, 76px);
align-items: center;
padding-block: clamp(28px, 3.6vw, 52px);
}
.showcase-block + .showcase-block {
border-top: 1px solid var(--line);
}
.showcase-block.is-reversed .showcase-media {
order: 2;
}
.showcase-media {
position: relative;
display: grid;
place-items: center;
min-height: 300px;
padding: 36px;
border-radius: 24px;
border: 1px solid var(--line);
background:
radial-gradient(circle at 50% 34%, var(--rarity-soft, transparent), transparent 66%),
var(--panel);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.showcase-media > img {
max-height: 232px;
width: auto;
max-width: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 20px 30px rgba(16, 20, 60, 0.24));
}
.showcase-badge {
position: absolute;
top: 16px;
inset-inline-start: 16px;
padding: 7px 13px;
border-radius: 999px;
background: var(--panel);
border: 1px solid var(--line);
color: var(--text-2);
font-size: 11.5px;
font-weight: 600;
box-shadow: 0 14px 30px -22px rgba(24, 30, 74, 0.5);
}
.showcase-media[data-community] .showcase-badge {
color: var(--community-color);
}
.showcase-media.is-grid {
padding: 30px;
}
.showcase-thumbs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
width: 100%;
}
.showcase-thumbs img {
width: 100%;
height: 118px;
object-fit: contain;
padding: 12px;
border-radius: 16px;
border: 1px solid var(--line);
background: var(--panel-2);
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 12px 18px rgba(16, 20, 60, 0.18));
}
.showcase-copy .eyebrow {
margin-bottom: 12px;
}
.showcase-copy h3 {
margin: 0 0 14px;
font-size: clamp(1.4rem, 2.5vw, 2.05rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.14;
}
.showcase-copy p {
max-width: 52ch;
margin: 0 0 24px;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
.showcase-copy strong {
color: var(--text-2);
font-weight: 600;
}
/* ---------- Scale boards ---------- */
.scale-boards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 28px);
}
.scale-board {
padding: clamp(22px, 2.4vw, 28px);
border: 1px solid var(--line);
border-radius: 20px;
background: var(--panel);
box-shadow: var(--shadow-soft);
}
.scale-board-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
}
.scale-board-head h3 {
margin: 5px 0 0;
font-size: 1.24rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.scale-board-code {
color: var(--muted-2);
font-size: 11px;
}
.scale-board-note {
margin: 16px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.7;
}
.scale-board-community {
border-color: var(--accent-line);
}
.scale-board-community .ladder-list {
border-top-color: var(--line);
}
.scale-board-community .ladder-row {
--rarity-color: var(--community-color);
}
/* ---------- Community chip on catalog cards ---------- */
.community-chip {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
width: fit-content;
margin-top: 7px;
padding: 3px 9px 3px 8px;
border-radius: 999px;
color: var(--community-color, var(--muted));
background: var(--community-soft, var(--panel-2));
border: 1px solid var(--community-line, var(--line));
font-size: 10.5px;
font-weight: 600;
line-height: 1.4;
}
.community-chip i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ---------- Modal: official vs community ---------- */
.modal-rarity-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 18px 0;
}
.modal-rarity-col {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
border-radius: 14px;
border: 1px solid var(--rarity-line, var(--line));
background: var(--rarity-soft, var(--panel-2));
}
.modal-rarity-col[data-community] {
border-color: var(--community-line);
background: var(--community-soft);
}
.modal-rarity-col strong {
font-size: 1.06rem;
font-weight: 700;
}
.modal-rarity-col .rarity-scale {
color: var(--muted);
font-size: 12px;
}
.modal-community {
margin: 18px 0;
padding: 18px 20px;
border-radius: 16px;
border: 1px solid var(--community-line, var(--line));
background: var(--community-soft, var(--panel-2));
}
.modal-community-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.modal-community-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.community-pill {
padding: 5px 12px;
border-radius: 999px;
color: #ffffff;
background: var(--community-color, var(--muted));
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.modal-meta-community {
margin: 0;
}
.modal-community-empty {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.modal-note {
margin: 12px 0 0;
color: var(--muted-2);
font-size: 11.5px;
line-height: 1.6;
}
.modal-disclaimer {
margin: 18px 0 0;
padding: 13px 15px;
border: 1px dashed var(--line-strong);
border-radius: 12px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.7;
}
/* ---------- Disclaimer block + logo strip ---------- */
.disclaimer {
display: flex;
gap: 16px;
align-items: flex-start;
margin-top: clamp(30px, 4vw, 44px);
padding: clamp(20px, 2.4vw, 26px);
border: 1px solid var(--line-strong);
border-radius: 18px;
background: var(--panel);
}
.disclaimer-icon {
flex: none;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
}
.disclaimer-icon svg {
width: 23px;
height: 23px;
}
.disclaimer strong {
display: block;
margin-bottom: 6px;
font-size: 1.02rem;
font-weight: 700;
}
.disclaimer p {
margin: 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.78;
}
.disclaimer p strong {
display: inline;
margin: 0;
color: var(--text-2);
font-size: inherit;
}
.logo-strip {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-top: clamp(28px, 3.4vw, 40px);
padding-top: 26px;
border-top: 1px solid var(--line);
}
.logo-strip-label {
color: var(--muted-2);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.logo-strip-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 34px;
}
.logo-item {
color: var(--muted);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
opacity: 0.82;
}
/* ---------- v2 responsive ---------- */
@media (max-width: 1080px) {
.feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.showcase-block {
grid-template-columns: 1fr;
gap: 26px;
}
.showcase-block.is-reversed .showcase-media {
order: 0;
}
.scale-boards {
grid-template-columns: 1fr;
}
.modal-rarity-split {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.app-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-stats {
flex-wrap: wrap;
gap: 18px 0;
}
.hero-stats > div {
flex: 1 1 44%;
border-inline-end: 0;
}
.logo-strip {
gap: 14px;
}
}
/* =========================================================
Design v3 ׳’ג‚¬ג€ contrast, elevation, spacing & hierarchy
Goals:
- Separate background tones so cards clearly float above the page.
- Soft borders + soft shadows on every surface.
- Airier spacing between sections and inside cards.
- Item imagery sits on a light, theme-aware surface (no black boxes).
- Strong heading hierarchy, calmer secondary text.
========================================================= */
/* ---------- 1. Re-tuned tokens (Modern Dark / Soft Light) ---------- */
:root {
--bg: #0b0f17;
--bg-soft: #131a27;
--panel: #1e293b;
--panel-2: #26334a;
--panel-3: #2f3d57;
--line: rgba(255, 255, 255, 0.1);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #eef2f9;
--text-2: #c6d0df;
--muted: #9aa7bd;
--muted-2: #73829b;
--plain: #0b0f17;
--tint: #131b2a;
--media-surface: linear-gradient(180deg, #2b3852, #202c42);
--on-invert: rgba(18, 24, 40, 0.62);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.55), 0 20px 44px -30px rgba(0, 0, 0, 0.95);
--shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.6), 0 32px 62px -32px rgba(0, 0, 0, 1);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.45), 0 30px 70px -46px rgba(0, 0, 0, 0.95);
}
[data-theme="light"] {
--bg: #eef1f8;
--bg-soft: #f7f9fc;
--panel: transparent;
--panel-2: #f4f6fb;
--panel-3: #e9edf6;
--line: rgba(18, 26, 58, 0.09);
--line-strong: rgba(18, 26, 58, 0.16);
--text: #101a2e;
--text-2: #3b4a64;
--muted: #5c6a86;
--muted-2: #8f99b1;
--plain: #ffffff;
--tint: #e9edfa;
--media-surface: linear-gradient(180deg, #f8fafd, #edf1f8);
--accent: #6d5efc;
--accent-soft: rgba(109, 94, 252, 0.1);
--accent-line: rgba(109, 94, 252, 0.38);
--on-invert: rgba(255, 255, 255, 0.72);
--shadow-card: 0 1px 2px rgba(18, 26, 58, 0.06), 0 20px 40px -26px rgba(18, 26, 58, 0.3);
--shadow-card-hover: 0 2px 5px rgba(18, 26, 58, 0.08), 0 30px 56px -28px rgba(18, 26, 58, 0.34);
--shadow-panel: 0 1px 2px rgba(18, 26, 58, 0.05), 0 30px 64px -44px rgba(18, 26, 58, 0.32);
}
body {
background: var(--bg);
}
[data-theme="light"] body {
background:
radial-gradient(900px 520px at 88% -10%, rgba(109, 94, 252, 0.05), transparent 62%),
var(--bg);
}
/* ---------- 2. Bands: separate background tones + more air ---------- */
.band {
padding-block: clamp(64px, 7.5vw, 122px);
}
.band-plain {
background: var(--plain);
}
.band-tint {
background: var(--tint);
border-block: 1px solid var(--line);
}
.hero-band {
padding-block: clamp(56px, 7vw, 108px) clamp(60px, 7vw, 118px);
}
.section-head {
margin-bottom: clamp(38px, 5vw, 64px);
}
.section-head-center {
margin-bottom: clamp(44px, 5.5vw, 74px);
}
.showcase-block {
padding-block: clamp(36px, 4.6vw, 66px);
}
.scale-boards {
gap: clamp(20px, 2.6vw, 32px);
}
.item-grid {
gap: clamp(14px, 1.6vw, 22px);
}
.catalog-status {
margin: 20px 2px 16px;
font-size: 12.5px;
}
/* ---------- 3. Typography hierarchy ---------- */
.section-head h2 {
font-size: clamp(1.85rem, 3.6vw, 3rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.035em;
}
.section-head-center h2 {
font-size: clamp(1.9rem, 3.7vw, 3.1rem);
}
.section-lead {
font-size: 15.5px;
line-height: 1.85;
color: var(--muted);
}
.eyebrow {
font-size: 11.5px;
letter-spacing: 0.14em;
color: var(--muted);
}
.hero h1 {
font-size: clamp(2.2rem, 4.8vw, 4.3rem);
}
.hero-lead {
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
line-height: 1.85;
}
.feature-card h3 {
font-size: 1.12rem;
}
.feature-card p {
font-size: 13.5px;
line-height: 1.78;
}
.showcase-copy p {
line-height: 1.85;
}
/* ---------- 4. Elevation: consistent borders + soft shadows ---------- */
.feature-card,
.scale-board,
.about-card,
.disclaimer,
.trade-column,
.catalog-toolbar,
.app-preview,
.verdict,
.source-strip {
border: 1px solid var(--line);
box-shadow: var(--shadow-panel);
}
.feature-card,
.scale-board,
.about-card,
.trade-column,
.catalog-toolbar {
background: var(--panel);
}
.feature-card {
border-radius: 20px;
}
/* ---------- 5. Item card: image on top, text below (no overlay/scrim) ---------- */
.item-card {
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
box-shadow: var(--shadow-card);
}
.item-card:hover {
border-color: var(--rarity-line);
box-shadow: var(--shadow-card-hover);
}
[data-theme="light"] .item-card {
box-shadow:
0 1px 2px rgba(18, 26, 58, 0.06),
0 20px 40px -26px rgba(18, 26, 58, 0.3);
}
[data-theme="light"] .item-card:hover {
box-shadow:
0 2px 5px rgba(18, 26, 58, 0.08),
0 30px 56px -28px rgba(18, 26, 58, 0.34),
0 0 24px -10px var(--rarity-glow);
}
.item-card-main {
aspect-ratio: auto;
padding: 0;
background: transparent;
}
.item-media {
position: relative;
inset: auto;
display: flex;
align-items: center;
justify-content: center;
height: clamp(168px, 15.5vw, 212px);
padding: 16px;
overflow: hidden;
background:
radial-gradient(circle at 50% 28%, var(--rarity-soft), transparent 74%),
var(--media-surface);
border-bottom: 1px solid var(--line);
}
.item-media .item-swatch {
width: 92px !important;
height: 92px !important;
}
.item-media .item-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
filter:
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.34))
drop-shadow(0 14px 22px rgba(0, 0, 0, 0.26));
}
[data-theme="light"] .item-media .item-img {
filter:
drop-shadow(0 3px 5px rgba(18, 26, 58, 0.28))
drop-shadow(0 12px 20px rgba(18, 26, 58, 0.15));
}
.item-media svg {
width: 60px;
height: 60px;
opacity: 0.85;
}
.item-media .item-swatch {
width: 100%;
height: 100%;
}
.item-scrim {
display: none !important;
}
.item-content {
position: static;
height: auto;
flex: 1;
gap: 8px;
padding: 15px 15px 16px;
}
.item-content-bottom {
gap: 5px;
}
.item-slot-label {
color: var(--muted);
}
.item-name {
font-size: 14.5px;
}
.item-gem {
background:
radial-gradient(circle at 35% 28%, var(--rarity-soft), transparent 68%),
var(--panel-2);
}
.item-swatch {
box-shadow:
inset 0 0 0 4px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* ---------- 6. Flags: theme-aware, readable ---------- */
.flag {
background: var(--panel-2);
border-color: var(--line);
color: var(--muted);
}
.flag-warn {
color: var(--danger);
border-color: rgba(230, 110, 110, 0.36);
background: rgba(224, 84, 84, 0.12);
}
.flag-member {
color: var(--accent);
border-color: var(--accent-line);
background: var(--accent-soft);
}
.item-card-actions button:hover {
background: var(--panel-2);
color: var(--text);
}
/* ---------- 7. Toolbar / controls: clearer surfaces ---------- */
.catalog-toolbar {
gap: clamp(16px, 2vw, 22px);
padding: clamp(18px, 2vw, 24px);
border-radius: 20px;
background: var(--panel);
}
.search-field {
height: 50px;
background: var(--panel-2);
border-color: var(--line);
}
.search-field:focus-within {
background: var(--panel);
border-color: var(--accent-line);
}
[data-theme="light"] .search-field {
background: var(--panel-2);
}
[data-theme="light"] .search-field:focus-within {
background: transparent;
}
.filter-pill {
background: var(--panel-2);
border-color: var(--line);
}
.filter-pill:hover {
background: var(--panel-3);
border-color: var(--line-strong);
}
.filter-pill.is-active {
background: var(--text);
border-color: var(--text);
color: var(--bg);
}
.filter-pill.is-active .mono {
color: var(--on-invert);
}
/* ---------- 8. Modal & trade surfaces ---------- */
.item-modal {
border: 1px solid var(--line);
box-shadow: var(--shadow-panel);
}
.trade-item {
background: var(--panel-2);
}
[data-theme="light"] .trade-item {
background: var(--panel-2);
}
.trade-score {
background: var(--panel-2);
}
/* ---------- 9. Responsive tweaks ---------- */
@media (max-width: 560px) {
.item-media {
height: 168px;
}
.band {
padding-block: clamp(52px, 11vw, 76px);
}
}
/* =========================================================
Design v4 ׳’ג‚¬ג€ floating rounded navbar
========================================================= */
:root {
--header-bg: rgba(17, 23, 35, 0.72);
--header-shadow: 0 14px 36px -20px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] {
--header-bg: rgba(255, 255, 255, 0.78);
--header-shadow: 0 16px 36px -22px rgba(18, 26, 58, 0.35), 0 1px 2px rgba(18, 26, 58, 0.07);
}
/* Anchor jumps clear the taller floating bar. */
html {
scroll-padding-top: calc(var(--header-h) + 52px);
}
.site-header,
[data-theme="light"] .site-header {
background: transparent;
border-bottom: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding-block: 14px;
}
.header-inner {
height: var(--header-h);
padding-inline: clamp(14px, 2vw, 22px);
border: 1px solid var(--line);
border-radius: 999px;
background: var(--header-bg);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
box-shadow: var(--header-shadow);
}
@media (max-width: 760px) {
.header-inner {
padding-inline: 14px;
}
}
@media (max-width: 480px) {
.header-inner {
padding-inline: 11px;
}
}
/* =========================================================
Design v5 ׳’ג‚¬ג€ clean background + clearly floating navbar
========================================================= */
/* No noise / grid / notebook texture ׳’ג‚¬ג€ the page stays smooth. */
.grain {
display: none !important;
}
/* Inset, rounded navbar with breathing room on every edge. */
.site-header,
[data-theme="light"] .site-header {
padding-block: 18px;
background: transparent;
border: 0;
}
.header-inner {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
padding-inline: clamp(16px, 2vw, 24px);
border: 1px solid var(--line);
border-radius: 999px;
background: var(--header-bg);
backdrop-filter: blur(22px) saturate(155%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
box-shadow: var(--header-shadow);
}
@media (max-width: 760px) {
.site-header,
[data-theme="light"] .site-header {
padding-block: 12px;
}
.header-inner {
width: calc(100% - 28px);
padding-inline: 14px;
}
}
@media (max-width: 480px) {
.header-inner {
width: calc(100% - 22px);
padding-inline: 11px;
}
}
/* =========================================================
Design v6 ׳’ג‚¬ג€ pin the floating navbar cleanly to the top
========================================================= */
/* The header itself is out of the flow: no top margin, no padding,
just a fixed 1rem offset from the viewport edge. */
.site-header,
[data-theme="light"] .site-header {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 60;
margin: 0;
padding: 0;
background: transparent;
border: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: none;
}
.header-inner {
pointer-events: auto;
margin-top: 0;
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
/* The first band's tint reaches the very top edge, while its content
starts below the floating bar. */
.hero-band {
padding-top: calc(var(--header-h) + 3rem);
}
@media (max-width: 760px) {
.site-header,
[data-theme="light"] .site-header {
top: 0;
padding: 0;
}
.header-inner {
width: calc(100% - 28px);
}
.hero-band {
padding-top: calc(var(--header-h) + 3rem);
}
}
@media (max-width: 480px) {
.header-inner {
width: calc(100% - 22px);
}
}
/* =========================================================
Design v7 ׳’ג‚¬ג€ clean background + hard navbar override
========================================================= */
/* One smooth vertical wash only: no radials, no noise, no grid. */
html body {
background: var(--bg);
}
html[data-theme="light"] body {
background: linear-gradient(180deg, #f7f9fe 0%, #eef1f8 340px, #eef1f8 100%);
}
html[data-theme="dark"] body {
background: #0b0f17;
}
/* Hard override of every earlier sticky/margin/padding rule. */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
position: fixed !important;
top: 0 !important;
inset-inline: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html body .header-inner {
margin-top: 0 !important;
}
@media (max-width: 760px) {
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
top: 0 !important;
padding: 0 !important;
}
}
/* Visible build marker, so a stale cache is immediately obvious. */
.build-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.02em;
direction: ltr;
}
/* Guaranteed clearance: the hero content always starts well below
the floating bar, at every width. */
html body .hero-band {
padding-top: max(calc(var(--header-h) + 3rem), 128px);
}
html body .band.hero-band > .hero {
scroll-margin-top: 128px;
}
/* =========================================================
Design v8 ׳’ג‚¬ג€ navbar like the reference: solid dark bar,
attached to the very top edge, rounded bottom corners
========================================================= */
/* The header itself is flush with the top of the viewport. */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
position: fixed !important;
top: 0 !important;
inset-inline: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* The bar: solid dark surface, square top edge, rounded bottom. */
html body .header-inner,
html[data-theme="light"] body .header-inner,
html[data-theme="dark"] body .header-inner {
margin-top: 0 !important;
width: min(1180px, calc(100% - 32px));
margin-inline: auto;
height: var(--header-h);
padding-inline: clamp(16px, 2vw, 24px);
border: 0;
border-radius: 0 0 22px 22px;
background: #10151f;
box-shadow: 0 14px 34px -18px rgba(4, 10, 25, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Light theme: everything on the dark bar turns light. */
html[data-theme="light"] body .brand-text strong {
color: #f2f6fb;
}
html[data-theme="light"] body .brand-text span {
color: rgba(230, 238, 249, 0.62);
}
html[data-theme="light"] body .brand-mark {
border-color: rgba(255, 255, 255, 0.16);
color: #9a8cff;
background: linear-gradient(145deg, rgba(109, 94, 252, 0.24), rgba(109, 94, 252, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body .main-nav a {
color: rgba(230, 238, 249, 0.78);
}
html[data-theme="light"] body .main-nav a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] body .theme-switch {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] body .theme-option {
color: rgba(230, 238, 249, 0.72);
}
html[data-theme="light"] body .theme-option:hover {
color: #ffffff;
}
html[data-theme="light"] body .theme-option.is-active {
background: rgba(109, 94, 252, 0.3);
color: #bdb5ff;
box-shadow: inset 0 0 0 1px rgba(143, 123, 255, 0.5);
}
html[data-theme="light"] body .header-inner .button-ghost {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.07);
color: #eef4fd;
}
html[data-theme="light"] body .header-inner .button-ghost:hover {
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
html[data-theme="light"] body .header-inner .count-pill {
color: #ffffff;
}
@media (max-width: 760px) {
html body .header-inner,
html[data-theme="light"] body .header-inner {
width: calc(100% - 28px);
}
}
@media (max-width: 480px) {
html body .header-inner,
html[data-theme="light"] body .header-inner {
width: calc(100% - 22px);
padding-inline: 11px;
}
}
/* =========================================================
Design v9 ׳’ג‚¬ג€ Mobbin-style skin (dark-first, monochrome)
Flat #141414 surfaces, 1px hairlines, pill buttons,
inverse primary CTA, big tight centered headings.
========================================================= */
/* ---------- 1. Tokens ---------- */
:root,
[data-theme="dark"] {
--bg: #141414;
--bg-soft: #181818;
--panel: #171717;
--panel-2: #1c1c1c;
--panel-3: #242424;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #ffffff;
--text-2: #d6d6d6;
--muted: #a6a6a6;
--muted-2: #878787;
--plain: #141414;
--tint: #171717;
--media-surface: #1e1e1e;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35);
--accent: #8f7bff;
--accent-soft: rgba(143, 123, 255, 0.14);
--accent-line: rgba(143, 123, 255, 0.4);
--on-invert: rgba(255, 255, 255, 0.72);
}
[data-theme="light"] {
--bg: transparent;
--bg-soft: #fafafa;
--panel: transparent;
--panel-2: #fafafa;
--panel-3: #f3f3f3;
--line: rgba(0, 0, 0, 0.09);
--line-strong: rgba(0, 0, 0, 0.18);
--text: #141414;
--text-2: #3d3d3d;
--muted: #6e6e6e;
--muted-2: #8f8f8f;
--plain: #ffffff;
--tint: #fafafa;
--media-surface: #f6f6f6;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.07);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.04);
--accent: #5b50ee;
--accent-soft: rgba(91, 80, 238, 0.1);
--accent-line: rgba(91, 80, 238, 0.35);
--on-invert: rgba(20, 20, 20, 0.6);
}
/* ---------- 2. Flat page & bands ---------- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background: var(--bg);
}
html body .band {
border-block: 0;
}
html body .band-tint {
background: var(--tint);
}
/* ---------- 3. Typography ׳’ג‚¬ג€ big & tight, centered ---------- */
html body .hero h1 {
font-size: clamp(2.5rem, 5.2vw, 3.5rem);
line-height: 1.03;
letter-spacing: -0.028em;
font-weight: 700;
}
html body .section-head h2,
html body .section-head-center h2 {
line-height: 1.12;
letter-spacing: -0.02em;
}
html body .section-head-center h2 {
font-size: clamp(1.75rem, 3.1vw, 2.5rem);
}
html body .hero-lead,
html body .section-lead {
color: var(--muted-2);
}
/* ---------- 4. Buttons ׳’ג‚¬ג€ pill, inverse primary ---------- */
html body .button {
border-radius: 999px;
font-weight: 600;
}
html[data-theme="dark"] body .button-primary {
background: transparent;
border-color: #ffffff;
color: #141414;
box-shadow: none;
}
html[data-theme="dark"] body .button-primary:hover {
background: transparent;
border-color: #ffffff;
color: #141414;
opacity: 0.82;
}
html[data-theme="light"] body .button-primary {
background: #141414;
border-color: #141414;
color: #ffffff;
box-shadow: none;
}
html[data-theme="light"] body .button-primary:hover {
background: #141414;
border-color: #141414;
color: #ffffff;
opacity: 0.82;
}
html[data-theme="dark"] body .button-ghost {
border-color: rgba(255, 255, 255, 0.22);
background: transparent;
color: #ffffff;
}
html[data-theme="dark"] body .button-ghost:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
}
html[data-theme="light"] body .button-ghost {
border-color: rgba(0, 0, 0, 0.16);
background: transparent;
color: #141414;
}
/* ---------- 5. Cards ׳’ג‚¬ג€ 24px radius, hairline, flat ---------- */
html body .feature-card,
html body .scale-board,
html body .about-card,
html body .trade-column,
html body .catalog-toolbar,
html body .trade-board {
border-radius: 24px;
}
html body .item-card {
border-radius: 18px;
box-shadow: var(--shadow-card);
}
html body .item-card:hover {
box-shadow: var(--shadow-card-hover);
}
html body .app-preview {
box-shadow: var(--shadow-panel);
}
html body .app-preview-badge {
box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.35);
}
html body .verdict,
html body .source-strip,
html body .disclaimer,
html body .toast {
box-shadow: var(--shadow-panel);
}
html body .item-modal {
border-radius: 22px;
}
html body .search-field-main,
html body .select-field,
html body .trade-search {
border-radius: 14px;
}
html body .logo-item {
opacity: 0.55;
filter: grayscale(1);
}
/* ---------- 6. Footer ׳’ג‚¬ג€ hairline top ---------- */
html body .site-footer {
border-top: 1px solid var(--line);
}
/* ---------- 7. Header controls on the dark bar ---------- */
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
border-color: rgba(255, 255, 255, 0.16);
color: #9a8cff;
background: linear-gradient(145deg, rgba(109, 94, 252, 0.24), rgba(109, 94, 252, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html body .header-inner .button-ghost,
html[data-theme="light"] body .header-inner .button-ghost,
html[data-theme="dark"] body .header-inner .button-ghost {
border: 0;
border-radius: 999px;
background: transparent;
color: #10151f;
}
html body .header-inner .button-ghost:hover {
border: 0;
background: transparent;
color: #10151f;
opacity: 0.85;
}
html body .header-inner .count-pill {
background: #8f7bff;
color: #ffffff;
}
html body .site-header .theme-option.is-active {
background: transparent;
color: #10151f;
box-shadow: none;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ Aside-style editorial flow ("׳³ֲ׳³ג€”׳³ג€ ׳³ֲ׳³ֲ׳³ג€”׳³ג€")
Full-width stacked sections, each closed with a hairline;
big centered display type; monochrome; tools inside flow.
========================================================= */
/* ---------- 1. Default theme: light (aside) ---------- */
/* Inline pre-paint script + app fallback also default to light. */
/* ---------- 2. Hero ׳’ג€ ג€™ centered stack, preview below ---------- */
html body .hero {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
padding-top: clamp(2.25rem, 5vw, 3.75rem);
padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
html body .hero-copy {
max-width: 860px;
}
html body .hero h1 {
font-size: clamp(2.25rem, 4.6vw, 3.1rem);
line-height: 1.09;
font-weight: 500;
letter-spacing: -0.032em;
}
html body .hero h1 .accent-text {
color: inherit;
}
html body .hero-lead {
max-width: 640px;
margin-inline: auto;
color: var(--muted-2);
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.75;
}
html body .hero-actions {
justify-content: center;
}
html body .hero-stats,
html body .hero-stats > div {
border-inline: 0;
background: transparent;
box-shadow: none;
text-align: start;
}
html body .app-preview {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
max-width: 980px;
width: 100%;
border-radius: 18px;
}
/* ---------- 3. Sections: stacked one after one, hairline separators ---------- */
html body .band {
border-top: 0;
border-bottom: 1px solid var(--line);
}
html body .section-head {
display: grid;
justify-items: center;
gap: 14px;
text-align: center;
}
html body .section-head > div {
display: grid;
justify-items: center;
gap: 14px;
}
html body .section-head .eyebrow {
justify-content: center;
}
html body .section-head .section-lead {
max-width: 640px;
margin: 0;
color: var(--muted-2);
}
html body .section-head h2,
html body .section-head-center h2 {
font-size: clamp(2rem, 3.4vw, 2.75rem);
line-height: 1.12;
font-weight: 500;
letter-spacing: -0.028em;
margin: 0;
}
html body .showcase-block {
display: grid;
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
gap: 30px;
}
html body .showcase-media {
max-width: 340px;
min-height: 0;
}
html body .showcase-copy {
max-width: 640px;
display: grid;
justify-items: center;
gap: 14px;
}
html body .showcase-copy h3 {
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
font-weight: 500;
letter-spacing: -0.02em;
margin: 0;
}
html body .showcase-copy p {
margin: 0;
color: var(--muted-2);
line-height: 1.7;
}
/* ---------- 4. Features: rows one after one ---------- */
html body .feature-grid {
grid-template-columns: 1fr;
gap: 0;
max-width: 860px;
margin-inline: auto;
}
html body .feature-card {
display: grid;
grid-template-columns: 52px 1fr;
gap: 18px 22px;
align-items: start;
text-align: start;
padding: 26px 4px;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
}
html body .feature-grid .feature-card:last-child {
border-bottom: 0;
}
html body .feature-card:hover {
transform: none;
background: transparent;
box-shadow: none;
border-bottom-color: var(--line);
}
html body .feature-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
}
html body .feature-card h3 {
margin: 2px 0 6px;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
}
html body .feature-card p {
margin: 0;
max-width: 60ch;
color: var(--muted-2);
font-size: 15.5px;
line-height: 1.65;
}
/* ---------- 5. Scales & about: stacked one after one ---------- */
html body .scale-boards {
grid-template-columns: 1fr;
max-width: 780px;
margin-inline: auto;
}
html body .about-grid {
grid-template-columns: 1fr;
gap: 0;
max-width: 860px;
margin-inline: auto;
}
html body .about-card {
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 22px;
row-gap: 8px;
align-items: baseline;
text-align: start;
padding: 24px 4px;
border-top: 0;
border-bottom: 1px solid var(--line);
}
html body .about-grid .about-card:last-child {
border-bottom: 0;
}
html body .about-card .about-number {
grid-column: 1;
grid-row: 1 / 3;
font-size: 13px;
}
html body .about-card h3 {
grid-column: 2;
margin: 0;
font-size: 19px;
font-weight: 600;
}
html body .about-card p {
grid-column: 2;
margin: 0;
color: var(--muted-2);
line-height: 1.65;
}
html body .disclaimer,
html body .source-strip {
max-width: 860px;
margin-inline: auto;
}
/* ---------- 6. Closing CTA ---------- */
html body .closing {
border-bottom: 0;
}
html body .closing-actions {
margin-top: 10px;
display: flex;
justify-content: center;
}
html body .closing .button-primary {
border-radius: 12px;
padding-inline: 24px;
padding-block: 12px;
font-size: 15px;
}
/* ---------- 7. Footer: link columns + bottom row ---------- */
html body .site-footer {
margin-top: 0;
border-top: 1px solid var(--line);
}
html body .footer-cols {
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: clamp(28px, 4vw, 48px);
padding-block: clamp(40px, 5vw, 60px) 36px;
}
html body .footer-col {
display: grid;
gap: 10px;
align-content: start;
justify-items: start;
font-size: 14.5px;
}
html body .footer-col h4 {
margin: 0 0 2px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text);
}
html body .footer-col a,
html body .footer-col button,
html body .footer-col span {
color: var(--muted-2);
text-decoration: none;
font: inherit;
background: none;
border: 0;
padding: 0;
cursor: default;
}
html body .footer-col a,
html body .footer-col button {
cursor: pointer;
}
html body .footer-col a:hover,
html body .footer-col button:hover {
color: var(--text);
}
html body .footer-brand .brand {
justify-items: start;
}
html body .footer-brand .brand-text {
color: var(--text);
}
html body .footer-brand .brand-text span {
color: var(--muted-2);
}
html body .footer-brand .brand-mark {
border-color: var(--line);
background: var(--panel-3);
color: var(--text);
box-shadow: none;
}
html body .footer-brand p {
margin: 8px 0 0;
max-width: 36ch;
color: var(--muted-2);
line-height: 1.65;
}
html body .footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-block: 18px 28px;
border-top: 1px solid var(--line);
color: var(--muted-2);
font-size: 13px;
}
@media (max-width: 900px) {
html body .footer-cols {
grid-template-columns: 1fr 1fr;
}
html body .footer-bottom {
justify-content: center;
text-align: center;
}
}
@media (max-width: 560px) {
html body .footer-cols {
grid-template-columns: 1fr;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 2: aside tokens, static header, buttons
========================================================= */
/* ---------- 8. Light tokens (aside default: white / near-black / hairlines) ---------- */
[data-theme="light"] {
--bg: transparent;
--bg-soft: transparent;
--panel: transparent;
--panel-2: #fafafa;
--panel-3: #f5f5f5;
--line: rgba(0, 0, 0, 0.07);
--line-strong: rgba(0, 0, 0, 0.16);
--text: #121212;
--text-2: #383838;
--muted: #565656;
--muted-2: #6f6f6f;
--plain: #ffffff;
--tint: #ffffff;
--media-surface: #f6f6f6;
}
html {
scroll-padding-top: 20px;
}
/* ---------- 9. Header ׳’ג€ ג€™ static light nav (aside) ---------- */
html body .site-header {
position: static !important;
}
html body .header-inner {
max-width: none !important;
width: 100% !important;
border-radius: 0 !important;
background: transparent !important;
border-bottom: 1px solid var(--line);
box-shadow: none !important;
padding-inline: clamp(16px, 3vw, 36px);
padding-block: 10px;
}
html body .site-header .brand-text strong {
color: var(--text);
}
html body .site-header .brand-text span {
color: var(--muted-2);
}
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
border-color: var(--line);
background: var(--panel-3);
color: var(--text);
box-shadow: none;
}
html body .site-header .main-nav a {
color: var(--muted);
background: transparent;
}
html body .site-header .main-nav a:hover {
color: var(--text);
background: transparent;
}
html body .site-header .theme-switch {
border-color: var(--line);
background: transparent;
}
html body .site-header .theme-option {
color: var(--text-2);
background: transparent;
}
html body .site-header .theme-option.is-active,
html[data-theme="light"] body .site-header .theme-option.is-active,
html[data-theme="dark"] body .site-header .theme-option.is-active {
background: var(--text);
color: var(--bg);
box-shadow: none;
}
html body .site-header .header-inner .button-ghost,
html[data-theme="light"] body .header-inner .button-ghost,
html[data-theme="dark"] body .header-inner .button-ghost {
background: var(--text);
color: var(--bg);
border: 0;
border-radius: 14px;
box-shadow: none;
}
html body .site-header .header-inner .button-ghost:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .site-header .header-inner .count-pill {
background: var(--bg);
color: var(--text);
}
/* hero clearance: header is static now ׳’ג‚¬ג€ no reserved fixed-header space */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
border-top: 0;
border-bottom: 1px solid var(--line);
padding-top: clamp(2.5rem, 6vw, 4rem) !important;
padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* ---------- 10. Buttons: aside dark solid ---------- */
html body .button {
border-radius: 14px;
font-weight: 500;
}
html body .hero .button-primary,
html body .closing .button-primary {
border-radius: 10px;
min-width: 330px;
max-width: 100%;
padding-block: 15px;
padding-inline: 32px;
font-size: 15.5px;
}
html[data-theme="light"] body .button-primary {
background: var(--text);
border-color: var(--text);
color: var(--bg);
box-shadow: none;
}
html[data-theme="light"] body .button-primary:hover {
background: var(--text);
border-color: var(--text);
color: var(--bg);
opacity: 0.82;
}
html[data-theme="light"] body .button-ghost {
border-color: var(--line-strong);
background: transparent;
color: var(--text);
}
html[data-theme="light"] body .button-ghost:hover {
border-color: rgba(0, 0, 0, 0.32);
background: rgba(0, 0, 0, 0.04);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 3: hard header override (beats v8 bar)
Static, light, full-width editorial nav like aside.com
========================================================= */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
position: static !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--bg) !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html body .header-inner,
html[data-theme="light"] body .header-inner,
html[data-theme="dark"] body .header-inner {
height: auto !important;
min-height: 0 !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-bottom: 1px solid var(--line);
padding-block: 10px;
padding-inline: clamp(16px, 3vw, 36px);
}
html body .site-header .brand-text strong,
html[data-theme="light"] body .site-header .brand-text strong,
html[data-theme="dark"] body .site-header .brand-text strong {
color: var(--text);
}
html body .site-header .brand-text span,
html[data-theme="light"] body .site-header .brand-text span,
html[data-theme="dark"] body .site-header .brand-text span {
color: var(--muted-2);
}
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
border-color: var(--line);
background: var(--panel-3);
color: var(--text);
box-shadow: none;
}
html body .site-header .main-nav a,
html[data-theme="light"] body .site-header .main-nav a,
html[data-theme="dark"] body .site-header .main-nav a {
color: var(--muted);
background: transparent;
}
html body .site-header .main-nav a:hover,
html[data-theme="light"] body .site-header .main-nav a:hover,
html[data-theme="dark"] body .site-header .main-nav a:hover {
color: var(--text);
background: transparent;
}
html body .site-header .theme-switch,
html[data-theme="light"] body .site-header .theme-switch,
html[data-theme="dark"] body .site-header .theme-switch {
border-color: var(--line);
background: transparent;
}
html body .site-header .theme-option,
html[data-theme="light"] body .site-header .theme-option,
html[data-theme="dark"] body .site-header .theme-option {
color: var(--text-2);
background: transparent;
}
html body .site-header .theme-option.is-active,
html[data-theme="light"] body .site-header .theme-option.is-active,
html[data-theme="dark"] body .site-header .theme-option.is-active {
background: var(--text);
color: var(--bg);
box-shadow: none;
}
html body .header-inner .button-ghost,
html[data-theme="light"] body .header-inner .button-ghost,
html[data-theme="dark"] body .header-inner .button-ghost {
background: var(--text);
color: var(--bg);
border: 0;
border-radius: 14px;
box-shadow: none;
}
html body .header-inner .button-ghost:hover,
html[data-theme="light"] body .header-inner .button-ghost:hover,
html[data-theme="dark"] body .header-inner .button-ghost:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .header-inner .count-pill,
html[data-theme="light"] body .header-inner .count-pill,
html[data-theme="dark"] body .header-inner .count-pill {
background: var(--bg);
color: var(--text);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 4: readability pass
Bigger Hebrew text everywhere, darker secondary colors,
simple about copy, and card text gains.
========================================================= */
[data-theme="light"] {
--muted: #4f4f4f;
--muted-2: #5f5f5f;
}
html body .hero-lead,
html body .section-lead {
font-size: 1.12rem;
line-height: 1.8;
color: var(--muted);
}
html body .about-simple {
max-width: 860px;
margin-inline: auto;
display: grid;
gap: 20px;
margin-bottom: clamp(28px, 4vw, 44px);
}
html body .about-simple p {
margin: 0;
font-size: 1.13rem;
line-height: 1.85;
color: var(--text-2);
}
html body .disclaimer {
font-size: 1.04rem;
}
html body .disclaimer p {
font-size: 1.04rem;
line-height: 1.8;
color: var(--text-2);
}
html body .item-name {
font-size: 1.05rem;
}
html body .item-slot-label {
font-size: 0.92rem;
color: var(--muted-2);
}
html body .community-chip {
font-size: 0.9rem;
}
html body .badge {
font-size: 0.82rem;
}
html body .filter-pill {
font-size: 0.95rem;
}
html body .filter-label {
font-size: 12px;
}
html body .select-field {
font-size: 0.95rem;
}
html body .search-field input {
font-size: 1rem;
}
html body .trade-empty,
html body .trade-summary,
html body .trade-disclaimer {
font-size: 0.98rem;
}
html body .verdict p {
font-size: 1.02rem;
}
html body .scale-board-note {
font-size: 0.95rem;
}
html body .main-nav a {
font-size: 14.5px;
}
html body .micro-label {
font-size: 11.5px;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 5: single theme toggle button
Dark site ׳’ג€ ג€™ white button (click ׳’ג€ ג€™ light);
Light site ׳’ג€ ג€™ black button (click ׳’ג€ ג€™ dark).
Low rounding, stretched.
========================================================= */
html body .site-header .theme-toggle,
html[data-theme="light"] body .site-header .theme-toggle,
html[data-theme="dark"] body .site-header .theme-toggle {
display: inline-grid;
place-items: center;
min-width: 66px;
height: 40px;
border: 0;
border-radius: 8px;
background: var(--text);
color: var(--bg);
cursor: pointer;
box-shadow: none;
transition: opacity 0.2s var(--ease);
}
html body .site-header .theme-toggle:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .site-header .theme-toggle svg {
width: 20px;
height: 20px;
}
html body .site-header .theme-toggle .icon-moon {
display: none;
}
html body .site-header .theme-toggle.is-light .icon-sun {
display: none;
}
html body .site-header .theme-toggle.is-light .icon-moon {
display: block;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 6
1) Theme toggle now lives ON the old header CTA slot:
label + icon, black in light mode / white in dark,
8px corners, stretched.
2) Hero section ׳’ג€ ג€™ rounded card with a clouds sky
background (uses images/clouds.png when present,
smooth gradient sky fallback otherwise).
========================================================= */
html body .site-header .theme-toggle,
html[data-theme="light"] body .site-header .theme-toggle,
html[data-theme="dark"] body .site-header .theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 0;
height: 40px;
padding-inline: 18px;
border: 0;
border-radius: 8px;
background: var(--text);
color: var(--bg);
cursor: pointer;
box-shadow: none;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: opacity 0.2s var(--ease);
}
html body .site-header .theme-toggle:hover {
background: var(--text);
color: var(--bg);
opacity: 0.8;
}
html body .site-header .theme-toggle .theme-toggle-label {
color: inherit;
}
/* Hero ׳’ג€ ג€™ rounded clouds card */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
position: relative;
overflow: hidden;
width: min(1180px, calc(100% - 32px));
margin: 14px auto 0;
border-top: 0;
border-bottom: 0;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(238, 251, 255, 0.6) 100%),
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #e0f8ff 100%);
}
@media (max-width: 640px) {
html body .hero-band {
width: calc(100% - 24px);
border-radius: 18px;
margin-top: 10px;
}
}
/* Sky text ink ׳’ג‚¬ג€ readable over the light sky in BOTH themes */
html body .hero-band .hero h1,
html body .hero-band .hero h1 .accent-text {
color: #14344a;
}
html body .hero-band .hero-lead {
color: #2c4a5e;
}
html body .hero-band .hero-stats {
border-top-color: rgba(16, 52, 74, 0.18);
}
html body .hero-band .hero-stats dt {
color: #33566c;
font-size: 1.02rem;
}
html body .hero-band .hero-stats dd {
color: #0f3448;
font-size: 1.5rem;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 7: hero refinement
Title ink for the lead + strong, heading-color CTA,
#E0F2FE stat numbers, and a full-bleed sky background.
========================================================= */
html body .hero-band .hero-lead,
html body .hero-band .hero-lead strong {
color: #14344a;
}
html body .hero-band .hero-actions .button-primary {
background: #14344a;
border-color: #14344a;
color: #ffffff;
box-shadow: none;
}
html body .hero-band .hero-actions .button-primary:hover {
background: #14344a;
border-color: #14344a;
color: #ffffff;
opacity: 0.85;
}
html body .hero-band .hero-stats dd {
color: #E0F2FE;
}
/* Full-bleed sky: edge to edge, no side gaps */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
width: 100%;
margin: 0;
border-radius: 0;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 8: sky extends behind the top bar too
========================================================= */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
background: linear-gradient(180deg, #8fd9f8 0%, #a9e7ff 100%) !important;
border: 0 !important;
box-shadow: none !important;
}
html body .header-inner,
html[data-theme="light"] body .header-inner,
html[data-theme="dark"] body .header-inner {
border-bottom: 0 !important;
}
html body .site-header .brand-mark,
html[data-theme="light"] body .site-header .brand-mark,
html[data-theme="dark"] body .site-header .brand-mark {
background: transparent;
border-color: rgba(0, 0, 0, 0.08);
}
html body .site-header .main-nav a,
html[data-theme="light"] body .site-header .main-nav a,
html[data-theme="dark"] body .site-header .main-nav a {
color: #2c4a5e;
}
html body .site-header .main-nav a:hover,
html[data-theme="light"] body .site-header .main-nav a:hover,
html[data-theme="dark"] body .site-header .main-nav a:hover {
color: #14344a;
}
html body .site-header .theme-toggle,
html[data-theme="light"] body .site-header .theme-toggle,
html[data-theme="dark"] body .site-header .theme-toggle {
background: #14344a;
color: #ffffff;
}
html body .site-header .theme-toggle:hover {
background: #14344a;
color: #ffffff;
opacity: 0.85;
}
/* Stat numbers: title ink ׳’ג‚¬ג€ matching the headline */
html body .hero-band .hero-stats dd {
color: #14344a;
font-size: 1.5rem;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 9: hero = rounded sky card on white zone
Rounded top + bottom, side gaps, white empty background
around the card; the white gap also breaks the hard sky-on-sky
seam between the top bar and the section.
========================================================= */
html body .sky-zone,
html[data-theme="light"] body .sky-zone,
html[data-theme="dark"] body .sky-zone {
background: transparent;
padding: 12px 0 40px;
}
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
border-radius: 28px;
}
@media (max-width: 640px) {
html body .sky-zone {
padding: 10px 0 28px;
}
html body .hero-band {
width: calc(100% - 24px);
border-radius: 20px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 10: one continuous sky (aside.com style)
No separate top bar: the header is transparent and sits on
the SAME sky canvas as the hero. White mat around, rounded
canvas corners.
========================================================= */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background: transparent;
padding: 10px 14px 0;
}
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
overflow: hidden;
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(238, 251, 255, 0.6) 100%),
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #e0f8ff 100%);
}
/* header: fully transparent ׳’ג‚¬ג€ one sky behind it and the hero */
html body .site-header,
html[data-theme="light"] body .site-header,
html[data-theme="dark"] body .site-header {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* hero: no own background ׳’ג‚¬ג€ the canvas sky shows through */
html body .hero-band,
html[data-theme="light"] body .hero-band,
html[data-theme="dark"] body .hero-band {
width: auto;
margin: 0;
border: 0;
border-radius: 0;
background: none;
}
@media (max-width: 640px) {
html body .sky-frame {
padding: 6px 8px 0;
}
html body .sky-canvas {
border-radius: 20px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 11: closing app-window at the sky edge
The sky canvas closes on a large white tool window that
rises from its bottom edge (aside.com style), showing
real site content inside.
========================================================= */
html body .sky-window {
position: relative;
width: min(1300px, calc(100% - 112px));
margin: 0 auto;
border-radius: 16px 16px 0 0;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 0;
box-shadow: 0 10px 44px rgba(20, 52, 74, 0.16);
overflow: hidden;
}
/* the demo's fake mouse cursor */
html body .sky-window .demo-cursor {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 24px;
z-index: 40;
pointer-events: none;
opacity: 0;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
transition: opacity 0.3s var(--ease);
will-change: transform;
}
html body .sky-window .demo-cursor svg { display: block; width: 100%; height: 100%; transition: transform 0.16s var(--ease); }
html body .sky-window .demo-cursor.is-visible { opacity: 1; }
html body .sky-window .demo-cursor.is-clicking svg { transform: scale(0.8); }
html body .sky-window .win-toolbar {
display: flex;
align-items: center;
gap: 3px;
padding: 15px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
html body .sky-window .tb-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #3b4a57;
flex: none;
}
html body .sky-window .tb-icon svg { width: 15px; height: 15px; }
html body .sky-window .tb-close { color: #d15248; }
html body .sky-window .win-address {
flex: 1;
direction: rtl;
text-align: left;
background: #f2f6fa;
color: #5b6b78;
border-radius: 999px;
padding: 7px 20px 7px 14px;
font-size: 13px;
font-weight: 600;
margin: 0 8px;
}
html body .sky-window .win-main {
display: grid;
grid-template-columns: 250px 1fr;
background: transparent;
}
html body .sky-window .win-sidebar {
padding: 16px 16px 28px;
background: #f7f9fb;
border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
}
html body .sky-window .side-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
}
html body .sky-window .side-profile img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
html body .sky-window .side-profile b { font-size: 14px; color: #16283a; }
html body .sky-window .side-profile .chev {
margin-inline-start: auto;
color: #8fa0ad;
font-size: 11px;
}
html body .sky-window .side-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 14px 3px 6px;
}
html body .sky-window .side-tile {
display: flex;
align-items: center;
justify-content: center;
height: 52px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 12px;
}
html body .sky-window .side-tile img {
width: 28px;
height: 28px;
object-fit: contain;
}
html body .sky-window .side-label {
font-size: 12.5px;
font-weight: 600;
color: #8fa0ad;
margin: 18px 8px 6px;
}
html body .sky-window .side-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 11px;
border-radius: 10px;
font-size: 13.5px;
color: #3a4a58;
}
html body .sky-window .side-row i {
width: 13px;
height: 13px;
border-radius: 4px;
background: #c6d2db;
flex: none;
}
html body .sky-window .side-row.is-active {
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 5px rgba(20, 52, 74, 0.08);
font-weight: 700;
color: #16283a;
}
html body .sky-window .win-content {
padding: 38px 42px 34px;
}
html body .sky-window .win-hero { text-align: center; }
html body .sky-window .win-logo img {
width: 46px;
height: 46px;
opacity: 0.55;
}
html body .sky-window .win-ask {
display: flex;
align-items: center;
gap: 10px;
max-width: 680px;
margin: 20px auto 14px;
padding: 14px 16px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(20, 52, 74, 0.08);
}
html body .sky-window .win-ask .q {
flex: 1;
text-align: right;
font-size: 15px;
color: #7a8794;
padding-inline-start: 6px;
}
html body .sky-window .win-ask-btn {
padding: 10px 22px;
border-radius: 8px;
background: #f1f5f8;
font-size: 14px;
font-weight: 700;
color: #16283a;
white-space: nowrap;
}
html body .sky-window .win-ask-btn.alt {
background: #16283a;
color: #ffffff;
}
html body .sky-window .win-metabar {
display: flex;
justify-content: center;
gap: 22px;
font-size: 13px;
color: #8fa0ad;
}
html body .sky-window .window-body {
padding: 24px 26px 0;
}
html body .sky-window .window-title {
margin: 20px 0 18px;
font-size: 18px;
font-weight: 700;
color: #16283a;
text-align: right;
}
html body .sky-window .mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
html body .sky-window .mini-grid.is-two {
grid-template-columns: repeat(2, 1fr);
max-width: 760px;
margin: 0 auto;
}
html body .sky-window .mini-grid.is-one {
grid-template-columns: 1fr;
max-width: 320px;
margin: 0 auto;
}
html body .sky-window .mini-verdict {
max-width: none;
margin: 14px 0 0;
padding: 13px 16px;
background: #f0faf3;
border: 1px solid #b9e2c4;
border-radius: 12px;
font-size: 14.5px;
font-weight: 700;
color: #1c6b3a;
text-align: center;
}
html body .sky-window .win-lower[data-lower="results"] {
animation: winSwap 0.45s var(--ease) both;
}
@keyframes winSwap {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* responsive: two cards side by side fall back to one column on narrow widths */
@media (max-width: 620px) {
html body .sky-window .mini-grid.is-two {
grid-template-columns: 1fr;
}
}
/* results view ׳’ג‚¬ג€ colored winner / muted loser */
html body .sky-window .mini-card.is-win {
background: linear-gradient(160deg, #f4fbf6, #ecf8f0);
border-color: #b9e2c4;
box-shadow: 0 6px 16px rgba(47, 158, 85, 0.10);
}
html body .sky-window .mini-card.is-win .mini-name { color: #1c6b3a; }
html body .sky-window .mini-card.is-warn {
background: linear-gradient(160deg, #fffaf1, #fdf3e2);
border-color: #f0d5a4;
box-shadow: 0 6px 16px rgba(217, 138, 19, 0.10);
}
html body .sky-window .mini-card.is-warn .mini-name { color: #9a6a16; }
html body .sky-window .mini-card.is-dim {
background: #f7f8fa;
border-color: rgba(0, 0, 0, 0.05);
}
html body .sky-window .mini-card.is-dim .mini-name { color: #7a8794; }
html body .sky-window .mini-card.is-dim img { filter: grayscale(0.45) opacity(0.92); }
html body .sky-window .mini-badge {
align-self: flex-start;
margin-bottom: 8px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.2px;
box-shadow: 0 2px 8px rgba(20, 52, 74, 0.10);
}
html body .sky-window .mini-badge.is-win { background: #2f9e55; color: #ffffff; }
html body .sky-window .mini-badge.is-warn { background: #e0a03c; color: #ffffff; }
html body .sky-window .mini-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
margin-top: 4px;
}
html body .sky-window .chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
html body .sky-window .chip::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.65;
flex: none;
}
/* official rarity chips */
html body .sky-window .chip.o-regular { background: #eef1f4; color: #5b6b78; }
html body .sky-window .chip.o-rare { background: #e8f2fb; color: #2470aa; }
html body .sky-window .chip.o-epic { background: #f2e9fb; color: #7d3fc0; }
html body .sky-window .chip.o-legendary { background: #fdf1de; color: #b06a10; }
/* community tier chips */
html body .sky-window .chip.c-common { background: #eef1f4; color: #5b6b78; }
html body .sky-window .chip.c-uncommon { background: #e6f7f5; color: #0f8f86; }
html body .sky-window .chip.c-rare { background: #e8f2fb; color: #2470aa; }
html body .sky-window .chip.c-veryrare { background: #ecebfd; color: #4f46e5; }
html body .sky-window .chip.c-extremely { background: #fbeaf7; color: #b026a3; }
html body .sky-window .chip.c-ultra { background: #fdeaee; color: #d94562; }
/* verdict ׳’ג‚¬ג€ green for a confident answer, amber for a caution tip */
html body .sky-window .mini-verdict.is-warn {
background: #fff8ea;
border-color: #f0d5a4;
color: #8a5c0c;
}
html body .sky-window .mini-verdict {
position: relative;
padding-inline-start: 44px;
text-align: right;
}
html body .sky-window .mini-verdict::before {
content: "";
position: absolute;
inset-inline-start: 14px;
top: 50%;
margin-top: -11px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #2f9e55 url('data:image/svg+xml;utf8,') center / 14px no-repeat;
}
html body .sky-window .mini-verdict.is-warn::before {
background: #e0a03c url('data:image/svg+xml;utf8,') center / 11px no-repeat;
}
html body .sky-window .mini-card {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 17px 19px 0;
background: #fafbfc;
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 14px;
overflow: hidden;
text-align: right;
}
html body .sky-window .mini-meta {
font-size: 12.5px;
font-weight: 600;
color: #7a8794;
}
html body .sky-window .mini-name {
font-size: 16px;
font-weight: 700;
color: #16283a;
margin: 3px 0 8px;
}
html body .sky-window .mini-line {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: #4f5f6d;
padding: 2.5px 0;
}
html body .sky-window .mini-line i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #b3c2cd;
flex: none;
}
html body .sky-window .mini-card img {
display: block;
width: 100%;
height: 152px;
object-fit: contain; /* full item visible ׳’ג‚¬ג€ never cropped */
background: linear-gradient(180deg, #eef3f7 0%, #e6edf3 100%);
padding: 10px;
box-sizing: border-box;
margin-top: 14px;
}
@media (max-width: 900px) {
html body .sky-window {
width: calc(100% - 40px);
}
html body .sky-window .win-main {
grid-template-columns: 1fr;
}
html body .sky-window .win-sidebar {
display: none;
}
html body .sky-window .mini-grid {
grid-template-columns: 1fr;
}
html body .sky-window .mini-card img {
height: 116px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 12: live demo inside the window
Clicking the ask bar (or scrolling it into view) plays a
step-by-step "working task" demo of the trade checker,
ending with a verdict; the idle view returns via ׳³ג€”׳³ג€“׳³ג€¢׳³ֲ¨.
========================================================= */
html body .sky-window [hidden] {
display: none !important;
}
/* ask bar ׳’ג‚¬ג€ live typing state during the demo */
html body .sky-window .win-ask.is-focused {
border-color: rgba(20, 52, 74, 0.42);
box-shadow: 0 6px 22px rgba(20, 52, 74, 0.14);
}
html body .sky-window .win-ask .q.is-typed {
color: #16283a;
}
html body .sky-window .type-caret {
display: inline-block;
width: 2px;
height: 1.05em;
margin-inline-start: 2px;
vertical-align: -0.18em;
background: #14344a;
animation: caretBlink 0.85s steps(1) infinite;
}
@keyframes caretBlink {
50% { opacity: 0; }
}
/* press animations for the demo cursor's clicks */
html body .sky-window .demo-cursor::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(20, 52, 74, 0.5);
opacity: 0;
transform: scale(0.4);
}
html body .sky-window .demo-cursor.is-clicking::after {
animation: cursorRipple 0.55s var(--ease) both;
}
@keyframes cursorRipple {
0% { opacity: 0.7; transform: scale(0.4); }
100% { opacity: 0; transform: scale(3); }
}
html body .sky-window .win-ask.is-click-flash {
animation: askFlash 0.42s var(--ease);
}
@keyframes askFlash {
0% { box-shadow: 0 4px 18px rgba(20, 52, 74, 0.08); }
35% { box-shadow: 0 0 0 7px rgba(20, 52, 74, 0.12), 0 4px 18px rgba(20, 52, 74, 0.14); }
100% { box-shadow: 0 4px 18px rgba(20, 52, 74, 0.08); }
}
html body .sky-window .win-ask-btn.is-pressed {
animation: btnPress 0.42s var(--ease) both;
}
@keyframes btnPress {
0% { transform: scale(1); background: #f1f5f8; }
40% { transform: scale(0.87); background: #dfe8ee; }
100% { transform: scale(1); background: #f1f5f8; }
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 13: under the sky section
A soft shadow falls from the sky/window onto the white
section below; that section gets side "rails" ׳’ג‚¬ג€ thin
vertical lines hugging the content, white outside them.
========================================================= */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
box-shadow: 0 34px 60px -22px rgba(20, 52, 74, 0.20);
}
html body section.band.band-rails,
html[data-theme="light"] body section.band.band-rails,
html[data-theme="dark"] body section.band.band-rails {
background: transparent;
border-bottom: 1px solid rgba(20, 52, 74, 0.08);
}
html body section.band.band-rails .shell {
border-inline: 1px solid rgba(20, 52, 74, 0.12);
padding-inline: 46px;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 14: closing band, blue beam CARD
A standalone rounded card (like the sky canvas) whose
background is a blue beam of light falling from above onto
the card's bottom-center; white page around it.
========================================================= */
html body section.band.closing,
html[data-theme="light"] body section.band.closing,
html[data-theme="dark"] body section.band.closing {
background: none;
padding-block: clamp(30px, 4.5vw, 60px) clamp(52px, 7vw, 96px);
}
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell {
border-radius: 26px;
padding-block: clamp(56px, 8vw, 106px);
background:
linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 32%),
conic-gradient(from 270deg at 50% 118%,
rgba(255, 255, 255, 0) 0deg,
rgba(255, 255, 255, 0.92) 35deg,
rgba(255, 255, 255, 0) 52deg,
rgba(154, 202, 255, 0.5) 60deg,
rgba(96, 165, 250, 0.8) 74deg,
rgba(52, 130, 240, 0.98) 88deg,
rgba(45, 118, 235, 1) 90deg,
rgba(52, 130, 240, 0.98) 92deg,
rgba(96, 165, 250, 0.8) 106deg,
rgba(154, 202, 255, 0.5) 120deg,
rgba(255, 255, 255, 0) 128deg,
rgba(255, 255, 255, 0.92) 145deg,
rgba(255, 255, 255, 0) 180deg),
radial-gradient(120% 80% at 50% 116%, rgba(93, 164, 249, 0.45) 0%, rgba(93, 164, 249, 0) 75%);
}
html[data-theme="dark"] body section.band.closing .shell {
border-radius: 26px;
padding-block: clamp(56px, 8vw, 106px);
background:
linear-gradient(180deg, var(--plain) 0%, rgba(10, 18, 30, 0) 32%),
conic-gradient(from 270deg at 50% 118%,
rgba(10, 18, 30, 0) 0deg,
rgba(10, 18, 30, 0.92) 35deg,
rgba(10, 18, 30, 0) 52deg,
rgba(30, 80, 160, 0.5) 60deg,
rgba(46, 110, 205, 0.8) 74deg,
rgba(38, 96, 190, 0.95) 90deg,
rgba(46, 110, 205, 0.8) 106deg,
rgba(30, 80, 160, 0.5) 120deg,
rgba(10, 18, 30, 0) 128deg,
rgba(10, 18, 30, 0.92) 145deg,
rgba(10, 18, 30, 0) 180deg),
radial-gradient(120% 80% at 50% 116%, rgba(40, 100, 190, 0.42) 0%, rgba(40, 100, 190, 0) 75%);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 15: full-device responsive sweep
Phones (iPhone SE 375px, fold covers 344px), tablets,
foldables inner screens, and desktops. Fluid + clamp rules
above handle in-between sizes; this part fixes the new
components at the breakpoints.
========================================================= */
/* no accidental horizontal scroll on any device */
html,
body {
overflow-x: clip;
}
/* wider laptops: window gutters a bit smaller than desktop */
@media (max-width: 1220px) {
html body .sky-window {
width: calc(100% - 72px);
}
}
@media (max-width: 900px) {
html body .sky-window {
width: calc(100% - 32px);
}
html body section.band.band-rails .shell {
padding-inline: 28px;
}
}
@media (max-width: 640px) {
/* tight gutters like the sky mat */
html body .sky-window {
width: calc(100% - 18px);
}
html body .sky-window .win-content {
padding: 22px 16px 26px;
}
html body .sky-window .win-ask {
margin: 12px 0 10px;
max-width: none;
padding: 10px 12px;
}
html body .sky-window .win-ask .q {
font-size: 13.5px;
}
html body .sky-window .win-ask-btn {
padding: 9px 14px;
font-size: 13px;
}
html body .sky-window .win-metabar {
gap: 12px;
font-size: 11.5px;
}
html body .sky-window .window-title {
font-size: 16px;
margin: 10px 0 14px;
}
html body .sky-window .mini-grid {
gap: 10px;
}
html body .sky-window .mini-card {
padding: 13px 14px 0;
}
html body .sky-window .mini-card img {
height: 104px;
}
html body .sky-window .mini-grid.is-two {
max-width: none;
}
html body .sky-window .mini-grid.is-one {
max-width: none;
}
html body section.band.band-rails .shell {
border-inline: 0;
padding-inline: 18px;
}
html body section.band.band-rails {
border-inline: 0;
}
html body section.band.closing .shell {
border-radius: 18px;
}
html body .sky-frame {
padding: 6px 8px 24px;
}
html body .sky-canvas {
border-radius: 16px;
}
}
/* very small screens / fold covers (320׳’ג‚¬ג€360px) */
@media (max-width: 360px) {
html body .sky-window .win-content {
padding: 18px 12px 20px;
}
html body .sky-window .mini-card {
padding: 12px 12px 0;
}
html body section.band.band-rails .shell {
padding-inline: 14px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 17: showcase zig-zag restored
Inside the rails the image and the copy spread side by
side, alternating ׳’ג‚¬ג€ no narrow centered column with empty
white margins.
========================================================= */
html body .showcase-block {
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(30px, 5vw, 72px);
align-items: center;
text-align: start;
justify-items: stretch;
padding-block: clamp(34px, 4.5vw, 64px);
}
html body .showcase-block.is-reversed .showcase-media {
order: 2;
}
html body .showcase-media {
max-width: none;
width: 100%;
min-height: 320px;
}
html body .showcase-media > img {
max-height: 244px;
}
html body .showcase-copy {
max-width: none;
justify-items: start;
}
/* back to one centered column on phones */
@media (max-width: 900px) {
html body .showcase-block {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 24px;
}
html body .showcase-block.is-reversed .showcase-media {
order: 0;
}
html body .showcase-copy {
justify-items: center;
max-width: 640px;
}
html body .showcase-media {
max-width: min(420px, 100%);
min-height: 0;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 18: window chrome matches the reference
The sidebar runs the FULL window height (right side) and
the toolbar lives inside the content column, above the
content ׳’ג‚¬ג€ like the aside.com browser mock. Plus: the sky's
shadow must paint over the white section below.
========================================================= */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
position: relative;
z-index: 1;
}
html body .sky-window .win-body {
display: flex;
flex-direction: column;
min-width: 0;
}
html body .sky-window .win-toolbar {
padding: 11px 14px;
border-bottom: 0;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 19: one continuous "rails" frame
All the content below the sky sits between the same two
vertical lines from the showcase to the closing card ׳’ג‚¬ג€
white outside them, sections' tint inside, like aside.com.
The rails width EQUALS the window width so the lines read
as continuations of the window's side edges.
========================================================= */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
/* window width + a small inset on each side ׳’ג‚¬ג€ the lines stay
close to the window edges, only a touch farther out */
width: min(1340px, calc(100% - 104px));
margin-inline: auto;
border-inline: 1px solid rgba(20, 52, 74, 0.12);
background: transparent;
overflow-x: clip;
}
@media (max-width: 1220px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
width: calc(100% - 64px);
}
}
@media (max-width: 900px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
width: calc(100% - 24px);
}
}
@media (max-width: 640px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
width: calc(100% - 16px);
}
}
/* the lines moved to the rails frame ׳’ג‚¬ג€ the showcase shell
keeps only its inner padding */
html body section.band.band-rails .shell,
html[data-theme="light"] body section.band.band-rails .shell,
html[data-theme="dark"] body section.band.band-rails .shell {
border-inline: 0;
padding-inline: 46px;
}
@media (max-width: 640px) {
html body .site-rails .shell,
html[data-theme="light"] body .site-rails .shell,
html[data-theme="dark"] body .site-rails .shell {
padding-inline: 20px;
}
html body section.band.band-rails .shell {
padding-inline: 20px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 20: the footer joins the rails
The two lines continue through the footer to the very
bottom of the page. Dark theme: rails use the dark page
background instead of forced white.
========================================================= */
html body .site-footer {
width: min(1340px, calc(100% - 104px));
margin-inline: auto;
border-inline: 1px solid rgba(20, 52, 74, 0.12);
}
html[data-theme="dark"] body .site-rails,
html[data-theme="dark"] body .site-footer {
border-inline-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] body .site-rails {
background: var(--bg);
}
@media (max-width: 640px) {
html body .site-footer {
width: calc(100% - 16px);
}
}
@media (max-width: 1220px) {
html body .site-footer {
width: calc(100% - 64px);
}
}
@media (max-width: 900px) {
html body .site-footer {
width: calc(100% - 24px);
}
}
/* the footer block: big sweeping top corners like the aside
section shape ׳’ג‚¬ג€ the arc drawn in the sketch */
html body .site-footer {
border-radius: 56px 56px 0 0;
}
html[data-theme="dark"] body .site-footer {
background: rgba(255, 255, 255, 0.03);
}
@media (max-width: 640px) {
html body .site-footer {
border-radius: 34px 34px 0 0;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 21: the rails lines flare out into the
footer. Instead of ending square, each line bends outward
with a big rounded diagonal sweep and the footer becomes
full-bleed below it ׳’ג‚¬ג€ like the blue sketch.
========================================================= */
html body .site-footer {
width: 100%;
border-inline: 0;
border-radius: 0;
position: relative;
}
html body .site-footer .shell,
html[data-theme="light"] body .site-footer .shell,
html[data-theme="dark"] body .site-footer .shell {
width: min(1340px, calc(100% - 104px));
padding-inline: 46px;
}
html body .footer-flare {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 0;
pointer-events: none;
}
html body .footer-flare i {
position: absolute;
bottom: 0;
height: 112px;
width: calc((100% - min(1340px, calc(100% - 104px))) / 2 + 1px);
}
html body .flare-left { left: 0; }
html body .flare-right { right: 0; }
/* filled wedge: covers the straight rail segment so only the
curve remains, then hands over to the footer background */
html body .flare-left::before,
html body .flare-right::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
}
html body .flare-left::before {
border-top-left-radius: 100% 100%;
}
html body .flare-right::before {
border-top-right-radius: 100% 100%;
}
/* the stroked arc itself: with a full-corner radius the top
and side borders are nothing but the curve */
html body .flare-left::after {
content: "";
position: absolute;
inset: 0;
border-top: 1px solid rgba(20, 52, 74, 0.12);
border-left: 1px solid rgba(20, 52, 74, 0.12);
border-top-left-radius: 100% 100%;
}
html body .flare-right::after {
content: "";
position: absolute;
inset: 0;
border-top: 1px solid rgba(20, 52, 74, 0.12);
border-right: 1px solid rgba(20, 52, 74, 0.12);
border-top-right-radius: 100% 100%;
}
html[data-theme="dark"] body .footer-flare i::before,
html[data-theme="dark"] body .footer-flare i::after {
background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] body .footer-flare i::after {
background: none;
border-top-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] body .flare-left::after { border-left-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] body .flare-right::after { border-right-color: rgba(255, 255, 255, 0.14); }
@media (max-width: 1220px) {
html body .site-footer { width: 100%; }
html body .site-footer .shell { width: calc(100% - 64px); }
html body .footer-flare i { width: calc((100% - (100% - 64px)) / 2 + 3px); }
}
@media (max-width: 900px) {
html body .site-footer .shell { width: calc(100% - 24px); }
html body .footer-flare i { width: calc((100% - (100% - 24px)) / 2 + 3px); }
}
@media (max-width: 640px) {
html body .site-footer { width: 100%; border-radius: 0; }
html body .site-footer .shell { width: calc(100% - 16px); padding-inline: 20px; }
html body .footer-flare i { height: 70px; width: calc((100% - (100% - 16px)) / 2 + 3px); }
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 22: the closing beam fills its whole
section between the two rails lines (edge to edge, no
rounded standalone card), and the beam itself matches the
reference: light-blue upper corners, white only in the
bottom corners, deep core at bottom-center, soft dots.
========================================================= */
html body section.band.closing,
html[data-theme="light"] body section.band.closing,
html[data-theme="dark"] body section.band.closing {
padding-block: clamp(48px, 6vw, 88px);
}
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell {
/* aside.com banner replica: image background, rounded card,
wide, padding 128px 32px */
width: calc(100% - 24px);
max-width: none;
margin-inline: auto;
display: block;
border-radius: 22.4px;
padding-block: clamp(64px, 9vw, 128px);
padding-inline: 32px;
background-image: url("images/bg-banner.png");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 24px);
max-width: none;
margin-inline: auto;
display: block;
border-radius: 22.4px;
padding-block: clamp(64px, 9vw, 128px);
padding-inline: 32px;
background-image: url("images/bg-banner.png");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: #0a0a0c;
}
/* on the blue image the headline and the lead are near-black,
like aside's banner; the button is the dark pill */
html body section.band.closing .shell h2,
html[data-theme="dark"] body section.band.closing .shell h2 {
color: #0a0a0c;
}
html body section.band.closing .shell .section-lead,
html[data-theme="dark"] body section.band.closing .shell .section-lead {
color: rgba(10, 10, 12, 0.72);
}
html body section.band.closing .button-primary,
html[data-theme="dark"] body section.band.closing .button-primary {
background: #0a0a0c;
color: #ffffff;
}
/* part 28 ׳’ג‚¬ג€ banner fills its box: aside proportions (1344x468),
content vertically centered inside the image card */
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
aspect-ratio: 1344 / 468;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
}
html body section.band.closing .shell h2,
html body section.band.closing .shell .section-lead {
max-width: none;
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
padding-block: 64px;
}
}
/* part 29 ׳’ג‚¬ג€ the card fills the whole section: zero band padding,
touching the side lines so the radii own the corners */
html body section.band.closing,
html[data-theme="light"] body section.band.closing,
html[data-theme="dark"] body section.band.closing {
padding-block: 0;
}
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 2px);
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 2px);
}
}
/* part 30 ׳’ג‚¬ג€ no dead margin below the banner card; card sits on
the footer closure line */
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
margin: 0 auto;
}
/* part 31 ׳’ג‚¬ג€ less rounded banner card */
html body section.band.closing .shell,
html[data-theme="light"] body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
border-radius: 12px !important;
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
border-radius: 10px !important;
}
}
/* part 32 ׳’ג‚¬ג€ end-of-site wave: two soft layers drifting slowly,
at the very bottom of the footer, behind its content */
html body .site-footer {
position: relative;
}
html body .site-footer .shell {
position: relative;
z-index: 1;
}
html body .site-wave {
position: absolute;
z-index: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 240px;
margin: 0;
border: 0;
overflow: hidden;
background: none;
display: block;
pointer-events: none;
}
@media (max-width: 640px) {
html body .site-wave { height: 130px; }
}
html body .site-wave .wave-layer {
position: absolute;
inset-inline: 0;
bottom: 0;
background-repeat: repeat-x;
background-size: 1200px 100%;
pointer-events: none;
}
html body .site-wave .wave-back {
height: 80%;
opacity: 0.05;
background-image: url("data:image/svg+xml;utf8,");
animation: waveDrift 26s linear infinite reverse;
}
html body .site-wave .wave-front {
height: 96%;
opacity: 0.09;
background-image: url("data:image/svg+xml;utf8,");
animation: waveDrift 19s linear infinite;
}
@keyframes waveDrift {
from { background-position-x: 0; }
to { background-position-x: -1200px; }
}
html[data-theme="dark"] body .site-wave .wave-back {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.07;
}
html[data-theme="dark"] body .site-wave .wave-front {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.12;
}
@media (max-width: 640px) {
html body .site-wave { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
html body .site-wave .wave-layer { animation: none; }
}
/* part 34 ׳’ג‚¬ג€ catalog breaks out to full-bleed dark slab, and the
rails split into a head block (showcase) and tail block (trade
+ closing); the head block loses the closure band */
html body .site-rails.is-head {
padding-bottom: 0;
}
html body .site-rails.is-head::after {
display: none;
}
html[data-theme="light"] body .site-rails.is-head,
html[data-theme="dark"] body .site-rails.is-head,
html body .site-rails.is-head {
padding-bottom: 0;
}
html[data-theme="light"] body .site-rails.is-head::after,
html[data-theme="dark"] body .site-rails.is-head::after,
html body .site-rails.is-head::after {
display: none;
}
html body section#catalog {
width: 100vw;
margin-inline: calc(50% - 50vw);
padding-inline: 40px;
border-inline: 0;
border-radius: 140px;
}
@media (max-width: 640px) {
html body section#catalog {
padding-inline: 20px;
}
}
html body section#catalog .shell {
border-inline: 0;
}
/* part 36 ׳’ג‚¬ג€ cream site background: rails, head band, closing
covers, flare wedges all follow var(--bg) instead of white */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails,
html body section.band.band-rails,
html[data-theme="light"] body section.band.band-rails {
background: var(--bg);
}
html body section.band.closing::before,
html body section.band.closing::after,
html body .site-footer,
html[data-theme="light"] body .site-footer,
html body .footer-flare i::before,
html[data-theme="light"] body .footer-flare i::before {
background: var(--bg);
}
html[data-theme="dark"] body section.band.closing::before,
html[data-theme="dark"] body section.band.closing::after,
html[data-theme="dark"] body .footer-flare i::before {
background: var(--bg);
}
/* part 35 ׳’ג‚¬ג€ rounded corners on the dark slab + scroll reveal
(JS adds .is-reveal, then .is-reveal-visible when it scrolls in) */
html body section#catalog {
border-radius: 140px;
}
/* part 35b ׳’ג‚¬ג€ catalog zoom: continuous scroll-driven scale,
transform origin at the section center */
html body section#catalog {
transform-origin: 50% 42%;
will-change: transform, opacity;
}
html body section#catalog.is-reveal {
opacity: 0;
transform: translateY(90px) scale(0.94);
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
html body section#catalog.is-reveal.is-reveal-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
html body section#catalog.is-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* part 39 ׳’ג‚¬ג€ the tail rails slides up beneath the dark catalog
slab: its side lines continue up behind the rounded corners */
html body section#catalog {
position: relative;
z-index: 2;
}
html body .site-rails.is-tail,
html[data-theme="light"] body .site-rails.is-tail,
html[data-theme="dark"] body .site-rails.is-tail {
margin-top: -64px;
}
html body .site-rails.is-tail > .band:first-child {
padding-top: calc(64px + clamp(48px, 6vw, 88px));
}
/* part 38 ׳’ג‚¬ג€ modern thin rounded scrollbars everywhere
(light: soft dark thumb; dark catalog: light thumb) */
html {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.24) transparent;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.24);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-corner {
background: transparent;
}
html body section#catalog ::-webkit-scrollbar-thumb,
html body section#catalog ::-webkit-scrollbar-corner {
background: rgba(255, 255, 255, 0.22);
}
html body section#catalog ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.38);
}
html body section#catalog {
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
html body .item-modal ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.22);
}
html body .item-modal {
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
/* part 33 ׳’ג‚¬ג€ light-only site: the catalog section gets its own
dark theme (like the reference), scoped token override */
html body section#catalog,
html[data-theme="light"] body section#catalog,
html[data-theme="dark"] body section#catalog {
color-scheme: dark;
--bg: #1c1c1c;
--bg-soft: #202020;
--panel: #222222;
--panel-2: #262626;
--panel-3: #2e2e2e;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #ffffeb;
--text-2: #d8d8d0;
--muted: #a6a69d;
--muted-2: #87877f;
--plain: #1c1c1c;
--tint: #232323;
--media-surface: #2a2a2a;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35);
--accent: #8f7bff;
--accent-soft: rgba(143, 123, 255, 0.14);
--accent-line: rgba(143, 123, 255, 0.4);
--on-invert: rgba(255, 255, 255, 0.72);
background: #1c1c1c;
color: #ffffeb;
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 23: uniform footer bottom block
The flare wedges blend into the page background (no two
tone patches), the footer keeps the rails lines down its
outer edges to the bottom of the page.
========================================================= */
html body .site-footer {
border-inline: 1px solid rgba(20, 52, 74, 0.12);
}
html[data-theme="dark"] body .site-footer {
border-inline-color: rgba(255, 255, 255, 0.14);
background: var(--bg);
}
html[data-theme="dark"] body .footer-flare i::before {
background: var(--bg);
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 24: the flare band lives BELOW the beam
Give the rails a bottom strip so the blue beam ends above
it and the flare curve never crosses the beam.
========================================================= */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
padding-bottom: 112px;
}
@media (max-width: 640px) {
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
padding-bottom: 70px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 25: footer closure line at the band top
The horizontal line that closes the footer sits where the
beam ends (top of the flare band), the arcs hang from it,
and the old border-top inside the footer is removed.
========================================================= */
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
position: relative;
display: flex;
flex-direction: column;
}
html body section.band.closing {
margin-top: auto;
}
@media (max-width: 640px) {
html body section.band.closing .shell,
html[data-theme="dark"] body section.band.closing .shell {
width: calc(100% - 2px);
}
}
html body .site-rails::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 112px;
height: 0;
border-bottom: 1px solid rgba(20, 52, 74, 0.12);
}
html[data-theme="dark"] body .site-rails::after {
border-bottom-color: rgba(255, 255, 255, 0.14);
}
html body .site-footer {
border-top: 0;
}
@media (max-width: 640px) {
html body .site-rails::after {
bottom: 70px;
}
}
/* =========================================================
Design v10 ׳’ג‚¬ג€ part 26: clean closing ground
Inside the closing section there are no rails lines and no
hairline above it ׳’ג‚¬ג€ only the floating beam card; the frame
resumes only at the footer closure line below.
========================================================= */
html body section.band.closing {
position: relative;
margin-inline: -1px;
}
html body section.band.closing::before,
html body section.band.closing::after {
content: "";
position: absolute;
top: -1px;
bottom: -1px;
width: 2px;
z-index: 2;
background: transparent;
}
html body section.band.closing::before { right: 0; }
html body section.band.closing::after { left: 0; }
html[data-theme="dark"] body section.band.closing::before,
html[data-theme="dark"] body section.band.closing::after {
background: var(--bg);
}
/* part 41 ׳’ג‚¬ג€ edges-only zoom: the dark slab's background moves to a
dedicated ::before layer; scrolling zooms ONLY that layer's top and
bottom edges (horizontal compensated to always cover 100vw), so the
content stays perfectly still and gives an entry/exit feeling */
html body section#catalog::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #1c1c1c;
border-radius: 140px;
transform: scaleX(var(--zoom-inv, 1)) scaleY(var(--zoom, 1));
transform-origin: 50% 50%;
will-change: transform;
}
/* the section itself becomes transparent ׳’ג‚¬ג€ the zooming ::before is the
only dark surface, so the edge movement is actually visible */
html body section#catalog,
html[data-theme="light"] body section#catalog,
html[data-theme="dark"] body section#catalog {
background: transparent;
}
/* part 44 ׳’ג‚¬ג€ big bold stat row under the catalog title (same cream color) */
html body section#catalog .catalog-stats {
display: flex;
justify-content: center;
gap: clamp(32px, 6vw, 96px);
margin-top: clamp(22px, 3vw, 44px);
flex-wrap: wrap;
}
html body section#catalog .catalog-stat {
display: grid;
justify-items: center;
gap: 4px;
}
html body section#catalog .catalog-stat span {
font-size: clamp(13px, 1.4vw, 16px);
font-weight: 600;
color: #b9b8ae;
}
html body section#catalog .catalog-stat small {
font-size: 0.8em;
color: #8d8c82;
}
html body section#catalog .catalog-stat strong {
font-size: clamp(30px, 4.2vw, 58px);
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.01em;
color: #ffffeb;
}
/* part 43 ׳’ג‚¬ג€ catalog header: wispr-style centered display typography */
html body section#catalog .catalog-head,
html[data-theme="light"] body section#catalog .catalog-head,
html[data-theme="dark"] body section#catalog .catalog-head {
display: block;
text-align: center;
margin: 0 auto clamp(28px, 4vw, 56px);
max-width: 900px;
}
html body section#catalog .catalog-kicker {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #a6a69d;
margin-bottom: clamp(16px, 2.4vw, 30px);
}
html body section#catalog .catalog-display {
margin: 0;
font-family: Georgia, "Times New Roman", "Noto Serif Hebrew", serif;
font-weight: 400;
font-size: clamp(34px, 5.4vw, 68px);
line-height: 1.12;
letter-spacing: -0.01em;
color: #ffffeb;
text-align: center;
}
html body section#catalog .catalog-display em {
font-style: italic;
}
html body section#catalog .catalog-lead {
margin-top: clamp(12px, 1.8vw, 22px);
color: #a6a69d;
text-align: center;
font-size: clamp(14px, 1.5vw, 17px);
}
/* part 53 ׳’ג‚¬ג€ catalog head: single green marquee band, full-bleed (clients-strip style) */
#catalog .marquee {
position: relative;
overflow: hidden;
background: #0e3f8f;
/* logos hug the TOP of the card; the oversized bottom padding creates the
extra blue depth that hides behind the black card's 118px overlap and
keeps the 96px corner curve fully covered ׳’ג‚¬ג€ logos stay in full view */
padding: clamp(56px, 8vw, 96px) 0 calc(clamp(56px, 8vw, 96px) + 96px);
}
/* soft side "air layers": REMOVED per user ׳’ג‚¬ג€ instead the scroll region
is simply inset from the card sides so chips stop well away from the
rounded corners, exactly like the reference */
#catalog .marquee-clip {
margin-inline: 0;
overflow: hidden;
}
#catalog .marquee-track {
display: inline-flex;
align-items: center;
gap: 72px;
width: max-content;
padding: 0 36px;
animation: mm-marquee 44s linear infinite;
will-change: transform;
}
#catalog .mq-chip {
display: inline-flex;
align-items: center;
gap: 12px;
color: #eafff2;
font-weight: 700;
font-size: 17px;
white-space: nowrap;
opacity: .95;
}
#catalog .mq-chip img {
width: 34px;
height: 34px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
@keyframes mm-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
#catalog .marquee-track { animation: none; }
}
/* part 52 ׳’ג‚¬ג€ white card body, black Accept All, icon-only speak button */
html body div#consent-drawer .consent-card {
background: transparent;
border-color: rgba(0, 0, 0, 0.06);
}
html body div#consent-drawer .consent-card > strong {
color: #16161a;
}
html body div#consent-drawer .consent-card p {
color: #3a3a38;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary {
background: #000000;
border-color: #000000;
color: #ffffff;
font-family: Figtree, Arial, sans-serif;
font-size: 20px;
font-weight: 400; /* not bold */
letter-spacing: 0.02em;
}
/* hand-drawn blue pencil stroke under the card title */
html body div#consent-drawer .consent-card > strong {
display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C 45 2.5, 90 7.5, 135 4.5 S 195 4, 217 5.5' fill='none' stroke='%234aa3ff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 100% 10px;
padding-bottom: 8px;
margin-bottom: 8px;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary:hover {
background: #1c1c1c;
}
html body div#consent-drawer.overlay-mode .consent-speak {
background: #f3f9ee;
border-color: rgba(17, 78, 11, 0.18);
}
html body div#consent-drawer.overlay-mode .consent-speak svg.icon {
width: 32px;
height: 32px;
display: block;
}
html body div#consent-drawer.overlay-mode .consent-speak img,
html body div#consent-drawer.overlay-mode .consent-speak i {
display: none;
}
html body div#consent-drawer.overlay-mode .consent-speak svg {
display: none;
}
/* part 51 ׳’ג‚¬ג€ karaoke lighting of the disclosure text while the narration plays */
html body #consent-text .k-word {
border-radius: 8px;
padding: 1px 4px;
margin: -1px -2px;
transition: background-color 0.18s ease;
}
html body #consent-text .k-word.is-past {
background: rgba(255, 214, 61, 0.35);
}
html body #consent-text .k-word.is-active {
background: #ffd94a;
}
html body #consent-text .k-word.is-active {
box-shadow: 0 2px 10px rgba(255, 214, 61, 0.35);
}
/* part 50 ׳’ג‚¬ג€ spacious modal card, big text, full-width buttons */
html body div#consent-drawer.overlay-mode {
padding: 32px 24px;
}
html body div#consent-drawer.overlay-mode .consent-card {
width: min(780px, calc(100vw - 48px));
max-width: 780px;
padding: 32px 40px 26px;
border-radius: 20px;
box-shadow: none;
}
html body div#consent-drawer.overlay-mode .consent-card > strong {
font-size: 22px;
margin-bottom: 14px;
}
html body div#consent-drawer.overlay-mode .consent-card p {
font-size: 28px;
line-height: 1.6;
margin-bottom: 24px;
}
html body div#consent-drawer.overlay-mode .consent-buttons {
display: block;
}
html body div#consent-drawer.overlay-mode .consent-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px;
font-size: 16px;
font-weight: 700;
}
html body div#consent-drawer.overlay-mode .consent-speak {
width: 100%;
justify-content: center;
padding: 13px;
font-size: 15px;
background: #f3f9ee;
border-color: rgba(17, 78, 11, 0.18);
margin: 12px 0 0;
min-height: 52px;
}
html body div#consent-drawer.overlay-mode .consent-speak:hover {
background: #e9f3e2;
}
html body div#consent-drawer.overlay-mode .consent-speak svg {
width: 19px;
height: 19px;
}
/* part 49 ׳’ג‚¬ג€ wider consent card + centered modal mode + disclose button */
html body div#consent-drawer .consent-card {
width: min(520px, calc(100vw - 32px));
padding: 24px 26px 18px;
}
html body div#consent-drawer .consent-card > strong {
font-size: 18px;
margin-bottom: 10px;
}
html body div#consent-drawer .consent-card p {
font-size: 14.5px;
}
html body div#consent-drawer .consent-btn {
padding: 11px 18px;
font-size: 15px;
}
/* modal mode: centered on a dimmed backdrop */
html body .consent-drawer.overlay-mode {
inset: 0;
width: 100%;
display: grid;
place-items: center;
background: rgba(12, 14, 16, 0.55);
backdrop-filter: blur(2px);
padding: 24px;
}
html body .consent-drawer.overlay-mode .consent-card {
max-width: 520px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
/* speak button inside the card */
html body .consent-speak {
display: flex;
align-items: center;
gap: 8px;
margin: 12px auto 0;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #f7f5e6;
color: #16161a;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
}
html body .consent-speak svg {
width: 17px;
height: 17px;
}
html body .consent-speak:hover {
background: #efede0;
}
html body .consent-speak.is-speaking {
border-color: #1a4d45;
color: #1a4d45;
}
/* corner disclose button (top-left of the header band) */
html body .disclose-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem;
min-height: 48px;
min-width: 190px;
text-align: center;
background-color: #000000; /* base: full black */
color: #ffffff;
border: 2px solid #000000;
border-radius: 0.5rem;
font-family: Figtree, Arial, sans-serif;
font-weight: 600;
line-height: 16px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.3s;
}
html body .disclose-button .db-text {
position: relative;
z-index: 1;
}
html body .disclose-button svg,
html body .disclose-button i {
display: none;
}
/* white wave that floods the button upward on hover (animated sea) */
html body .disclose-button .wave {
position: absolute;
width: 100%;
height: 200%;
background: url(../images/wave-white.svg);
background-size: 200% 100%;
background-repeat: repeat-x;
top: 105%;
left: 0;
animation: db-wave 2s linear infinite;
transition: top 0.5s;
z-index: 0;
pointer-events: none;
}
@keyframes db-wave {
from { background-position-x: 0; }
to { background-position-x: 200%; }
}
html body .disclose-button:hover {
color: #000000;
}
html body .disclose-button:hover .wave {
top: -100%; /* the white sea floods the whole button */
}
html body .header-actions {
display: flex;
align-items: center;
justify-content: flex-end; /* inline-end = the left side in RTL */
margin-inline-end: 10px; /* symmetric with the pin inset on the right */
}
html body .disclose-button:hover {
color: #1a1a1a;
transform: scale(0.98);
}
@media (max-width: 640px) {
html body .disclose-button {
left: 16px;
top: 12px;
padding: 8px 12px;
}
html body .disclose-button span {
display: none;
}
}
/* part 48 ׳’ג‚¬ג€ consent / disclosure drawer (like the reference cookie card):
cream card bottom-left, ghost + dark-green primary buttons */
html body .consent-drawer {
position: fixed;
z-index: 80;
bottom: 20px;
inset-inline-start: 20px;
width: min(360px, calc(100vw - 32px));
}
html body .consent-card {
background: #ffffe6;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
padding: 18px 18px 14px;
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
html body .consent-card > strong {
display: block;
font-size: 16px;
font-weight: 800;
color: #16161a;
margin-bottom: 8px;
}
html body .consent-card p {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.65;
color: #3a3a38;
}
html body .consent-buttons {
display: flex;
gap: 10px;
align-items: center;
}
html body .consent-btn {
border-radius: 10px;
padding: 10px 16px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
html body .consent-ghost {
background: #f7f5e6;
border: 1px solid rgba(0, 0, 0, 0.14);
color: #16161a;
}
html body .consent-ghost:hover {
background: #efede0;
}
html body .consent-primary {
background: #1a4d45;
border: 1px solid #1a4d45;
color: #ffffff;
}
html body .consent-primary:hover {
background: #23635a;
}
html body .consent-foot {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 12px;
font-size: 12px;
color: #6d6a5c;
}
html body .consent-foot a {
color: #4a4842;
text-decoration: none;
}
html body .consent-foot a:hover {
text-decoration: underline;
}
html body .consent-brand {
color: #87857a;
white-space: nowrap;
}
@media (max-width: 640px) {
html body .consent-drawer {
inset-inline: 16px;
inset-inline-start: 16px;
bottom: 16px;
width: auto;
}
}
/* part 47 ׳’ג‚¬ג€ clear-all as a red trash icon (like the game), centered */
html body #trade-actions,
html[data-theme="light"] body #trade-actions,
html[data-theme="dark"] body #trade-actions {
display: flex !important;
justify-content: center;
margin-top: clamp(10px, 1.6vw, 18px);
}
html body .trade-clear-button {
width: 44px;
height: 44px;
border-radius: 12px;
background: transparent;
border: 0;
color: #e5453d;
display: grid;
place-items: center;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
html body .trade-clear-button svg {
width: 26px;
height: 26px;
}
html body .trade-clear-button:hover {
background: rgba(229, 69, 61, 0.09);
transform: translateY(-1px);
}
html body .trade-clear-button:active {
transform: scale(0.94);
}
/* part 46 ׳’ג‚¬ג€ declutter: remove column headers, score chips, swap
button and actions bar; the result strip already names the sides.
Give the two fields generous room instead. */
html body #trade-board .trade-column-head,
html body #trade-board .trade-divider,
html body #trade-actions {
display: none !important;
}
html body #trade-board .trade-column {
padding: clamp(16px, 2vw, 24px);
background: #fbfaf4;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
}
html body #trade-board .search-field-small {
margin-bottom: 12px;
}
html body #trade-board .search-field-small input {
padding-block: 12px;
font-size: 15px;
}
@media (max-width: 640px) {
html body #trade-board .trade-column {
padding: 14px;
}
}
/* part 45 ׳’ג‚¬ג€ trade sides styled like the in-game swap screen:
square item tiles with colored rarity frames, slot-less empty state */
html body #trade-board .trade-list,
html[data-theme="light"] body #trade-board .trade-list,
html[data-theme="dark"] body #trade-board .trade-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
padding: 2px;
}
html body #trade-board .trade-list:empty {
display: none;
}
html body #trade-board .trade-item {
position: relative;
aspect-ratio: 1;
background: #fbfaf4;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 8px;
justify-content: center;
}
html body #trade-board .trade-item[data-rarity="legendary"] { border-color: var(--legendary, #d7a614); }
html body #trade-board .trade-item[data-rarity="epic"] { border-color: var(--epic, #8f5bd1); }
html body #trade-board .trade-item[data-rarity="rare"] { border-color: var(--rare, #3d7bd9); }
html body #trade-board .trade-item[data-rarity="regular"] { border-color: rgba(0, 0, 0, 0.18); }
html body #trade-board .trade-item-copy,
html body #trade-board .badge,
html body #trade-board .trade-item-mark {
display: none;
}
html body #trade-board .trade-item-img {
width: 100%;
height: 100%;
object-fit: contain;
}
html body #trade-board .trade-item-remove {
position: absolute;
top: -7px;
inset-inline-end: -7px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #16161a;
color: #ffffff;
border: 0;
display: grid;
place-items: center;
opacity: 0;
transition: opacity 0.15s ease;
cursor: pointer;
}
html body #trade-board .trade-item-remove svg {
width: 12px;
height: 12px;
}
html body #trade-board .trade-item:hover .trade-item-remove,
html body #trade-board .trade-item-remove:focus-visible {
opacity: 1;
}
/* empty state: dashed drop zone like the game's empty slots */
html body #trade-board .trade-empty,
html[data-theme="light"] body #trade-board .trade-empty,
html[data-theme="dark"] body #trade-board .trade-empty {
border: 2px dashed rgba(0, 0, 0, 0.14);
border-radius: 10px;
padding: clamp(20px, 3vw, 34px);
text-align: center;
color: #6d6a5c;
background:
repeating-linear-gradient(0deg, transparent, transparent 100%);
}
/* score chip: square, game-like */
html body #trade-board .trade-score {
min-width: 42px;
height: 42px;
border-radius: 10px;
background: #fbfaf4;
border: 1px solid rgba(0, 0, 0, 0.12);
display: grid;
place-items: center;
font-weight: 800;
font-size: 16px;
color: #16161a;
}
html body #trade-board .trade-column-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
/* swap divider: circular cream button */
html body #trade-board .trade-divider .swap-button {
background: #f7f5e6;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
/* part 42 ׳’ג‚¬ג€ trade tester: luxurious dark card shell, cream inputs,
inner results container with big verdict typography */
html body #trade #trade-board,
html[data-theme="light"] body #trade #trade-board,
html[data-theme="dark"] body #trade #trade-board {
color-scheme: dark;
--bg: transparent;
--bg-soft: #fafaf6;
--panel: #fbfaf4;
--panel-2: #f6f5ec;
--panel-3: #efeee2;
--line: rgba(0, 0, 0, 0.08);
--line-strong: rgba(0, 0, 0, 0.18);
--text: #16161a;
--text-2: #3a3a38;
--muted: #6d6a5c;
--muted-2: #87857a;
--plain: #ffffff;
--tint: #f7f5e6;
--media-surface: #f3f2e6;
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.08);
--shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.05);
--accent: #5b48b0;
--accent-soft: rgba(91, 72, 176, 0.1);
--accent-line: rgba(91, 72, 176, 0.4);
background: transparent;
color: #16161a;
border-radius: 24px;
padding: clamp(20px, 3vw, 36px);
box-shadow: 0 10px 40px rgba(20, 20, 30, 0.1);
}
/* white card on the cream page ׳’ג‚¬ג€ hairline border, like the reference */
html body #trade #trade-board {
border: 1px solid rgba(0, 0, 0, 0.07);
}
/* cream search inputs with dark readable text */
html body #trade-board .search-field-small,
html[data-theme="light"] body #trade-board .search-field-small,
html[data-theme="dark"] body #trade-board .search-field-small {
background: #f7f5e6;
color: #161616;
border: 1px solid rgba(0, 0, 0, 0.06);
}
html body #trade-board .search-field-small input {
color: #161616;
}
html body #trade-board .search-field-small input::placeholder {
color: #6d6a5c;
}
html body #trade-board .search-field-small .icon {
color: #6d6a5c;
}
/* inner results strip: gentle cream inside the white card (reference layout) */
html body #trade-board .verdict.verdict-inner,
html[data-theme="light"] body #trade-board .verdict.verdict-inner,
html[data-theme="dark"] body #trade-board .verdict.verdict-inner {
margin-top: clamp(16px, 2vw, 24px);
padding: clamp(18px, 2.6vw, 32px) clamp(16px, 2.4vw, 28px);
border-radius: 14px;
background: #f7f5e6;
border: 1px solid rgba(0, 0, 0, 0.05);
grid-template-columns: 1fr auto;
gap: clamp(12px, 2vw, 22px);
align-items: center;
}
html body #trade-board .verdict-icon {
display: none;
}
html body #trade-board .verdict-copy strong {
font-size: clamp(20px, 2.6vw, 30px);
font-weight: 800;
color: #16161a;
letter-spacing: -0.01em;
}
html body #trade-board .verdict-copy p {
margin: 4px 0 0;
font-size: clamp(13px, 1.4vw, 16px);
color: #6d6a5c;
}
/* big ROI-style numbers */
html body #trade-board .verdict-scores {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 24px);
flex: 0 0 auto;
}
html body #trade-board .verdict-score-col {
display: grid;
justify-items: start;
gap: 2px;
}
html body #trade-board .verdict-score-col span {
font-size: clamp(13px, 1.5vw, 16px);
font-weight: 600;
letter-spacing: 0;
color: #4a4842;
}
html body #trade-board .verdict-score-col strong {
font-size: clamp(30px, 4.4vw, 56px);
font-weight: 800;
line-height: 1.05;
color: #16161a;
}
html body #trade-board .verdict-score-col:last-child strong {
color: #16161a;
}
html body #trade-board .verdict-score-col strong::after {
content: " ׳³ֲ ׳³ֲ§׳³ֲ³";
font-size: clamp(14px, 1.6vw, 20px);
font-weight: 700;
color: #4a4842;
}
html body #trade-board .verdict-score-sep {
width: 1px;
align-self: stretch;
background: rgba(0, 0, 0, 0.1);
}
/* tone accents on the title */
html body #trade-board .verdict.is-balanced .verdict-copy strong {
color: #1f7a4d;
}
html body #trade-board .verdict.is-offer .verdict-copy strong {
color: #c2542f;
}
html body #trade-board .verdict.is-request .verdict-copy strong {
color: #4e3fa8;
}
@media (max-width: 640px) {
html body #trade-board .verdict.verdict-inner {
grid-template-columns: 1fr;
justify-items: stretch;
text-align: right;
}
}
@media (prefers-reduced-motion: reduce) {
html body section#catalog::before {
transform: none;
will-change: auto;
}
}
/* part 54 ׳’ג‚¬ג€ stacked cards: green marquee card above, dark content card covering underneath.
Both cards are full-bleed ׳’ג‚¬ג€ identical width, viewport edge to edge, like the reference. */
html body section#catalog::before {
display: none;
}
/* the blue card starts at the very top of the section ׳’ג‚¬ג€ no gap above */
html body section#catalog {
padding-inline: 0;
padding-block: 0 0;
}
html body section#catalog .marquee {
position: relative;
z-index: 1;
width: 100%;
margin-inline: 0;
background: #0e3f8f;
border-radius: 96px 96px 0 0;
}
html body section#catalog .shell {
position: relative;
z-index: 2;
width: 100%;
max-width: none;
margin-inline: 0;
margin-top: -118px;
background: #1c1c1c;
border-radius: 96px 96px 140px 140px;
padding-block: calc(118px + clamp(24px, 4vw, 56px)) clamp(32px, 5vw, 72px);
padding-inline: clamp(16px, 3.4vw, 44px);
}
/* part 55 was the trade peeking kids / catalog mascot ג€” removed per user */
/* part 56 ׳’ג‚¬ג€ compact consent modal (per user's latest reference) */
html body div#consent-drawer.overlay-mode .consent-card {
width: min(560px, calc(100vw - 40px));
max-width: 560px;
padding: 24px 26px 20px;
border-radius: 12px;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
}
html body div#consent-drawer.overlay-mode .consent-card > strong {
font-size: 19px;
margin-bottom: 10px;
}
html body div#consent-drawer.overlay-mode .consent-card p {
font-size: 15.5px;
line-height: 1.75;
margin-bottom: 20px;
}
html body div#consent-drawer.overlay-mode .consent-buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary {
width: auto;
min-width: 148px;
padding: 12px 22px;
border-radius: 9px;
font-size: 15.5px;
font-weight: 600;
background: transparent;
border-color: rgba(16, 75, 65, 0.55);
color: #104b41;
margin-inline-start: auto;
}
html body div#consent-drawer.overlay-mode .consent-btn.consent-primary:hover {
background: rgba(16, 75, 65, 0.06);
}
html body div#consent-drawer.overlay-mode .consent-speak {
width: auto;
padding: 11px 20px;
min-height: 0;
border-radius: 9px;
background: #f6f2ea;
border: 1px solid rgba(0, 0, 0, 0.07);
margin: 0;
align-self: flex-end;
}
html body div#consent-drawer.overlay-mode .consent-speak svg.icon {
width: 20px;
height: 20px;
}
/* part 57 ׳’ג‚¬ג€ live transcript demo (drop-hero style: Garamond sentences,
tiny speaker pills with 3-bar wave, marching 5-line opacity ladder) */
html body #live-transcript .xt-card {
background: #ffffeb;
border: 0;
border-radius: clamp(20px, 3vw, 40px);
padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px);
min-height: clamp(230px, 28vw, 320px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
html body #live-transcript .xt-lines {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
}
html body #live-transcript .xt-row {
display: flex;
align-items: center;
gap: 16px;
min-height: 34px;
font-family: "EB Garamond", Arial, sans-serif;
letter-spacing: -0.03em;
font-size: clamp(18px, 1.63vw + 8px, 26px);
line-height: 1.3em;
color: #1a1a1a;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html body #live-transcript .xt-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 1rem;
padding: .25rem .38rem;
}
html body #live-transcript .xt-pill .xt-name {
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 13px;
padding-inline-end: .25rem;
}
html body #live-transcript .xt-wave {
display: inline-flex;
align-items: center;
gap: 2px;
padding-inline-start: .25rem;
}
html body #live-transcript .xt-wave i {
display: block;
width: 2px;
border-radius: 1px;
background: currentcolor;
}
html body #live-transcript .xt-wave i:nth-child(1) { height: 4px; }
html body #live-transcript .xt-wave i:nth-child(2) { height: 7px; }
html body #live-transcript .xt-wave i:nth-child(3) { height: 5px; }
html body #live-transcript .xt-tone-a.xt-pill { background: #034f46; color: #ffffeb; }
html body #live-transcript .xt-tone-b.xt-pill { background: #ffa946; color: #1a1a1a; }
html body #live-transcript .xt-tone-c.xt-pill { background: #7f1c34; color: #ffffeb; }
html body #live-transcript .xt-tone-d.xt-pill { background: #ffbcf2; color: #1a1a1a; }
html body #live-transcript .xt-text { white-space: pre-wrap; }
/* part 58 ׳’ג‚¬ג€ live transcript as transparent in-hero card (no background) */
.shell.hero { position: relative; }
html body #live-transcript.xt-card {
position: absolute;
inset-inline-end: 0;
top: 52%;
transform: translateY(-50%);
width: clamp(300px, 27vw, 400px);
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
min-height: 0;
z-index: 3;
}
html body #live-transcript .xt-row {
gap: 10px;
font-size: clamp(15px, 1rem + .3vw, 19px);
letter-spacing: -0.02em;
}
html body #live-transcript .xt-pill {
gap: 2px;
border-radius: .8rem;
padding: .22rem .32rem;
}
html body #live-transcript .xt-pill .xt-name {
padding-inline-end: .2rem;
}
@media (max-width: 1200px) {
html body #live-transcript.xt-card {
position: static;
transform: none;
width: 100%;
max-width: 640px;
margin: 18px auto 0;
}
}
/* part 59 ׳’ג‚¬ג€ hero transcript: further left, slight tilt, lighter & bigger type */
html body #live-transcript.xt-card {
inset-inline-end: -5vw;
top: 50%;
transform: translateY(-50%) rotate(-4deg) skewY(-1deg);
}
html body #live-transcript .xt-row {
font-size: clamp(19px, 1.1rem + .4vw, 24px);
font-weight: 400;
letter-spacing: 0;
}
html body #live-transcript .xt-pill {
font-weight: 400;
}
@media (max-width: 1200px) {
html body #live-transcript.xt-card {
inset-inline-end: auto;
transform: none;
}
}
/* part 60 ׳’ג‚¬ג€ no box shadow on the disclose button */
html body .disclose-button,
html body .disclose-button:hover,
html body .disclose-button:focus,
html body .disclose-button:active {
box-shadow: none !important;
}/* part 61 - no black frame on the disclose button while hovered */
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
border-color: #ffffff;
}
html body .disclose-button:hover .wave,
html body .disclose-button:focus-visible .wave {
box-shadow: 0 0 0 2px #ffffff;
}
/* part 62 - hover: the button itself turns white, so no black band survives
above the wave crest; the white flood and the button are one surface */
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
background-color: transparent;
}
/* part 63 - hover wave stops mid-button: black top half, white bottom half,
wavy crest as the divide (no full flood) */
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
background-color: #000000;
border-color: #000000;
color: #ffffff;
}
html body .disclose-button:hover .wave,
html body .disclose-button:focus-visible .wave {
top: -49%;
}
/* part 64 - drop the white glow line around the wave; black text on hover */
html body .disclose-button:hover .wave,
html body .disclose-button:focus-visible .wave {
box-shadow: none;
}
html body .disclose-button:hover,
html body .disclose-button:focus-visible {
color: #000000;
}
/* part 65 - catalog blue band: big testimonial block like the reference
(taller band, no moving chips, serif quote + name + role) */
html body #catalog .marquee {
display: none !important;
}
html body .blue-quote {
background: transparent;
margin: 0;
padding: clamp(56px, 9vw, 130px) clamp(24px, 6vw, 90px);
text-align: center;
}
html body .blue-quote blockquote {
margin: 0 auto;
max-width: 46ch;
font-family: "EB Garamond", Georgia, Arial, sans-serif;
font-weight: 400;
font-size: clamp(22px, 2.2rem, 40px);
line-height: 1.35;
letter-spacing: -0.01em;
color: #ffffeb;
}
html body .blue-quote figcaption {
display: block;
margin-top: 28px;
}
html body .blue-quote .bq-name {
display: block;
font-family: Heebo, Arial, sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
font-size: clamp(17px, 1.6vw, 24px);
color: #ffffeb;
text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
html body .blue-quote .bq-role {
display: block;
margin-top: 10px;
font-family: Heebo, Arial, sans-serif;
font-weight: 500;
font-size: clamp(13px, 1.1vw, 16px);
color: rgba(255, 255, 235, .62);
}
/* part 66 - the blue band is now the quote block itself (strong blue bg) */
html body .blue-quote {
background: #0e3f8f;
border-radius: 96px 96px 0 0;
position: relative;
z-index: 1;
}
/* part 67 - slightly tighter padding on the blue quote band */
html body .blue-quote {
padding: clamp(40px, 6.5vw, 92px) clamp(24px, 5vw, 64px);
}
/* part 68 - blue-quote typography tuned to the reference proportions */
html body .blue-quote blockquote {
max-width: 44ch;
font-size: clamp(20px, 1.9rem, 34px);
line-height: 1.32;
letter-spacing: -0.015em;
}
html body .blue-quote figcaption {
margin-top: 22px;
}
html body .blue-quote .bq-name {
font-size: clamp(15px, 1.25vw, 19px);
letter-spacing: .05em;
text-shadow: none;
}
html body .blue-quote .bq-role {
margin-top: 8px;
font-size: clamp(12px, 1vw, 14px);
color: rgba(255, 255, 235, .55);
}
/* part 69 - blue-quote rebuilt exactly on the testimonial-v3 spec */
html body .blue-quote {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: center;
gap: 2rem;
text-align: center;
}
html body .bq-quote {
width: 100%;
max-width: 48rem;
margin: 0 auto;
font-family: "EB Garamond", Georgia, Arial, sans-serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.05;
letter-spacing: -0.03em;
text-wrap: balance;
color: #ffffeb;
}
html body .blue-quote .bq-author {
display: flex;
flex-flow: column nowrap;
align-items: center;
margin: 0;
}
html body .blue-quote .bq-logo {
width: auto;
max-width: 5rem;
height: auto;
object-fit: contain;
}
html body .blue-quote .bq-logo + .bq-role {
margin-top: 1rem;
}
html body .blue-quote .bq-role {
display: block;
font-family: Heebo, Arial, sans-serif;
font-weight: 500;
font-size: 0.875rem;
color: #ffffeb80;
}
@media (max-width: 767px) {
html body .blue-quote { gap: 1.5rem; }
html body .bq-quote { font-size: 1.5rem; }
}
/* part 70 - the handwritten logo is transparent and thin: keep it big and
readable everywhere (no square padding, no tiny 24px slots) */
html body img[src*="favicon.png"] {
width: auto;
height: auto;
border-radius: 0;
box-shadow: none;
background: transparent !important;
}
/* header + footer brand marks get generous size */
html body .site-header .brand-mark,
html body .footer-brand .brand-mark {
width: auto;
height: auto;
padding: 0;
background: transparent !important;
}
html body .site-header .brand-mark img,
html body .footer-brand .brand-mark img {
display: block;
width: clamp(92px, 10vw, 132px);
height: auto;
}
/* mini app window logo */
html body .sky-window .win-logo img {
width: clamp(30px, 3vw, 42px);
height: auto;
}
/* sidebar profile */
html body .sky-window .side-profile img {
width: clamp(56px, 5vw, 72px);
height: auto;
border-radius: 12px;
}
/* testimonial logo: bigger */
html body .blue-quote .bq-logo {
width: clamp(96px, 10vw, 132px);
max-width: 9rem;
}
/* part 71 - the author line under the logo: clear neutral gray (like the ref) */
html body .blue-quote .bq-role {
color: #aebbcc !important;
opacity: 1;
}
/* part 72 - the fake app sidebar becomes glassmorphism (css.glass) */
html body .sky-window .win-sidebar {
background: rgba(132, 235, 255, 0.39);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(132, 235, 255, 0.3);
}
/* the tiles & rows inside keep their own look, glass only under them */
/* part 73 - glassmorphism on the whole app window + sidebar updated to
the white glass recipe (css.glass) */
html body .sky-window .win-main {
background: rgba(255, 255, 255, 0.27) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.2px);
-webkit-backdrop-filter: blur(11.2px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
html body .sky-window .win-sidebar {
background: rgba(255, 255, 255, 0.27) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.2px);
-webkit-backdrop-filter: blur(11.2px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* part 74 - window + sidebar glass switched to the new purple-tint recipe */
html body .sky-window .win-main {
background: rgba(70, 48, 98, 0.2) !important;
border: 1px solid rgba(70, 48, 98, 0.3) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
html body .sky-window .win-sidebar {
background: rgba(70, 48, 98, 0.2) !important;
border: 1px solid rgba(70, 48, 98, 0.3) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* part 75 - remove the white shell behind the glass window: sky-window's
own white background + thin border showed at the corners and as a thin
white frame around the glass. The glass recipe itself is fielded by
parts 73/74; this removes the opaque shell underneath. */
html body .sky-window {
background: transparent !important;
border: 0 !important;
}
html body .sky-window .win-main {
background-color: rgba(70, 48, 98, 0.2) !important;
background-clip: padding-box;
}
html body .sky-window .win-sidebar {
background-color: rgba(70, 48, 98, 0.2) !important;
background-clip: padding-box;
}
/* part 76 - the demo window keeps its size with the content cleared */
html body .sky-window {
min-height: clamp(380px, 44vw, 540px);
}
html body .sky-window .win-main {
min-height: calc(clamp(380px, 44vw, 540px) - 46px);
}
/* part 77 - new glass tint (css.glass) + no white underneath the window */
html body .sky-window .win-main {
background: rgba(145, 233, 255, 0.14) !important;
border: 1px solid rgba(145, 233, 255, 0.08) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
html body .sky-window .win-sidebar {
background: rgba(145, 233, 255, 0.14) !important;
border: 1px solid rgba(145, 233, 255, 0.08) !important;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* remove the white frame around the sky canvas entirely */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background: transparent !important;
padding: 0 !important;
}
/* remove the whitish bottom fade of the sky: the window now ends on sky blue */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
background:
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%);
}
/* part 78 - no shadows anywhere around the glass window, and the card
reaches the very bottom of the sky (no leftover strip under it) */
html body .sky-window .win-main,
html body .sky-window .win-sidebar {
box-shadow: none !important;
}
html body .sky-window {
box-shadow: none !important;
}
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
box-shadow: none !important;
}
html body .sky-window .win-main {
min-height: clamp(380px, 44vw, 540px) !important;
}
/* part 79 - Google-like SERP demo inside the glass browser window */
html body .sky-window .win-content {
min-height: 0;
display: flex;
}
html body .sky-window .win-idle {
flex: 1;
display: flex;
}
html body .sky-window .serp-view {
flex: 1;
display: flex;
flex-flow: column nowrap;
gap: 14px;
padding: 22px 77px 26px;
animation: serpIn .65s cubic-bezier(.25,.7,.3,1) both;
}
@keyframes serpIn {
from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(3px); }
to { opacity: 1; transform: none; filter: none; }
}
/* search bar echo inside the SERP */
html body .sky-window .serp-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 999px;
padding: 11px 20px;
box-shadow: 0 6px 18px rgba(20, 52, 74, 0.08);
}
html body .sky-window .serp-q {
font-family: Heebo, Arial, sans-serif;
font-weight: 600;
font-size: 15px;
color: #22334c;
}
html body .sky-window .serp-mag { width: 16px; height: 16px; color: #5b6b78; opacity: .8; }
html body .sky-window .serp-mag svg { width: 100%; height: 100%; display: block; }
/* filter tabs */
html body .sky-window .serp-tabs {
display: flex;
gap: 20px;
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
padding: 2px 6px 9px;
font-family: Heebo, Arial, sans-serif;
font-size: 13.5px;
color: #5b6b78;
}
html body .sky-window .serp-tabs span { position: relative; padding-bottom: 7px; }
html body .sky-window .serp-tabs .is-on {
color: #1a5fd0;
font-weight: 700;
}
html body .sky-window .serp-tabs .is-on::after {
content: "";
position: absolute;
inset-inline: -4px;
bottom: -10px;
height: 3px;
border-radius: 3px;
background: #1a5fd0;
}
/* results list, Google-like rows */
html body .sky-window .serp-results {
display: flex;
flex-flow: column nowrap;
gap: 17px;
padding-top: 4px;
}
html body .sky-window .serp-res { max-width: 560px; }
html body .sky-window .srp-url {
font-family: Heebo, Arial, sans-serif;
font-size: 12px;
color: #202124;
opacity: .68;
margin-bottom: 4px;
}
html body .sky-window .srp-title {
font-family: Heebo, Arial, sans-serif;
font-size: 17.5px;
line-height: 1.35;
color: #1a0dab;
margin-bottom: 3px;
}
html body .sky-window .srp-snippet {
font-family: Heebo, Arial, sans-serif;
font-size: 13px;
line-height: 1.55;
color: #4d5156;
}
html body .sky-window .serp-res.srp-target .srp-title { color: #1a0dab; }
html body .sky-window .serp-res.srp-dim { opacity: .58; }
/* the neon highlighter sweep on the chosen result */
html body .sky-window .srp-mark {
background-image: linear-gradient(100deg, rgba(255, 241, 79, 0.0), #fff15e 18%, #fff15e 82%, rgba(255, 241, 79, 0.0));
background-repeat: no-repeat;
background-size: 0% 52%;
background-position: 0% 62%;
border-radius: 3px;
padding: 2px 8px 2px 8px;
margin-inline-start: -8px;
transition: background-size .55s cubic-bezier(.3,.6,.35,1);
}
html body .sky-window .srp-mark.is-marked {
background-size: 100% 52%;
}
/* blinking caret typed into the address bar */
html body .sky-window .win-address.addr-focus {
font-weight: 700;
}
html body .sky-window .addr-caret {
display: inline-block;
width: 1.5px;
height: 1.05em;
margin-inline-start: 2px;
background: #22334c;
vertical-align: -2px;
animation: addrBlink 0.9s steps(1) infinite;
}
@keyframes addrBlink {
0%, 55% { opacity: 1; }
56%, 100% { opacity: 0; }
}
html body .sky-window .win-address.addr-enter {
filter: brightness(0.92);
transform: scale(0.995);
}
/* glass wipe transition */
html body .sky-window .glass-wipe {
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
background: linear-gradient(105deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.55) 46%,
rgba(231, 245, 255, 0.92) 52%,
rgba(255, 255, 255, 0.55) 58%,
rgba(255, 255, 255, 0) 74%);
background-size: 300% 100%;
animation: glassWipe 1.15s cubic-bezier(.5,.1,.2,1) both;
}
@keyframes glassWipe {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
/* part 80 - a real marker sweep: painted layer behind the text that
spreads right-to-left like a physical highlighter, with glow */
html body .sky-window .srp-mark {
background-image: none !important;
background-size: auto !important;
background-position: initial !important;
position: relative;
z-index: 1;
padding: 1px 2px;
margin-inline-start: -2px;
}
html body .sky-window .srp-mark::before {
content: "";
position: absolute;
z-index: -1;
top: -2px;
bottom: -4px;
right: -3px;
width: 0;
border-radius: 5px;
background: linear-gradient(100deg, #ffe95c 0%, #ffdf42 70%, #ffcf2e 100%);
box-shadow: 0 2px 18px rgba(255, 220, 60, 0.55);
transform: skewX(-7deg);
opacity: 0;
transition: width .62s cubic-bezier(.3,.6,.25,1), opacity .18s ease-out;
}
html body .sky-window .srp-mark.is-marked::before {
width: calc(100% + 6px);
opacity: 1;
}
/* tiny wet-spot shine riding in front of the paint while it spreads */
html body .sky-window .srp-mark::after {
content: "";
position: absolute;
z-index: -1;
top: -2px;
bottom: -4px;
right: -3px;
width: 18%;
border-radius: 5px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
opacity: 0;
}
html body .sky-window .srp-mark.is-marked::after {
animation: markerShine .62s cubic-bezier(.3,.6,.25,1) both;
}
@keyframes markerShine {
0% { opacity: 0; transform: translateX(0); }
10% { opacity: 1; }
100% { opacity: 0; transform: translateX(-430%); }
}
/* part 81 - after the chosen result is clicked: the game icons float in
a soft arc while a diagonal light beam sweeps across, then fades */
html body .sky-window .games-arc {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 2vw, 26px);
animation: arcIn .8s cubic-bezier(.25,.7,.3,1) both;
}
@keyframes arcIn {
from { opacity: 0; transform: scale(.92); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}
html body .sky-window .games-arc img {
width: clamp(44px, 6.5vw, 92px);
height: auto;
border-radius: 22%;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 14px 22px rgba(20, 52, 74, 0.28));
animation: arcBob 3.6s ease-in-out infinite;
}
/* arc shape: middle icon highest, edges lower */
html body .sky-window .games-arc img:nth-of-type(3) { align-self: flex-start; margin-top: clamp(0px, 1.2vw, 22px); transform-origin: center; }
html body .sky-window .games-arc img:nth-of-type(2),
html body .sky-window .games-arc img:nth-of-type(4) { margin-top: clamp(26px, 4vw, 62px); }
html body .sky-window .games-arc img:nth-of-type(1),
html body .sky-window .games-arc img:nth-of-type(5) { margin-top: clamp(54px, 7.5vw, 108px); }
html body .sky-window .games-arc img:nth-of-type(1) { animation-delay: 0s; }
html body .sky-window .games-arc img:nth-of-type(2) { animation-delay: .35s; }
html body .sky-window .games-arc img:nth-of-type(3) { animation-delay: .7s; }
html body .sky-window .games-arc img:nth-of-type(4) { animation-delay: 1.05s; }
html body .sky-window .games-arc img:nth-of-type(5) { animation-delay: 1.4s; }
@keyframes arcBob {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-9px) rotate(1.5deg); }
}
/* the diagonal light beam that passes over the arc (weakened / soft) */
html body .sky-window .arc-shine {
position: absolute;
inset: -20%;
pointer-events: none;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.32) 48%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.32) 56%,
rgba(255, 255, 255, 0) 66%);
background-size: 280% 280%;
animation: arcShine 2.2s cubic-bezier(.45,.05,.35,.95) .4s both;
}
@keyframes arcShine {
from { background-position: 110% 110%; }
to { background-position: -40% -40%; }
}
/* arc fade-out before the loop resets */
html body .sky-window .games-arc.is-leaving {
animation: arcOut .5s ease-in both;
}
@keyframes arcOut {
from { opacity: 1; }
to { opacity: 0; filter: blur(3px); }
}
/* part 82 - the idle address bar shows a quiet "search" placeholder,
and no bold is applied while typing */
html body .sky-window .win-address.is-idle {
color: rgba(20, 52, 74, 0.42);
font-weight: 400 !important;
letter-spacing: .04em;
opacity: .75;
font-style: normal;
}
html body .sky-window .win-address.addr-focus {
font-weight: 400 !important;
}
html body .sky-window .win-address {
color: inherit;
transition: color .3s ease, opacity .3s ease;
}
/* part 83 - softer marker + keep the game arc below the toolbar */
html body .sky-window .games-arc {
padding-top: clamp(120px, 16vw, 190px);
min-height: 100%;
box-sizing: border-box;
}
html body .sky-window .games-arc img {
width: clamp(40px, 5.6vw, 76px);
}
html body .sky-window .games-arc img:nth-of-type(3) { margin-top: 0; }
html body .sky-window .games-arc img:nth-of-type(2),
html body .sky-window .games-arc img:nth-of-type(4) { margin-top: clamp(14px, 2vw, 34px); }
html body .sky-window .games-arc img:nth-of-type(1),
html body .sky-window .games-arc img:nth-of-type(5) { margin-top: clamp(30px, 4vw, 66px); }
/* marker: gentler -- thinner paint, lighter yellow, small shadow */
html body .sky-window .srp-mark::before {
top: -1px;
bottom: -2px;
right: -2px;
border-radius: 4px;
transform: skewX(-5deg);
background: linear-gradient(100deg, rgba(255, 238, 118, 0.55) 0%, rgba(255, 228, 66, 0.6) 70%, rgba(255, 218, 40, 0.6) 100%);
box-shadow: 0 1px 8px rgba(255, 226, 70, 0.25);
}
html body .sky-window .srp-mark.is-marked::before {
width: calc(100% + 4px);
}
html body .sky-window .srp-mark::after {
top: -1px;
bottom: -2px;
right: -2px;
width: 14%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
/* part 84 - the five game icons sit exactly ON a real arc: apex in the
middle, both ends dropping symmetrically on the same circle */
html body .sky-window .win-content {
position: relative;
}
html body .sky-window .games-arc {
justify-content: flex-start;
}
html body .sky-window .games-arc img {
position: absolute;
margin-top: 0 !important;
align-self: unset;
width: clamp(44px, 5vw, 64px);
}
html body .sky-window .games-arc img:nth-of-type(1) { left: 5%; top: 150px; }
html body .sky-window .games-arc img:nth-of-type(2) { left: 26%; top: 44px; }
html body .sky-window .games-arc img:nth-of-type(3) {
left: calc(50% - 30px);
top: 18px;
width: clamp(48px, 5.4vw, 70px);
}
html body .sky-window .games-arc img:nth-of-type(4) { left: auto; right: 26%; top: 44px; }
html body .sky-window .games-arc img:nth-of-type(5) { left: auto; right: 5%; top: 150px; }
/* smaller bob so each icon stays attached to its arc point */
html body .sky-window .games-arc img {
animation: arcBob 3.6s ease-in-out infinite;
}
@keyframes arcBob {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-6px) rotate(1deg); }
}
/* part 85 - bigger arc that fills the window, wider spread; the diagonal
light beam becomes a continuous, repeating pass instead of one flash */
html body .sky-window .games-arc img {
width: clamp(64px, 8.5vw, 104px);
}
html body .sky-window .games-arc img:nth-of-type(3) {
width: clamp(72px, 9.5vw, 120px);
}
html body .sky-window .games-arc img:nth-of-type(1) { left: 1%; top: 218px; }
html body .sky-window .games-arc img:nth-of-type(2) { left: 23%; top: 78px; }
html body .sky-window .games-arc img:nth-of-type(3) { left: calc(50% - 50px); top: 26px; }
html body .sky-window .games-arc img:nth-of-type(4) { left: auto; right: 23%; top: 78px; }
html body .sky-window .games-arc img:nth-of-type(5) { left: auto; right: 1%; top: 218px; }
html body .sky-window .games-arc img:nth-of-type(2),
html body .sky-window .games-arc img:nth-of-type(4) { border-radius: 26%; }
html body .sky-window .games-arc .arc-shine {
background-size: 300% 300%;
animation: arcShineLoop 3.4s linear infinite;
animation-delay: .3s;
}
@keyframes arcShineLoop {
0% { background-position: 120% 120%; }
42% { background-position: -60% -60%; opacity: 1; }
62% { background-position: -60% -60%; opacity: 0; }
88% { background-position: 120% 120%; opacity: 0; }
97% { opacity: 1; background-position: 120% 120%; }
100% { opacity: 1; background-position: 120% 120%; }
}
/* part 86 - the white diagonal beam was covering the icons: remove it */
html body .sky-window .games-arc .arc-shine {
display: none !important;
}
/* part 87a - the white cloud-glow behind the window was washing over the
icons: keep a whisper of sky-light instead of a white flood */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
background:
radial-gradient(58% 44% at 62% 52%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(40% 32% at 88% 14%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 72%),
radial-gradient(34% 26% at 38% 76%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(28% 20% at 10% 80%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 75%),
radial-gradient(18% 13% at 20% 8%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 72%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%) !important;
}
/* part 87b - bigger icons filling the window, less empty space */
html body .sky-window .games-arc img {
width: clamp(78px, 10.5vw, 128px) !important;
}
html body .sky-window .games-arc img:nth-of-type(3) {
width: clamp(88px, 12vw, 150px) !important;
left: calc(50% - 62px) !important;
}
html body .sky-window .games-arc img:nth-of-type(1) { left: 0.5% !important; }
html body .sky-window .games-arc img:nth-of-type(2) { left: 19% !important; }
html body .sky-window .games-arc img:nth-of-type(4) { right: 19% !important; }
html body .sky-window .games-arc img:nth-of-type(5) { right: 0.5% !important; }
/* part 87c - entrance: every icon floats up on its own beat, then keeps bobbing */
html body .sky-window .games-arc img {
opacity: 0;
animation: arcPop .72s cubic-bezier(.2, .85, .3, 1.15) both, arcBob 3.6s ease-in-out infinite both !important;
cursor: pointer;
transition: filter .25s ease, transform .25s ease;
}
html body .sky-window .games-arc img:nth-of-type(1) { animation-delay: .1s, 1.1s !important; }
html body .sky-window .games-arc img:nth-of-type(2) { animation-delay: .28s, 1.35s !important; }
html body .sky-window .games-arc img:nth-of-type(3) { animation-delay: .46s, 1.6s !important; }
html body .sky-window .games-arc img:nth-of-type(4) { animation-delay: .64s, 1.85s !important; }
html body .sky-window .games-arc img:nth-of-type(5) { animation-delay: .82s, 2.1s !important; }
@keyframes arcPop {
from { opacity: 0; transform: translateY(46px) scale(.6); filter: blur(5px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
html body .sky-window .games-arc img:hover {
filter: drop-shadow(0 18px 26px rgba(20, 52, 74, 0.0)) brightness(1.0);
transform: scale(1.08);
}
/* part 87d - trick video modal: mp4 shown like a looping gif in glass */
.trick-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 38, 58, 0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.trick-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.trick-modal .trick-frame {
position: relative;
max-width: min(640px, 92vw);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 20px;
padding: 14px 14px 40px;
box-shadow: 0 30px 80px rgba(10, 40, 64, 0.35);
transform: translateY(24px) scale(.94);
transition: transform .32s cubic-bezier(.2, .8, .3, 1.1);
}
.trick-modal.is-open .trick-frame { transform: none; }
.trick-modal video {
display: block;
width: 100%;
border-radius: 14px;
background: #0b2740;
}
.trick-modal .trick-title {
margin-top: 12px;
text-align: center;
font-size: 17px;
font-weight: 700;
color: #14344a;
}
.trick-modal .trick-close {
position: absolute;
top: -14px;
left: -14px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #14344a;
color: #fff;
font-size: 19px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(10, 40, 64, 0.35);
}
.trick-modal .trick-close:hover { background: #1d4a66; }
/* part 88a - replace the yellow highlighter with an animated underline
that draws itself under the title, in the title's own color */
html body .sky-window .srp-mark {
background-image: none !important;
padding: 0 !important;
margin-inline-start: 0 !important;
position: relative;
}
html body .sky-window .srp-mark::before {
all: unset;
content: "";
position: absolute;
inset: auto 0 -4px 0 !important;
height: 3px !important;
width: 0 !important;
border-radius: 2px !important;
background: currentColor !important;
transform: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
html body .sky-window .srp-mark.is-marked::before {
animation: scribbleLine .65s cubic-bezier(.35,.6,.25,1) .1s forwards !important;
}
html body .sky-window .srp-mark::after,
html body .sky-window .srp-mark.is-marked::after {
display: none !important;
}
@keyframes scribbleLine {
from { width: 0 !important; }
to { width: 100% !important; }
}
/* part 88b - the five games in rows, big, flat: no arc, no shadow */
html body .sky-window .games-arc {
position: static !important;
inset: auto !important;
display: flex !important;
flex-flow: row wrap !important;
align-items: center !important;
justify-content: center !important;
align-content: center !important;
gap: clamp(28px, 4vw, 54px) !important;
padding: 40px 30px 60px !important;
min-height: 100%;
box-sizing: border-box;
}
html body .sky-window .games-arc img {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
width: clamp(116px, 14.5vw, 178px) !important;
filter: none !important;
border-radius: 22%;
margin: 0 !important;
}
html body .sky-window .games-arc img:nth-of-type(3) {
width: clamp(128px, 16.5vw, 202px) !important;
left: auto !important;
}
html body .sky-window .games-arc img:hover {
transform: translateY(4px) scale(1.05);
filter: brightness(1.05) !important;
}
/* part 89 - the games list lives in the sidebar: one image per row,
like notebook lines under the logo, big and flat */
html body .sky-window .win-sidebar {
display: flex !important;
flex-flow: column nowrap !important;
align-items: stretch !important;
}
html body .sky-window .win-sidebar .games-arc {
position: static !important;
display: flex !important;
flex-flow: column nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: clamp(10px, 1.6vw, 20px) !important;
padding: 6px 14px 18px !important;
margin-top: auto;
flex: 1 1 auto;
min-height: 0;
}
html body .sky-window .win-sidebar .games-arc img {
width: clamp(150px, 62%, 214px) !important;
height: auto;
}
html body .sky-window .win-sidebar .games-arc img:nth-of-type(3) {
width: clamp(162px, 68%, 232px) !important;
}
/* part 90a - remove the remaining pale band: only clean sky gradient */
html body .sky-canvas,
html[data-theme="light"] body .sky-canvas,
html[data-theme="dark"] body .sky-canvas {
background: linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%) !important;
}
/* part 90b - the options tabs and the results stretch across the whole
bottom of the window, no narrow indented column */
html body .sky-window .serp-view {
padding: 22px 24px 26px;
}
html body .sky-window .serp-tabs,
html body .sky-window .serp-results {
width: 100%;
}
html body .sky-window .serp-res {
width: 100%;
}
/* part 91 - remove every sliding white light inside the demo card:
the click-sweep flash and the diagonal beam remnant */
html body .sky-window .glass-wipe {
display: none !important;
animation: none !important;
}
html body .sky-window .arc-shine,
html body .sky-window .games-arc .arc-shine {
display: none !important;
animation: none !important;
}
/* soften the serp entrance too: no more blurred white flash frame */
html body .sky-window .serp-view {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* part 92 - the SERP fills the card bottom to end: results spread over
the remaining height, no empty gap under the last result */
html body .sky-window .serp-view {
height: 100%;
box-sizing: border-box;
}
/* align the results' end with the last sidebar image line: no extra
bottom padding anywhere in the chain */
html body .sky-window .win-content {
padding-bottom: 0;
}
html body .sky-window .serp-view {
padding-bottom: 0;
}
html body .sky-window .serp-results {
flex: 1 1 auto;
padding-bottom: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
gap: clamp(15px, 2.2vw, 30px);
min-height: 180px;
overflow: hidden;
position: relative;
}
/* smooth fade removed per request: the list ends clean */
html body .sky-window .serp-results::after {
display: none !important;
content: none !important;
}
/* the options column never dictates the card height: it is clipped at
the card's own bottom line (set by the sidebar column) */
html body .sky-window .win-body {
height: 0 !important;
min-height: 100% !important;
overflow: hidden;
}
/* the sidebar games list is permanent now, so the card keeps a stable
height through every demo stage */
html body .sky-window .games-arc {
display: flex !important;
}
/* part 93 - the images never fade or leave: fully visible and static at
every demo stage, no entrance/leave animations, no loop hiding */
html body .sky-window .games-arc,
html body .sky-window .games-arc img {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
html body .sky-window .games-arc.is-leaving {
animation: none !important;
opacity: 1 !important;
}
html body .sky-window .win-body {
display: flex;
flex-flow: column nowrap;
}
html body .sky-window .win-content {
flex: 1 1 auto;
min-height: 0;
}
/* part 94 - sidebar game images start gray, wake up to full color when
the mouse passes over them */
html body .sky-window .games-arc img {
filter: grayscale(1) opacity(.75) !important;
transition: filter .45s ease, transform .35s ease;
}
html body .sky-window .games-arc img:hover {
filter: grayscale(0) opacity(1) !important;
transform: scale(1.06) !important;
}
/* part 95 - after the link is clicked: a convincing TopMik tricks page
fills the main area, like a real guide the visitor just opened */
html body .sky-window .tricks-view {
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
gap: 18px;
padding: 22px 24px 12px;
overflow: hidden;
}
html body .sky-window .tks-head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
}
html body .sky-window .tks-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
html body .sky-window .tks-title {
font-family: Heebo, Arial, sans-serif;
font-weight: 700;
font-size: 21px;
color: #14344a;
}
html body .sky-window .tks-sub {
font-size: 13px;
color: rgba(20, 52, 74, 0.55);
}
html body .sky-window .tks-badge {
margin-inline-start: auto;
background: rgba(26, 95, 208, 0.10);
color: #1a5fd0;
font-size: 13px;
font-weight: 700;
border-radius: 999px;
padding: 7px 14px;
}
html body .sky-window .tks-list {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
gap: clamp(14px, 2vw, 24px);
overflow: hidden;
min-height: 0;
}
html body .sky-window .tks-row {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
padding: 12px 18px;
}
html body .sky-window .tks-row img {
width: clamp(64px, 8vw, 86px);
height: auto;
border-radius: 22%;
filter: drop-shadow(0 6px 12px rgba(20, 52, 74, 0.18));
}
html body .sky-window .tks-rt {
font-family: Heebo, Arial, sans-serif;
font-weight: 700;
font-size: 16.5px;
color: #14344a;
}
html body .sky-window .tks-rs {
font-size: 13.5px;
color: rgba(20, 52, 74, 0.6);
margin-top: 3px;
}
html body .sky-window .tks-foot {
text-align: center;
font-size: 13px;
color: rgba(20, 52, 74, 0.5);
padding: 6px 0 2px;
}
/* part 96 - the tricks page now reads like a Wikipedia article: white
paper, serif-safe headings, blue section links, numbered bullets */
/* blended with the glass: no white paper, wiki typography directly on
the blue card background */
html body .sky-window .tricks-view {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html body .sky-window .tks-head {
display: block;
padding: 18px 26px 10px;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
background: transparent;
}
html body .sky-window .tks-title {
font-family: Georgia, "Times New Roman", Heebo, serif;
font-weight: 400;
font-size: 24px;
color: #14344a;
}
html body .sky-window .tks-crumb {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin-top: 2px;
}
html body .sky-window .tks-badge { display: none !important; }
html body .sky-window .tks-wiki {
padding: 14px 26px 12px;
display: flex;
flex-flow: column nowrap;
gap: 10px;
font-family: Heebo, Arial, sans-serif;
font-size: 14px;
color: #1c3f58;
line-height: 1.65;
overflow: hidden;
flex: 1 1 auto;
min-height: 0;
}
html body .sky-window .tks-intro {
margin: 0;
color: rgba(20, 52, 74, 0.82);
}
html body .sky-window .tks-sec {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 19px;
color: #1a5fd0;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 3px;
margin: 4px 0 2px;
}
html body .sky-window .tks-wiki ul {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .tks-wiki li { color: rgba(20, 52, 74, 0.85); }
html body .sky-window .tks-rule {
border: none;
border-top: 1px solid rgba(20, 52, 74, 0.14);
margin: 4px 0 2px;
}
html body .sky-window .tks-note {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin: 0;
}
html body .sky-window .tks-badge { display: none !important; }
html body .sky-window .tks-wiki {
padding: 14px 26px 12px;
display: flex;
flex-flow: column nowrap;
gap: 10px;
font-family: Heebo, Arial, sans-serif;
font-size: 14px;
color: #1c3f58;
line-height: 1.65;
overflow: hidden;
flex: 1 1 auto;
min-height: 0;
}
html body .sky-window .tks-intro {
margin: 0;
color: rgba(20, 52, 74, 0.82);
}
html body .sky-window .tks-sec {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 19px;
color: #1a5fd0;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 3px;
margin: 4px 0 2px;
}
html body .sky-window .tks-wiki ul {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .tks-wiki li { color: rgba(20, 52, 74, 0.85); }
html body .sky-window .tks-rule {
border: none;
border-top: 1px solid rgba(20, 52, 74, 0.14);
margin: 4px 0 2px;
}
html body .sky-window .tks-note {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin: 0;
}
html body .sky-window .tks-list { display: none !important; }
html body .sky-window .tks-logo { display: none !important; }
html body .sky-window .tks-foot { display: none !important; }
/* part 97 - clicking a sidebar game swaps the wiki into a YouTube-like
watch page with a real player */
html body .sky-window .yt-view {
position: relative;
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
gap: 12px;
padding: 18px 24px 12px;
overflow: hidden;
}
html body .sky-window .yt-close {
position: absolute;
top: 14px;
left: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: #14344a;
color: #fff;
font-size: 16px;
cursor: pointer;
z-index: 5;
}
html body .sky-window .yt-player {
position: relative;
flex: 1 1 auto;
min-height: 220px;
border-radius: 12px;
overflow: hidden;
background: #0f0f0f;
box-shadow: 0 10px 30px rgba(10, 40, 64, 0.30);
}
html body .sky-window .yt-video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
html body .sky-window .yt-body {
display: flex;
flex-flow: column nowrap;
gap: 8px;
}
html body .sky-window .yt-title {
font-family: Heebo, Arial, sans-serif;
font-weight: 700;
font-size: 17px;
color: #14344a;
}
html body .sky-window .yt-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
html body .sky-window .yt-channel {
display: flex;
align-items: center;
gap: 10px;
}
html body .sky-window .yt-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: contain;
background: rgba(255, 255, 255, 0.5);
padding: 3px;
}
html body .sky-window .yt-name {
font-weight: 700;
font-size: 13.5px;
color: #14344a;
}
html body .sky-window .yt-subs {
font-size: 11.5px;
color: rgba(20, 52, 74, 0.55);
}
html body .sky-window .yt-btn {
background: #14344a;
color: #fff;
font-size: 12.5px;
font-weight: 700;
border-radius: 999px;
padding: 6px 14px;
}
html body .sky-window .yt-actions {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.6);
}
html body .sky-window .yt-desc {
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
color: rgba(20, 52, 74, 0.8);
}
html body .sky-window .yt-tag {
font-size: 11.5px;
color: rgba(20, 52, 74, 0.5);
text-align: center;
}
/* part 98 - the per-game wiki page opened by a sidebar game click.
Same blended glass look as the tricks wiki; plus a Wikipedia-style
infobox at the start-in side. */
html body .sky-window .game-wiki {
position: relative;
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
gap: 10px;
padding: 12px 26px 12px;
overflow: hidden;
font-family: Heebo, Arial, sans-serif;
font-size: 14px;
color: #1c3f58;
line-height: 1.65;
}
html body .sky-window .gw-close {
display: none !important;
}
html body .sky-window .gw-crumb {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
}
html body .sky-window .gw-title {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 26px;
color: #14344a;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 4px;
margin: 0;
}
html body .sky-window .gw-infobox {
float: left;
width: 220px;
margin: 2px 0 8px 0;
border: 1px solid rgba(20, 52, 74, 0.22);
border-radius: 4px;
background: rgba(255, 255, 255, 0.28);
font-size: 12.5px;
overflow: hidden;
}
html body .sky-window .gw-infobox-title {
background: rgba(20, 52, 74, 0.10);
font-weight: 700;
text-align: center;
padding: 5px 8px;
border-bottom: 1px solid rgba(20, 52, 74, 0.16);
color: #14344a;
}
html body .sky-window .gw-info {
width: 100%;
border-collapse: collapse;
}
html body .sky-window .gw-info th {
text-align: start;
font-weight: 700;
color: #14344a;
padding: 5px 10px;
vertical-align: top;
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
width: 46%;
}
html body .sky-window .gw-info td {
padding: 5px 8px;
color: rgba(20, 52, 74, 0.85);
border-bottom: 1px solid rgba(20, 52, 74, 0.10);
}
html body .sky-window .gw-infobox tr:last-child th,
html body .sky-window .gw-infobox tr:last-child td {
border-bottom: none;
}
html body .sky-window .gw-about {
margin: 4px 0 0;
color: rgba(20, 52, 74, 0.85);
}
html body .sky-window .gw-h2 {
font-family: Georgia, Heebo, serif;
font-weight: 400;
font-size: 20px;
color: #1a5fd0;
border-bottom: 1px solid rgba(20, 52, 74, 0.14);
padding-bottom: 3px;
margin: 6px 0 2px;
}
html body .sky-window .gw-tricks {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .gw-tricks b { color: #14344a; }
html body .sky-window .gw-feats {
margin: 0;
padding-inline-start: 22px;
display: flex;
flex-flow: column nowrap;
gap: 5px;
}
html body .sky-window .gw-feats li { color: rgba(20, 52, 74, 0.85); }
html body .sky-window .gw-rule {
border: none;
border-top: 1px solid rgba(20, 52, 74, 0.14);
margin: 6px 0 0;
}
html body .sky-window .gw-note {
font-size: 12.5px;
color: rgba(20, 52, 74, 0.55);
margin: 2px 0 0;
}
/* part 99 - serp inner search bar removed (the title bar already has one);
live transcript card nudged a bit further left */
html body .sky-window .serp-bar { display: none !important; }
html body #live-transcript.xt-card { inset-inline-end: -7vw; }
/* part 100 - idle watermark: while the card body is empty (just before
the demo mouse starts typing) show the Topmik logo large, dimmed and
slightly rotated so it never sits perfectly level */
html body .sky-window .win-idle { position: relative; }
html body .sky-window .idle-logo-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 0;
}
html body .sky-window .idle-logo {
width: clamp(230px, 40%, 420px);
opacity: 0.32;
transform: translateY(-14px) rotate(-15deg);
user-select: none;
}
/* hide the watermark whenever real content is on stage */
html body .sky-window .win-idle:has(.serp-view:not([hidden])) .idle-logo-wrap,
html body .sky-window .win-idle:has(.tricks-view:not([hidden])) .idle-logo-wrap,
html body .sky-window .win-idle:has(.game-wiki:not([hidden])) .idle-logo-wrap {
display: none;
}
/* part 101 - the "׳³ֲ׳³ג„¢׳³ג€׳³ֲ¢ ׳³ג€”׳³ֲ©׳³ג€¢׳³ג€˜" header button is gone. In its place: a small
site icon pinned to the BOTTOM-LEFT corner (cookie-widget style). Clicking
it opens the disclosure card right above the icon, normal: no centering,
no dimmed/blurry backdrop. */
html body .disclose-icon {
position: fixed;
z-index: 90;
left: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.10);
background: #ffffe6;
cursor: pointer;
padding: 0;
box-shadow: 0 8px 26px rgba(20, 60, 84, 0.22);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
html body .disclose-icon img {
width: 38px;
height: 38px;
object-fit: contain;
}
html body .disclose-icon:hover {
transform: scale(1.06);
}
/* the disclosure card itself: cookie position, above the icon, plain */
html body .consent-drawer {
left: 20px;
right: auto;
bottom: 20px;
}
html body .consent-drawer.overlay-mode {
inset: auto;
width: min(360px, calc(100vw - 32px));
display: block;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
}
html body .consent-drawer.overlay-mode .consent-card {
max-width: none;
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
/* part 102 - the consent card must stay INSIDE its 360px cookie drawer
(part 49 made it 520px wide, so it was cut off-screen on the left) */
html body div#consent-drawer .consent-card {
width: 100%;
}
/* part 103 - consent card restyled to match the reference cookie banner:
cream card, small-radius pillish buttons (two ghost + one dark teal),
tiny footer links + a "powered by" line */
html body div#consent-drawer .consent-card {
background: #fdfbef;
border-radius: 12px;
padding: 20px 20px 12px;
}
html body div#consent-drawer .consent-card > strong {
font-size: 16px;
margin-bottom: 10px;
}
html body div#consent-drawer .consent-btn {
border-radius: 6px;
padding: 11px 16px;
font-size: 14px;
}
html body div#consent-drawer .consent-ghost {
background: #f4f2e9;
border: 1px solid #d9d6c8;
color: #191919;
}
html body div#consent-drawer .consent-ghost:hover {
background: #edeae0;
}
html body div#consent-drawer .consent-primary {
background: #0e3a38;
border: 1px solid #0e3a38;
border-radius: 6px;
}
html body div#consent-drawer .consent-primary:hover {
background: #14514f;
}
html body div#consent-drawer .consent-foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
font-size: 12.5px;
color: #6f6c60;
}
html body div#consent-drawer .consent-foot-link {
color: #6f6c60;
text-decoration: none;
}
html body div#consent-drawer .consent-foot-link:hover {
color: #191919;
text-decoration: underline;
}
html body div#consent-drawer .consent-brand {
margin-inline-start: auto;
white-space: nowrap;
font-size: 11.5px;
color: #96948a;
}
/* part 104 - consent card polish to match the reference banner exactly:
no shadow, no black focus ring around the speak icon, card sized like
the reference (~480px) with the three buttons on one row */
html body div#consent-drawer .consent-card {
box-shadow: none !important;
padding: 20px 22px 12px;
}
html body .consent-drawer {
width: min(480px, calc(100vw - 32px));
}
html body div#consent-drawer .consent-buttons {
flex-flow: row nowrap;
align-items: center;
gap: 12px;
}
html body div#consent-drawer .consent-btn {
white-space: nowrap;
padding: 10px 16px;
}
html body div#consent-drawer .consent-speak,
html body div#consent-drawer .consent-speak:hover,
html body div#consent-drawer .consent-speak:focus,
html body div#consent-drawer .consent-speak:focus-visible,
html body div#consent-drawer .consent-speak:active,
html body div#consent-drawer .consent-speak.is-speaking {
outline: none !important;
border-color: rgba(0, 0, 0, 0.12) !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
/* part 105 - during catalog scrolling the consent card fades out and
returns with a fade-in once a different section is on screen */
html body .consent-drawer {
transition: opacity 0.45s ease, transform 0.45s ease;
}
html body .consent-drawer.mm-out {
opacity: 0;
transform: translateY(18px);
pointer-events: none;
}
/* part 106 - the dark "׳³ֲ׳³ֲ׳³ֲ©׳³ֲ¨ ׳³ֲ©׳³ֲ§׳³ֲ¨׳³ֲ׳³ֳ—׳³ג„¢" button is gone. The powered-by text
stays and gets the hand-drawn dashed frame look exactly as sketched */
html body #consent-drawer .consent-brand {
position: absolute;
left: 18px;
bottom: 16px;
max-width: 42%;
border: 1.5px dashed #b9b6a8;
border-radius: 10px;
padding: 7px 11px;
font-size: 10.5px;
color: #8b897d;
background: transparent;
}
/* the speak icon joins the same row as the dashed frame, centered */
html body #consent-drawer .consent-card { position: relative; }
html body #consent-drawer .consent-text { margin-bottom: 58px; }
html body #consent-drawer .consent-speak {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 16px;
margin: 0;
padding: 8px 10px;
}
/* part 107 - consent card gets a very subtle glass blur: the cream tint
stays, but the content behind the card is softly blurred through it
(small backdrop-filter, background slightly translucent) */
html body div#consent-drawer .consent-card {
background: rgba(253, 251, 239, 0.82) !important;
-webkit-backdrop-filter: blur(5px) saturate(1.05) !important;
backdrop-filter: blur(5px) saturate(1.05) !important;
}
@supports not (backdrop-filter: blur(5px)) {
html body #consent-drawer .consent-card {
background: rgba(253, 251, 239, 0.94);
}
}
/* part 108 - sidebar game icons get a "lighting up" hover effect:
a bright glow bloom above the existing color/scale hover */
html body .sky-window .games-arc img {
position: relative;
transition:
filter 0.28s ease,
transform 0.28s ease;
}
/* part 108 - hover keeps only the existing "wake to color" effect from
part 94: no brightness bump and no golden glow (user request) */
html body .sky-window .games-arc img:hover,
html body .sky-window .games-arc img:focus-visible {
filter: grayscale(0) opacity(1) !important;
transform: scale(1.06) !important;
}
/* part 109 - game icons: instead of a brightness bump / golden glow,
a soft WHITE diagonal shine sweeps downward over the hovered image.
Each image is wrapped by JS in .gc-w so the streak can be clipped */
html body .sky-window .games-arc .gc-w {
position: relative;
display: block;
width: fit-content;
align-self: center;
overflow: hidden;
border-radius: 22%;
}
html body .sky-window .games-arc .gc-w img {
display: block;
margin: 0 !important;
}
html body .sky-window .games-arc .gc-w::after {
content: "";
position: absolute;
left: -40%;
top: -150%;
width: 200%;
height: 130%;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 32%,
rgba(255, 255, 255, 0.5) 49%,
rgba(255, 255, 255, 0) 66%);
transform: rotate(14deg);
opacity: 0;
pointer-events: none;
}
html body .sky-window .games-arc .gc-w:hover::after {
animation: gcShineSweep 0.8s ease;
}
@keyframes gcShineSweep {
0% { top: -150%; opacity: 0; }
18% { opacity: 1; }
100% { top: 150%; opacity: 0; }
}
/* part 110 - the white diagonal shine must live INSIDE the game icon
itself, not on a rectangle above it: the streak is masked with the
icon's own transparency (mask-image = the same PNG), so it can never
show outside the picture's pixels */
html body .sky-window .games-arc .gc-w::after {
width: 100%;
height: 170%;
left: 0;
top: -160%;
transform: none;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.55) 49%,
rgba(255, 255, 255, 0) 60%);
-webkit-mask-image: var(--gcimg);
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: var(--gcimg);
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
/* part 111 - showcase section redesign: the two rarity "books" sit as
two separate labeled strips (never merged), and the trade bad-choice
block shows a real mini trade board instead of generic copy */
html body .showcase-copy .duel-score {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: stretch;
margin-top: 18px;
}
html body .showcase-copy .duel {
display: grid;
gap: 4px;
align-content: start;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--line);
}
html body .showcase-copy .duel-official {
background: linear-gradient(180deg, rgba(214, 164, 66, 0.10), rgba(214, 164, 66, 0.03));
border-inline-start: 3px solid #b98a1e;
}
html body .showcase-copy .duel-community {
background: linear-gradient(180deg, rgba(92, 106, 136, 0.09), rgba(92, 106, 136, 0.03));
border-inline-start: 3px solid #5c6a88;
}
html body .showcase-copy .duel-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-3, #6d707c);
}
html body .showcase-copy .duel-official .duel-value { color: #8a6110; }
html body .showcase-copy .duel-community .duel-value { color: #43506b; }
html body .showcase-copy .duel-value {
font-size: 21px;
font-weight: 800;
line-height: 1.1;
}
html body .showcase-copy .duel-expl {
font-size: 12.5px;
line-height: 1.45;
color: var(--text-2, #565a66);
}
html body .showcase-copy .duel-div {
align-self: center;
font-size: 26px;
font-weight: 800;
color: #9aa0ae;
}
@media (max-width: 640px) {
html body .showcase-copy .duel-score { grid-template-columns: 1fr; }
html body .showcase-copy .duel-div { justify-self: center; }
}
/* mini live trade preview inside block 2 */
html body .showcase-copy .trade-preview {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
margin-top: 16px;
}
html body .showcase-copy .tp-side {
display: grid;
gap: 5px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--panel-2, rgba(255,255,255,.55));
}
html body .showcase-copy .tp-tag {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text-3, #6d707c);
}
html body .showcase-copy .tp-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--text-1, #23252d);
}
html body .showcase-copy .tp-item img {
width: 30px;
height: 30px;
object-fit: contain;
padding: 2px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--panel);
}
html body .showcase-copy .tp-rarity {
font-size: 11.5px;
color: var(--text-2, #565a66);
}
html body .showcase-copy .tp-vs {
font-size: 20px;
color: #9aa0ae;
}
html body .showcase-copy .tp-verdict {
margin-top: 10px;
padding: 10px 14px;
border-radius: 12px;
border-inline-start: 3px solid #3d8a4e;
background: rgba(90, 170, 110, 0.10);
font-size: 13px;
font-weight: 600;
color: #2c6237;
}
@media (max-width: 640px) {
html body .showcase-copy .trade-preview { grid-template-columns: 1fr; }
html body .showcase-copy .tp-vs { justify-self: center; }
}
/* part 112 - showcase rebuild: the whole band is filled top-to-bottom
with the site banner image; NO boxed cards inside (no card-on-card),
content sits directly on the artwork with one soft readability veil.
The band stays in normal document flow (its own block, never
floating above neighbors) */
html body #showcase {
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(180deg,
rgba(250, 250, 252, 0.30) 0%,
rgba(250, 250, 252, 0.62) 58%,
rgba(250, 250, 252, 0.94) 100%),
url("images/bg-banner.png") center / cover no-repeat;
}
html body #showcase::before {
display: none;
content: none;
}
html body #showcase .shell {
position: relative;
z-index: 1;
}
/* kill every inner box: the media frames become plain artwork */
html body #showcase .showcase-media {
border: 0;
background: transparent;
box-shadow: none;
min-height: 260px;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs img {
border: 0;
background: transparent;
}
/* duel score: no card boxes anymore - open strips with a colored spine */
html body #showcase .showcase-copy .duel {
border: 0;
border-top: 1px solid rgba(24, 28, 44, 0.14);
border-radius: 0;
background: transparent;
padding: 14px 6px 6px;
margin-bottom: 26px;
}
html body #showcase .showcase-copy .duel-official {
border-top: 3px solid #b98a1e;
border-top-width: 3px;
border-inline-start: 0;
background: transparent;
}
html body #showcase .showcase-copy .duel-community {
border-top: 3px solid #5c6a88;
border-top-width: 3px;
border-inline-start: 0;
background: transparent;
}
html body #showcase .showcase-copy .duel-label { font-size: 12.5px; }
html body #showcase .showcase-copy .duel-value { font-size: 30px; }
html body #showcase .showcase-copy .duel-expl { font-size: 14.5px; line-height: 1.55; color: #353945; }
html body #showcase .showcase-copy .duel-div { font-size: 30px; color: #6f7584; }
html body #showcase .showcase-copy .duel-official .duel-value { color: #7c5709; }
html body #showcase .showcase-copy .duel-community .duel-value { color: #3c4760; }
/* trade preview: no chips - directly on the artwork */
html body #showcase .showcase-copy .tp-side {
border: 0;
border-top: 1px solid rgba(24, 28, 44, 0.14);
border-radius: 0;
background: transparent;
padding: 12px 6px 4px;
}
html body #showcase .showcase-copy .tp-item { font-size: 17px; color: #1e2029; }
html body #showcase .showcase-copy .tp-item img { width: 42px; height: 42px; border: 0; background: transparent; }
html body #showcase .showcase-copy .tp-rarity { font-size: 13.5px; color: #3a3e4a; }
html body #showcase .showcase-copy .tp-verdict {
font-size: 14.5px;
background: rgba(250, 250, 252, 0.72);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
html body #showcase .showcase-copy h3 {
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing: -0.01em;
}
html body #showcase .showcase-copy > p {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6;
color: #2e323e;
max-width: 56ch;
}
/* part 113 - showcase thumbs: bigger legendary items grid, and the
items-count badge gets a real amber background + colored text */
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
html body #showcase .showcase-thumbs img {
height: clamp(150px, 16vw, 220px);
padding: 18px;
border-radius: 18px;
}
html body #showcase .showcase-media.is-grid {
min-height: 0;
padding: 24px;
}
/* the count badge: warm amber fill, dark amber text, larger */
html body #showcase .showcase-media.is-grid .showcase-badge {
background: #f6dd8f;
border: 1px solid #d9ab35;
color: #6a4a08;
font-size: 14px;
font-weight: 800;
padding: 8px 16px;
box-shadow: 0 10px 24px -14px rgba(122, 84, 8, 0.55);
}
/* part 114 - the TEXT side of the showcase blocks (not the images!)
gets one soft glass card, this time in a warm ORANGE tint instead
of the usual pale blue. Applied to the FIRST TWO blocks only */
html body #showcase .showcase-copy {
position: relative;
}
html body #showcase .showcase-block:nth-child(-n+2) .showcase-copy {
background: rgba(252, 196, 88, 0.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: none;
border: 1px solid rgba(252, 196, 88, 0.3);
border-radius: 16px;
padding: clamp(22px, 3vw, 38px);
}
html body #showcase .showcase-block:nth-child(3) .showcase-copy,
html body #showcase .showcase-block:last-child .showcase-copy {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
box-shadow: none;
padding: 0;
}
/* inside the warm card the open strips read better on cream - give
them back their spine separation without recreating boxes */
html body #showcase .showcase-copy .duel {
border-top: 3px solid #b98a1e;
padding: 14px 10px 6px;
}
html body #showcase .showcase-copy .duel-community {
border-top-color: #5c6a88;
}
html body #showcase .showcase-copy .tp-verdict {
background: rgba(255, 250, 242, 0.85);
}
/* part 116 - mobile accessibility (Samsung S22 and friends): the
consent card must never overflow a 360px-wide screen */
html body #consent-drawer {
width: min(480px, calc(100vw - 32px)) !important;
max-width: none !important;
left: 16px !important;
bottom: 16px !important;
}
html body #consent-drawer .consent-brand {
max-width: 48%;
}
/* part 117 - break the showcase band OUT of the narrow rails column:
the artwork must fill the whole viewport width edge-to-edge (no more
white paper margins on both sides), while the shell content stays
centered and readable in the middle */
html body section#showcase {
box-sizing: border-box;
padding-block: clamp(30px, 4vw, 60px);
}
html body section#showcase .shell {
max-width: 1060px;
margin-inline: auto !important;
}
/* safety: a scrollbar must not create sideways scrolling */
html body {
overflow-x: clip;
}
/* part 118 - trade preview as a real checker interface:
hierarchy = kicker line > two item cards > value swap > verdict > one button */
html body .tp-kicker {
margin: 0 0 4px;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--muted, #5b6b7c);
}
html body .trade-preview .tp-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
html body .trade-preview .tp-card img {
width: 120px;
height: 120px;
object-fit: contain;
display: block;
}
html body .trade-preview .tp-card strong {
font-size: 17px;
line-height: 1.25;
}
html body .trade-preview .tp-rarity {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
}
html body .tp-dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
html body .tp-dot-amber { background: #b98a1e; }
html body .tp-dot-blue { background: #3e6bd6; }
html body .trade-preview .tp-note {
font-size: 12px;
color: var(--muted, #5b6b7c);
}
html body .trade-preview .tp-middle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
html body .trade-preview .tp-vs {
font-size: 26px;
line-height: 1;
}
html body .trade-preview .tp-gap {
font-family: var(--mono, monospace);
font-size: 13px;
color: var(--muted, #5b6b7c);
white-space: nowrap;
}
html body .tp-verdict {
display: flex;
flex-direction: column;
gap: 3px;
}
html body .tp-verdict strong {
font-size: 17px;
}
html body .tp-verdict > span {
font-size: 13px;
}
html body .tp-verdict small {
font-family: var(--mono, monospace);
font-size: 12px;
color: var(--muted, #5b6b7c);
}
/* mobile: keep the checker readable on the S22 width */
@media (max-width: 640px) {
html body .trade-preview .tp-card img {
width: 88px;
height: 88px;
}
}
/* part 119 - checker concept, pure data: side >= side, value >= value,
balance meter, big verdict. no explanatory text at all */
html body .showcase-checker .showcase-copy {
max-width: 620px;
margin-inline: auto;
}
html body .trade-preview .tp-head {
display: block;
text-align: center;
font-size: 13px;
letter-spacing: 0.08em;
color: var(--muted, #5b6b7c);
margin-bottom: 14px;
}
html body .trade-preview .tp-cols {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: start;
}
html body .trade-preview .tp-card {
border: 1px solid var(--line, rgba(20, 52, 74, .15));
border-radius: 16px;
padding: 14px 12px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
}
html body .trade-preview .tp-card img {
width: 92px;
height: 92px;
object-fit: contain;
display: block;
}
html body .trade-preview .tp-card strong {
font-size: 15px;
line-height: 1.3;
text-align: center;
}
html body .trade-preview .tp-val {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
margin-top: 8px;
}
html body .trade-preview .tp-val b {
font-family: var(--mono, monospace);
font-size: 20px;
font-weight: 600;
}
html body .trade-preview .tp-val em {
font-style: normal;
color: var(--muted, #5b6b7c);
}
/* balance meter: a thin track with a pin sitting on the "-" mark */
html body .trade-preview .tp-meter {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 18px;
}
html body .trade-preview .tp-track {
position: relative;
width: min(380px, 100%);
height: 6px;
border-radius: 999px;
background: var(--line-soft, rgba(20, 52, 74, .12));
}
html body .trade-preview .tp-track::before {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
inset-inline-start: 50%;
width: 1px;
background: var(--line, rgba(20, 52, 74, .25));
}
html body .trade-preview .tp-pin {
position: absolute;
top: 50%;
inset-inline-start: 62%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #d9a12b;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(20, 52, 74, .25);
transform: translate(-50%, -50%);
}
html[data-dir="rtl"] .trade-preview .tp-pin,
[dir="rtl"] .trade-preview .tp-pin {
transform: translate(50%, -50%);
}
html body .trade-preview .tp-gap {
font-family: var(--mono, monospace);
font-size: 13px;
color: #a3520f;
}
/* the result is the loudest thing on the card */
html body .trade-preview .tp-verdict {
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 10px;
}
html body .trade-preview .tp-verdict strong {
font-size: 26px;
letter-spacing: -0.01em;
}
html body .trade-preview .tp-verdict > span {
font-size: 14px;
color: var(--muted, #5b6b7c);
}
html body .showcase-checker [data-open-trade] {
display: block;
margin: 16px auto 0;
}
/* mobile: single column, meter stays centered */
@media (max-width: 640px) {
html body .trade-preview .tp-cols {
grid-template-columns: 1fr;
justify-items: center;
}
html body .trade-preview .tp-vs {
order: 5;
}
html body .trade-preview .tp-card {
max-width: 240px;
}
}
/* part 120 - the checker block is a standalone full-width interface,
NOT half of a media+copy grid (later rules force 2 columns on every
.showcase-block, we un-grid this one explicitly) */
html body .showcase-block.showcase-checker {
display: flex;
justify-content: center;
grid-template-columns: none;
gap: 0;
padding-block: clamp(30px, 4vw, 56px);
}
html body .showcase-checker .showcase-copy {
max-width: 620px;
width: 100%;
margin-inline: 0 !important;
box-sizing: border-box;
}
html body .showcase-checker .trade-preview {
width: 100%;
}
/* the verdict must never wrap letter by letter */
html body .showcase-checker .tp-verdict strong {
font-size: 24px;
white-space: nowrap;
}
html body .showcase-checker .tp-verdict > span {
white-space: nowrap;
}
/* meter sits centered under the two sides, not squeezed in a corner */
html body .showcase-checker .tp-meter {
width: 100%;
padding-inline: 12px;
}
html body .showcase-checker .tp-track {
width: 100%;
}
/* part 121 - neutralize legacy trade-preview chrome inside the new
checker: container is a plain block (the inner .tp-cols owns the
columns), sides are unboxed, verdict loses its old green box */
html body .showcase-checker .trade-preview {
display: block;
grid-template-columns: none;
gap: 0;
margin-top: 0;
}
html body .showcase-checker .trade-preview .tp-side {
border: 0;
background: none;
padding: 0;
gap: 8px;
}
html body .showcase-checker .trade-preview .tp-tag {
font-size: 12px;
color: var(--muted, #5b6b7c);
}
html body .showcase-checker .trade-preview .tp-verdict {
background: none;
border: 0;
padding: 0;
margin-top: 14px;
color: inherit;
font-weight: 400;
}
html body .showcase-checker .trade-preview .tp-verdict strong {
color: var(--text, #14252f);
}
html body .showcase-checker .trade-preview .tp-vers {
display: none;
}
/* part 122 - legacy rules carry the #showcase id (higher specificity),
so these overrides match that same specificity and come later */
html body #showcase .showcase-checker .tp-verdict {
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
padding: 0;
font-size: inherit;
}
html body #showcase .showcase-checker .tp-side {
border: 0;
border-top: 0;
background: none;
padding: 0;
border-radius: 0;
}
/* part 123 - no card at all: just two big items, the more valuable one
breathing in color, the less valuable one graying out */
html body #showcase .showcase-checker .showcase-copy {
background: none !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
}
html body #showcase .showcase-checker .showcase-copy,
html body #showcase .showcase-checker .showcase-copy::before,
html body #showcase .showcase-checker .showcase-copy::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html body .showcase-checker .trade-preview .tp-head {
display: none;
}
/* items lose their inner boxes - the item IS the visual */
html body .showcase-checker .trade-preview .tp-card {
border: 0;
background: none;
border-radius: 0;
padding: 0;
}
html body .showcase-checker .trade-preview .tp-card img {
width: 150px;
height: 150px;
margin-inline: auto;
display: block;
}
/* the side that is worth more: living color with a subtle breathing glow */
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
filter: saturate(1.15);
will-change: filter, transform;
}
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
animation: tpLive 3.4s ease-in-out infinite;
}
@keyframes tpLive {
0%, 100% {
filter: saturate(1.12);
transform: scale(1);
}
50% {
filter: saturate(1.35) drop-shadow(0 8px 20px rgba(61, 138, 78, 0.30));
transform: scale(1.035);
}
}
@media (prefers-reduced-motion: reduce) {
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
animation: none;
filter: saturate(1.2);
}
}
/* the side that is worth less: gray, still */
html body .showcase-checker .tp-side:nth-child(3) .tp-card img {
filter: grayscale(1) opacity(0.75);
}
/* the numbers tell the same story */
html body .showcase-checker .tp-side:nth-child(1) .tp-val b { color: #2c6237; }
html body .showcase-checker .tp-side:nth-child(3) .tp-val b { color: #9aa0ae; }
html body .showcase-checker .tp-side:nth-child(3) .tp-val em { color: #9aa0ae; }
html body .showcase-checker .tp-side:nth-child(3) .tp-val .tp-dot-amber { background: #b9bcc4; }
/* part 124 - remove what was crossed out in red: side labels, swap
arrow, balance meter and verdict. only items + the one button live */
html body .showcase-checker .trade-preview .tp-tag,
html body .showcase-checker .trade-preview .tp-vs,
html body .showcase-checker .trade-preview .tp-meter,
html body .showcase-checker .trade-preview .tp-verdict {
display: none !important;
}
html body .showcase-checker .trade-preview .tp-cols {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* part 125 - designed value badge under each item */
html body .showcase-checker .trade-preview .tp-side {
justify-items: center;
text-align: center;
}
html body .showcase-checker .trade-preview .tp-val {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 7px 16px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 13px;
}
html body .showcase-checker .trade-preview .tp-val b {
font-family: var(--mono, monospace);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
}
html body .showcase-checker .trade-preview .tp-val em {
font-style: normal;
font-size: 13px;
order: 2;
}
html body .showcase-checker .trade-preview .tp-val .tp-dot {
order: 3;
}
html body .showcase-checker .tp-side:nth-child(3) .tp-val .tp-dot {
order: 1;
}
/* worth more: alive */
html body .showcase-checker .tp-side:nth-child(1) .tp-val {
background: rgba(61, 138, 78, 0.10);
border-color: rgba(61, 138, 78, 0.30);
}
html body .showcase-checker .tp-side:nth-child(1) .tp-val b {
color: #2c6237;
}
html body .showcase-checker .tp-side:nth-child(1) .tp-val em {
color: #2c6237;
}
/* worth less: quiet gray */
html body .showcase-checker .tp-side:nth-child(3) .tp-val {
background: rgba(120, 128, 140, 0.10);
border-color: rgba(120, 128, 140, 0.22);
}
html body .showcase-checker .tp-side:nth-child(3) .tp-val b {
color: #8d93a0;
}
html body .showcase-checker .tp-side:nth-child(3) .tp-val em {
color: #8d93a0;
}
/* part 126 - crossed out: both value pills, and the hairline separators
above/below the checker block. items go bigger */
html body .showcase-checker .trade-preview .tp-val {
display: none !important;
}
html body #showcase .showcase-block.showcase-checker {
border-top: 0;
}
html body #showcase .showcase-block.showcase-checker + .showcase-block,
html body #showcase .showcase-block.showcase-checker {
border-top: 0;
padding-block: clamp(26px, 3vw, 44px);
}
/* bigger items */
html body .showcase-checker .trade-preview .tp-card img {
width: 185px;
height: 185px;
}
/* the name sits a bit tighter under the bigger art */
html body .showcase-checker .trade-preview .tp-card strong {
font-size: 16px;
}
/* mobile: smaller but still large */
@media (max-width: 640px) {
html body .showcase-checker .trade-preview .tp-card img {
width: 130px;
height: 130px;
}
}
/* part 127 - live comparison: cards fade between rotating pairs;
both items breathe, the rare one breathes in color, the common in gray */
html body .showcase-checker .trade-preview .tp-card {
transition: opacity 0.35s ease, transform 0.35s ease;
}
html body .showcase-checker .trade-preview .tp-card.is-fading {
opacity: 0;
transform: scale(0.97);
}
html body .showcase-checker .trade-preview .tp-card img {
transition: none;
}
/* living color breath = already tpLive (part 123); add matching gray breath */
@keyframes tpLiveGray {
0%, 100% { transform: scale(1); opacity: 0.72; }
50% { transform: scale(1.025); opacity: 0.8; }
}
html body .showcase-checker .tp-side:nth-child(3) .tp-card img {
animation: tpLiveGray 3.4s ease-in-out infinite;
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
html body .showcase-checker .tp-side:nth-child(3) .tp-card img {
animation: none;
}
}
/* part 128 - micro breath, no shadow, names never collide */
html body .showcase-checker .trade-preview .tp-cols {
gap: clamp(36px, 6vw, 72px);
}
@keyframes tpLive {
0%, 100% { transform: scale(1); filter: saturate(1.05); }
50% { transform: scale(1.012); filter: saturate(1.18); }
}
@keyframes tpLiveGray {
0%, 100% { transform: scale(1); opacity: 0.72; }
50% { transform: scale(1.008); opacity: 0.78; }
}
html body .showcase-checker .tp-side:nth-child(1) .tp-card img {
filter: saturate(1.05) !important;
}
/* keep names a single line with a little air under the art */
html body .showcase-checker .trade-preview .tp-card strong {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
html body .showcase-checker .trade-preview .tp-card strong {
font-size: 15px;
}
/* part 129 - block 1: same item speaks twice, with color instead of text.
gold copy = official legendary, gray copy = community common */
html body #showcase .showcase-media.is-duel {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(20px, 4vw, 44px);
min-height: 0;
}
html body #showcase .showcase-media.is-duel .showcase-badge {
display: none;
}
html body .showcase-media.is-duel .duel-ghost {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
html body .showcase-media.is-duel .duel-ghost img {
width: 130px;
height: 130px;
object-fit: contain;
display: block;
}
/* official: full color with a warm gold presence */
html body .showcase-media.is-duel .is-gold img {
filter: saturate(1.12) drop-shadow(0 10px 18px rgba(185, 138, 30, 0.25));
}
/* community: the same item, grayed */
html body .showcase-media.is-duel .is-slate img {
filter: grayscale(1) opacity(0.7);
}
html body .duel-chip {
font-size: 12.5px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
html body .duel-chip-gold {
background: rgba(185, 138, 30, 0.14);
border-color: rgba(185, 138, 30, 0.35);
color: #7a5a12;
}
html body .duel-chip-slate {
background: rgba(92, 106, 136, 0.14);
border-color: rgba(92, 106, 136, 0.30);
color: #5c6a88;
}
html body .showcase-media.is-duel .duel-div {
font-size: 30px;
font-weight: 700;
color: var(--text-3, #6d707c);
}
@media (max-width: 640px) {
html body .showcase-media.is-duel .duel-ghost img {
width: 96px;
height: 96px;
}
}
/* part 130 - the != mark becomes a designed badge: half gold (official),
half slate (community), tied to both item copies by a hairline */
html body .showcase-media.is-duel .duel-div {
position: relative;
width: 52px;
height: 52px;
font-size: 0;
flex-shrink: 0;
}
html body .showcase-media.is-duel .duel-div::before {
content: "\2260";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: #ffffff;
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #b98a1e 0%, #b98a1e 50%, #5c6a88 50%, #5c6a88 100%);
box-shadow: 0 6px 14px rgba(20, 52, 74, 0.18), inset 0 0 0 2px #ffffff;
}
/* the hairline that ties the badge to both copies - one story, two books */
html body .showcase-media.is-duel .duel-div::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: clamp(16px, 3vw, 34px);
height: 2px;
background: linear-gradient(to left, rgba(185, 138, 30, 0.8), rgba(185, 138, 30, 0));
}
html body .showcase-media.is-duel .duel-ghost.is-slate {
position: relative;
}
html body .showcase-media.is-duel .duel-ghost.is-slate::before {
content: "";
position: absolute;
top: 65px; /* center of the item art */
left: clamp(-40px, -4vw, -18px);
width: clamp(14px, 3vw, 32px);
height: 2px;
background: linear-gradient(to right, rgba(92, 106, 136, 0.8), rgba(92, 106, 136, 0));
}
/* part 131 - block 1 trimmed: no title card, no gray copy; badge and
both chips go small; block centers its single media */
html body .showcase-block:has(.is-duel) {
display: flex;
justify-content: center;
grid-template-columns: none;
gap: 0;
}
html body #showcase .showcase-media.is-duel {
max-width: none;
width: auto;
}
html body .showcase-media.is-duel .duel-chip {
font-size: 11px;
padding: 4px 10px;
font-weight: 600;
}
html body .showcase-media.is-duel .duel-div {
width: 34px !important;
height: 34px !important;
font-size: 0;
}
html body .showcase-media.is-duel .duel-div::before {
font-size: 16px;
width: 34px;
height: 34px;
inset: 0;
box-shadow: 0 4px 10px rgba(20, 52, 74, 0.16), inset 0 0 0 1.5px #fff;
}
/* connectors off - the trio sits tight */
html body .showcase-media.is-duel .duel-div::after,
html body .showcase-media.is-duel .duel-ghost.is-slate::before {
content: none;
}
/* the slate chip stands alone under nothing - keep it aligned with the badge */
html body .showcase-media.is-duel .duel-chip.duel-chip-slate {
align-self: center;
}
html body .showcase-media.is-duel .duel-ghost.is-gold img {
width: 130px;
height: 130px;
}
/* part 132 - one composed section: the two comparison demos side by
side, everything tightened vertically (no stacked full-height rows) */
html body .showcase-pair {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(18px, 3vw, 44px);
align-items: center;
padding-block: clamp(6px, 1vw, 14px);
}
html body .showcase-pair .showcase-block {
padding-block: 0 !important;
border-top: 0 !important;
display: flex !important;
justify-content: center;
grid-template-columns: none !important;
}
html body #showcase .showcase-block {
padding-block: clamp(12px, 2vw, 24px);
border-top: 0;
}
@media (max-width: 900px) {
html body .showcase-pair {
grid-template-columns: minmax(0, 1fr);
}
}
/* part 133 - the light background must always reach both screen edges
(CSS-only fallback: even if JS is off, the band spans the viewport) */
html body section#showcase {
width: 100vw;
}
/* checker moves to the left station (the marked dot on the Y axis)
and gets a slight size bump */
html body .showcase-pair {
grid-template-columns: 1fr;
justify-items: end; /* RTL: end = left side */
max-width: 1072px;
margin-inline: auto;
padding-inline: clamp(12px, 3vw, 40px);
box-sizing: border-box;
}
html body .showcase-checker .showcase-copy {
max-width: 680px !important;
}
html body .showcase-checker .trade-preview .tp-card img {
width: 165px;
height: 165px;
}
@media (max-width: 640px) {
html body .showcase-checker .trade-preview .tp-card img {
width: 130px;
height: 130px;
}
}
/* part 134 - sides clean: no vertical hairlines on the showcase band;
the band now sits outside the clipping rails so its artwork can
genuinely reach the screen edges */
html body #showcase .shell {
border-inline: 0 !important;
}
html body #showcase {
border-inline: 0 !important;
}
/* part 135 - the checker CTA: wider reach, clean hairline outline */
html body .showcase-checker [data-open-trade] {
min-width: 230px;
padding-inline: 34px;
background: none;
border: 1px dashed rgba(20, 52, 74, 0.45);
box-shadow: none;
color: #2c3a46;
}
/* part 136 - rotation must never move layout: fixed card box, name on
a single locked line (long names get ellipsis, never a second row) */
html body .showcase-checker .tp-card {
box-sizing: border-box;
width: 165px;
}
html body .showcase-checker .tp-card strong {
display: block;
max-width: 165px;
line-height: 20px;
height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* part 137 - the checker CTA leaves its old spot under the items and
takes the open station beside them (the marked rectangle), RTL:
row-reverse keeps the items at the left and pushes the button right */
html body .showcase-checker .showcase-copy {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: clamp(28px, 6vw, 90px);
justify-content: center;
}
/* part 138 - no separator edges between showcase and its neighbors:
the band flows straight into the sky above and the catalog below */
html body #showcase {
border-block: 0 !important;
}
/* part 140 - mobile S (320px): the checker stacks (items on top, button
below), cards shrink fluidly to half the viewport, thumbs shrink */
@media (max-width: 640px) {
html body #showcase .shell {
padding-inline: clamp(10px, 4vw, 20px);
}
html body .showcase-pair {
justify-items: center;
padding-inline: 0;
max-width: none;
}
html body .showcase-checker .showcase-copy {
flex-direction: column;
gap: 16px;
padding-inline: 12px;
box-sizing: border-box;
}
html body .showcase-checker .tp-cols {
gap: 12px;
}
html body .showcase-checker .tp-card {
width: min(140px, calc((100vw - 104px) / 2)) !important;
}
html body .showcase-checker .tp-card img {
width: 100% !important;
height: auto;
aspect-ratio: 1;
}
html body .showcase-checker .tp-card strong {
max-width: 100%;
}
html body .showcase-checker [data-open-trade] {
min-width: 0;
width: min(230px, calc(100vw - 96px));
padding-inline: 18px;
}
html body #showcase #showcase .showcase-block .showcase-media.is-grid img {
width: clamp(96px, 28vw, 130px) !important;
height: auto;
aspect-ratio: 1;
}
}
/* part 141 - the island map is the backdrop of the showcase band itself
(where the artwork/white used to be) */
html body #showcase {
background-image: url("images/island-map.png") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* part 142 - the map band reaches into the white corner notches that
the catalog's 140px rounding leaves: map patches sit behind the
catalog exactly in its rounded corners, continuing the band */
html body #showcase {
position: relative;
isolation: isolate;
}
html body #showcase::before,
html body #showcase::after {
content: "";
position: absolute;
bottom: -141px;
width: min(360px, 40vw);
height: 141px;
z-index: -1;
background-image: url("images/island-map.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html body #showcase::before { right: 0; }
html body #showcase::after { left: 0; }
/* part 143 - sky's 28px bottom rounding also leaves white notches:
masked map patches fill exactly the curve's missing quarter while the
band itself goes viewport-locked so every patch stays seamless */
html body #showcase {
background-attachment: fixed !important;
}
html body .sky-frame .sky-canvas {
position: relative;
}
html body .sky-frame .sky-canvas::before,
html body .sky-frame .sky-canvas::after {
content: "";
position: absolute;
bottom: 0;
width: 28px;
height: 28px;
background-image: url("images/island-map.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html body .sky-frame .sky-canvas::before {
right: 0;
-webkit-mask-image: radial-gradient(circle 28.5px at 0 0, transparent 27.5px, #000 28.5px);
mask-image: radial-gradient(circle 28.5px at 0 0, transparent 27.5px, #000 28.5px);
}
html body .sky-frame .sky-canvas::after {
left: 0;
-webkit-mask-image: radial-gradient(circle 28.5px at 100% 0, transparent 27.5px, #000 28.5px);
mask-image: radial-gradient(circle 28.5px at 100% 0, transparent 27.5px, #000 28.5px);
}
/* part 144 - the blue quote card's 96px top rounding leaves white
quarters below the map band: masked map patches fill exactly those
curve notches, viewport-locked to continue the band seamlessly */
html body .blue-quote {
position: relative;
}
html body .blue-quote::before,
html body .blue-quote::after {
content: "";
position: absolute;
top: 0;
width: 97px;
height: 97px;
background-image: url("images/island-map.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html body .blue-quote::before {
right: 0;
-webkit-mask-image: radial-gradient(circle 97px at 100% 0, transparent 96px, #000 97px);
mask-image: radial-gradient(circle 97px at 100% 0, transparent 96px, #000 97px);
}
html body .blue-quote::after {
left: 0;
-webkit-mask-image: radial-gradient(circle 97px at 0 0, transparent 96px, #000 97px);
mask-image: radial-gradient(circle 97px at 0 0, transparent 96px, #000 97px);
}
/* part 145 - the band returns to a flat navy #172B4D: the island map
and every masked patch it spawned are gone, and the section texts
flip to light tones so they read on the dark ground */
html body #showcase {
background: transparent !important;
}
html body #showcase::before,
html body #showcase::after {
content: none !important;
}
html body .sky-frame .sky-canvas::before,
html body .sky-frame .sky-canvas::after {
content: none !important;
}
html body .blue-quote::before,
html body .blue-quote::after {
content: none !important;
}
html body #showcase h1,
html body #showcase h2,
html body #showcase h3 {
color: #eaf1fb !important;
}
html body #showcase p {
color: #b9c8dd !important;
}
html body .showcase-checker .tp-card strong {
color: #dfe9f6 !important;
}
html body .showcase-checker [data-open-trade] {
border-color: rgba(255, 255, 255, 0.42) !important;
color: #eef4fc !important;
}
html body #showcase .button-ghost {
border-color: rgba(255, 255, 255, 0.42) !important;
color: #eef4fc !important;
}
/* part 147 - navy sweeps need light ink: every light-theme text token
flips so the site reads on #172B4D ground */
[data-theme="light"] {
--text: #eaf1fb;
--text-2: #c7d5e9;
--muted: #9db3d2;
--muted-2: #8aa3c4;
--line: rgba(255, 255, 255, 0.14);
--line-strong: rgba(255, 255, 255, 0.24);
}
html body {
background-color: #172B4d;
background-image: url("images/hero-bg-radial.png") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}
/* part 148 - hero sits on the light sky: its ink returns to deep navy
(the earlier light flip wrongly assumed a night ground there);
header nav on the sky likewise stays dark, only the navy tail bands
keep light ink */
html body header.site-header a {
color: #2c4a5e !important;
}
html body .hero-lead,
html body .hero-lead strong {
color: #14344a !important;
}
html body .accent-text {
color: #14344a !important;
}
html body .xt-text {
color: #14344a !important;
}
html body .hero-stats dt {
color: #33566c !important;
}
html body .hero-stats dd,
html body .hero-stats .mono {
color: #14344a !important;
}
html body .site-rails.is-tail h2 {
color: #eaf1fb !important;
}
html body .site-rails.is-tail .section-lead {
color: #9db3d2 !important;
}
/* part 149 - the trade board + the CTA band below get a native navy
design instead of paper cards washed in on the night ground */
html body #trade {
background: transparent !important;
color: #eaf1fb;
}
html body #trade .section-head h2,
html body #trade .section-head h3 {
color: #eaf1fb !important;
}
html body #trade .section-head p,
html body #trade .section-lead {
color: #9db3d2 !important;
}
html body #trade #trade-board {
border-color: rgba(255, 255, 255, 0.1) !important;
color: #eaf1fb !important;
box-shadow: none !important;
}
html body #trade-board .trade-column {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
html body #trade-board .search-field-small,
html body #trade-board .verdict.verdict-inner {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
html body #trade-board .search-field-small input,
html body #trade-board .verdict-copy strong,
html body #trade-board .trade-column strong {
color: #eaf1fb !important;
}
html body #trade-board .search-field-small input::placeholder,
html body #trade-board .search-field-small .icon {
color: #8aa3c4 !important;
}
html body #trade-board .verdict-copy p,
html body #trade-board .trade-column p {
color: #9db3d2 !important;
}
html body section#start,
html body section.band-start {
background: transparent !important;
}
html body section#start h2,
html body section#start h3,
html body section#start p {
color: #eaf1fb !important;
}
html body section#start .section-lead,
html body section#start p.muted,
html body section#start small {
color: #9db3d2 !important;
}
/* part 150 - the radial background's recipe, applied site-wide:
(1) one huge soft glow of the section's own hue, slightly brighter,
off-center; (2) a bottom/edge darkening so content sits in depth;
light zones (sky) get a lighter-glow + gentle navy falloff, dark
zones get a violet glow + deeper falloff. New layers only - each
section keeps its own base color. */
html body #showcase,
html body #trade,
html body #start,
html body #catalog {
background-image:
linear-gradient(180deg, rgba(4, 6, 14, 0) 55%, rgba(4, 6, 14, 0.42) 100%),
radial-gradient(120% 90% at 72% 46%, rgba(98, 78, 214, 0.20) 0%, rgba(98, 78, 214, 0) 62%) !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
html body .sky-frame .sky-canvas {
background-image:
linear-gradient(180deg, rgba(16, 26, 42, 0) 62%, rgba(16, 26, 42, 0.30) 100%),
radial-gradient(110% 80% at 68% 40%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, #a9e7ff 0%, #c2ecff 46%, #a9e7ff 100%) !important;
}
/* part 151 - retire the old island-map corner patches behind the blue
quote card: the page artwork fills those notches now */
html body .blue-quote::before,
html body .blue-quote::after {
content: none !important;
}
/* part 152 - the blue quote keeps its 96px top rounding; the two notch
squares behind those corners are now filled with the page artwork
itself (same fixed/cover/center anchors as the body), painted at the
band level so the card's blue is drawn over them and only the notch
shows the continuing ground */
html body .band-tint:has(.blue-quote),
html body .site-rails .band-tint:has(.blue-quote) {
position: relative;
}
html body .band-tint:has(.blue-quote)::before,
html body .band-tint:has(.blue-quote)::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
width: 96px !important;
height: 96px !important;
z-index: -1 !important;
background: url("images/hero-bg-radial.png") !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
transform: none !important;
}
html body .band-tint:has(.blue-quote)::after {
inset-inline-start: 0 !important;
}
html body .band-tint:has(.blue-quote)::before {
inset-inline-end: 0 !important;
}
/* part 153 - item modal slimmed to what users actually open it for:
a big central item picture plus the two rarity verdicts below it */
html body .modal-hero {
display: block !important;
text-align: center !important;
margin-top: 20px !important;
padding: 22px !important;
border: 0 !important;
border-radius: 20px !important;
background: rgba(0, 0, 0, 0.22) !important;
}
html body .modal-hero .modal-gem {
width: min(64vw, 300px) !important;
height: min(64vw, 300px) !important;
margin: 0 auto !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 22px !important;
background: transparent !important;
}
html body .modal-hero .modal-gem svg {
width: 46% !important;
height: 46% !important;
}
html body .modal-rarity-split {
max-width: 560px !important;
margin: 22px auto 0 !important;
}
/* part 154 - modal typography: big, heavy, crisp. solid offset shadows
(zero blur) instead of soft glows so every word stays razor sharp */
html body .item-modal .modal-title {
font-size: clamp(28px, 4.2vw, 40px) !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: 0.2px !important;
text-shadow:
0 2px 0 #07102254,
2px 0 0 #07101f,
0 3px 22px rgba(0, 0, 0, 0.55) !important;
}
html body .item-modal .modal-subtitle {
color: #a9bad1 !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
}
html body .item-modal .modal-eyebrow {
margin-bottom: 8px !important;
}
html body .item-modal .modal-eyebrow .badge {
font-weight: 800 !important;
letter-spacing: 0.4px !important;
box-shadow: 0 1px 0 #07101f !important;
}
html body .item-modal .modal-eyebrow .item-id {
color: #cbd8ea !important;
font-weight: 700 !important;
}
html body .item-modal .modal-rarity-col {
border-width: 1.5px !important;
}
html body .item-modal .modal-rarity-col .micro-label {
color: #9fb2cb !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
}
html body .item-modal .modal-rarity-col strong {
font-size: 22px !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: 0.3px !important;
text-shadow:
2px 0 0 #0a1226,
0 2px 0 #0a1226 !important;
}
html body .item-modal .modal-rarity-col .rarity-scale {
font-size: 14px !important;
font-weight: 800 !important;
color: #d9e3f2 !important;
}
/* part 155 - catalog card flips on hover: front stays the item as it is
today, back face carries the game rarity readout plus the two
add-to-side buttons. 3D turn, both faces backface-hidden, back faces
are inert and invisible until hover/focus-within so nothing steals
clicks or tab stops while face-down */
html body .item-card {
position: relative !important;
perspective: 1100px !important;
}
html body .item-card .item-card-main {
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
transform-origin: center !important;
transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.24, 1) !important;
}
html body .item-card-back {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
text-align: center !important;
border-radius: inherit !important;
background: rgba(9, 16, 34, 0.94) !important;
border: 1px solid var(--rarity-line, rgba(255, 255, 255, 0.14)) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
transform: rotateY(180deg) !important;
visibility: hidden !important;
pointer-events: none !important;
padding: 16px 14px !important;
}
html body .item-card-back .micro-label {
color: #9fb2cb !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
font-size: 11px !important;
}
html body .item-card-back .back-rarity {
font-size: 20px !important;
font-weight: 900 !important;
color: #ffffff !important;
text-shadow: 2px 0 0 #0a1226, 0 2px 0 #0a1226 !important;
}
html body .item-card-back .back-scale {
font-size: 13px !important;
font-weight: 800 !important;
color: #d9e3f2 !important;
}
html body .item-card-back .back-community {
margin-top: 2px !important;
font-size: 11.5px !important;
}
html body .item-card-back .item-card-actions {
width: 100% !important;
margin-top: 10px !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
html body .item-card:hover .item-card-main,
html body .item-card:focus-within .item-card-main {
transform: rotateY(180deg) !important;
pointer-events: none !important;
}
html body .item-card:hover .item-card-back,
html body .item-card:focus-within .item-card-back {
transform: rotateY(0deg) !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* part 156 - catalog cards adopt the OlympicAngel card recipe, tuned to
our gold/night palette: glass surface with backdrop blur, gold
hairline border that brightens on hover, lift + deep soft shadow,
the item art does the little rotate+scale kick, and every motion
uses their exact easing (0.25s cubic-bezier(0.16,1,0.3,1)). The
flip from part 155 stays - it just gets the same timing curve. */
html body .item-card {
background: rgba(255, 255, 255, 0.035) !important;
-webkit-backdrop-filter: blur(18px) !important;
backdrop-filter: blur(18px) !important;
border: 1px solid rgba(240, 184, 58, 0.22) !important;
border-radius: 22px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
transition:
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
border-color: rgba(240, 184, 58, 0.5) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
html body .card-in,
html body .item-card {
animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
html body .item-card .item-media {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card:hover .item-media {
transform: rotate(-6deg) scale(1.08) !important;
}
html body .item-card .item-card-main {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card .item-card-back {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card-actions button {
transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* part 157 - drop the two-faced flip; the hover now mirrors the
recorded OlympicAngel motion exactly: lift + deep shadow + gold
border glow + inner warm glow + a diagonal shine sweep across the
face, plus the existing -6deg/1.08 art kick */
html body .item-card-back {
display: none !important;
}
html body .item-card:hover .item-card-main,
html body .item-card:focus-within .item-card-main {
transform: none !important;
pointer-events: auto !important;
}
html body .item-card {
overflow: hidden !important;
}
html body .item-card::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
border-radius: inherit !important;
pointer-events: none !important;
background: linear-gradient(105deg,
rgba(255, 255, 255, 0) 34%,
rgba(255, 214, 120, 0.10) 44%,
rgba(255, 255, 255, 0.28) 50%,
rgba(255, 214, 120, 0.10) 56%,
rgba(255, 255, 255, 0) 66%) !important;
transform: translateX(-130%) !important;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body .item-card:hover::after,
html body .item-card:focus-within::after {
transform: translateX(130%) !important;
}
html body .item-card:hover {
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.45),
inset 0 0 46px rgba(240, 184, 58, 0.06) !important;
}
/* part 158 - the two card action buttons: taller, felted dark surface
with a gold hairline, bright gold text with a firm solid shadow */
html body .item-card-actions {
border-top: 1px solid rgba(240, 184, 58, 0.20) !important;
background: rgba(9, 16, 34, 0.72) !important;
}
html body .item-card-actions button {
padding: 16px 8px !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
color: #f0b83a !important;
text-shadow: 1px 1px 0 #0a1226 !important;
background: rgba(9, 16, 34, 0.72) !important;
}
html body .item-card-actions button + button {
border-inline-start: 1px solid rgba(240, 184, 58, 0.20) !important;
}
html body .item-card-actions button:hover {
background: rgba(240, 184, 58, 0.14) !important;
color: #ffd98a !important;
}
/* part 159 - remove the white separator line under the card artwork
(it was a border-bottom on .item-media) and enlarge the two marked
elements: the rarity badge and the item name */
html body .item-card .item-media {
border-bottom: 0 !important;
}
html body .item-card .item-topline .badge {
font-size: 12.5px !important;
padding: 5px 12px !important;
min-height: 24px !important;
line-height: 1.2 !important;
}
html body .item-card .item-name {
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
color: #ffffff !important;
text-shadow: 1px 1px 0 rgba(10, 18, 38, 0.9) !important;
}
/* part 160 - kill the tone boundary (the media zone carries its own
darker gradient which reads as a separator line), flatten the whole
card to one uniform surface, and scale up every bit of card text
and the action row so no one has to zoom the screen */
html body .item-card .item-media {
background: transparent !important;
padding: 26px 26px 30px !important;
}
html body .item-card .item-card-main {
background: transparent !important;
padding: 14px 18px 18px !important;
}
html body .item-card .item-topline .badge {
font-size: 14px !important;
padding: 7px 16px !important;
}
html body .item-card .item-id {
font-size: 12.5px !important;
font-weight: 700 !important;
color: #cfd9e6 !important;
}
html body .item-card .item-slot-label {
font-size: 14px !important;
font-weight: 700 !important;
color: #b9c8dd !important;
}
html body .item-card .item-name {
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
html body .item-card .item-sub {
font-size: 14px !important;
margin-top: 12px !important;
}
html body .item-card .item-flags {
font-size: 14px !important;
gap: 6px !important;
}
html body .item-card .community-chip {
font-size: 13.5px !important;
}
html body .item-card-actions button {
padding: 19px 10px !important;
font-size: 14px !important;
font-weight: 800 !important;
}
/* part 161 - trade board display restyled to the night glass language:
the verdict strip can never appear as an opaque light card anymore,
whatever state it reports (balanced / unbalanced / empty) */
html body #trade-board .verdict.verdict-inner,
html body #trade-board .verdict.verdict-inner.is-balanced,
html body #trade-board .verdict.verdict-inner.is-unbalanced,
html body #trade-board .verdict.verdict-inner.is-empty {
background: rgba(9, 16, 34, 0.78) !important;
border: 1px solid rgba(240, 184, 58, 0.22) !important;
border-radius: 18px !important;
-webkit-backdrop-filter: blur(18px) !important;
backdrop-filter: blur(18px) !important;
color: #eaf1fb !important;
}
html body #trade-board .verdict.verdict-inner strong {
color: #ffffff !important;
font-weight: 900 !important;
text-shadow: 1px 1px 0 rgba(6, 12, 26, 0.92) !important;
}
html body #trade-board .verdict.verdict-inner p {
color: #b9c8dd !important;
}
html body #trade-board .verdict.verdict-inner .verdict-icon {
color: #f0b83a !important;
}
html body #trade-board .verdict.verdict-inner.is-unbalanced {
border-color: rgba(214, 69, 69, 0.34) !important;
}
html body #trade-board .verdict.verdict-inner.is-unbalanced .verdict-icon {
color: #ff9496 !important;
}
/* part 162 - the showcase becomes the wooden task board: board.png is
the section's own scene, fixed/cover so every neighbour keeps One
continuous wall (the catalog's 140px rounded top corners take
matching patches of the same fixed image, so no notch and no seam
line is ever painted between them) */
html body #showcase {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.10) 0%, rgba(24, 14, 2, 0.34) 100%) !important;
background-color: transparent !important;
}
html body #showcase::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
background: url("images/board.png") !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
html body #showcase h2,
html body #showcase h3 {
color: #2f1c06 !important;
text-shadow: 1px 1px 0 rgba(255, 246, 224, 0.55) !important;
}
html body #showcase .section-lead {
color: #5a4020 !important;
}
html body #showcase .showcase-checker .showcase-card,
html body #showcase .showcase-checker .tp-visual {
background: rgba(255, 248, 225, 0.94) !important;
border: 1px solid #b9791f !important;
border-radius: 16px !important;
}
html body #showcase .showcase-checker .tp-name,
html body #showcase .showcase-checker .tp-labels,
html body #showcase .showcase-checker .tp-val em {
color: #3a2410 !important;
}
html body #showcase [data-open-trade] {
color: #3a2410 !important;
border-color: rgba(122, 84, 16, 0.55) !important;
background: rgba(255, 248, 225, 0.6) !important;
}
/* the catalog's rounded top corners: same fixed board continues there */
html body #catalog {
position: relative !important;
}
html body #catalog::before,
html body #catalog::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
width: 140px !important;
height: 140px !important;
z-index: -1 !important;
background: url("images/board.png") !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
margin: 0 !important;
transform: none !important;
}
html body #catalog::before {
inset-inline-start: 0 !important;
}
html body #catalog::after {
inset-inline-end: 0 !important;
}
/* part 163 - adopt the "Arsenet" background recipe: the section owns
its background, painted directly on the element (no hidden pseudos);
the wooden task board is layer 2 of #showcase's own background */
html body #showcase {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.10) 0%, rgba(24, 14, 2, 0.38) 100%),
url("images/board.png") !important;
background-repeat: no-repeat, no-repeat !important;
background-size: cover, cover !important;
background-position: center, center !important;
background-attachment: scroll, fixed !important;
background-color: transparent !important;
}
html body #showcase::before {
display: none !important;
}
/* part 164 - the wooden board must scroll WITH the site, not stay
pinned to the viewport; and both top corner notches of #catalog must
keep the wood continuing (an old rule hid one of the two patches) */
html body #showcase {
background-attachment: scroll, scroll !important;
background-position: center, center !important;
}
html body section#catalog::before {
display: block !important;
}
html body #catalog::before,
html body #catalog::after {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center !important;
}
/* part 165 - board.png retired by review decision; the showcase now
uses the wooden-workshop language of the in-game shop screenshot:
warm plank-wood frame, a cream "paper board" stage for the content,
and colorful sticky-tile squares with a pin dot */
html body #showcase {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.05) 0%, rgba(24, 14, 2, 0.32) 100%),
repeating-linear-gradient(90deg, rgba(58, 36, 8, 0.16) 0 2px, rgba(255, 236, 190, 0.10) 2px 5px, rgba(0, 0, 0, 0) 5px 148px),
linear-gradient(180deg, #dcaf5e 0%, #c99340 52%, #a8742c 100%) !important;
background-attachment: scroll, scroll, scroll !important;
background-size: cover, auto, cover !important;
background-color: transparent !important;
}
html body #showcase::before { display: none !important; }
/* the cream paper stage - content sits on it, wood stays visible as frame */
html body #showcase .shell {
background:
linear-gradient(112deg, rgba(90, 60, 10, 0.06) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 58%),
linear-gradient(180deg, #fdf9ee 0%, #f6e9c9 100%) !important;
border-radius: 16px !important;
box-shadow: 0 14px 44px rgba(47, 28, 6, 0.35), inset 0 0 0 1px rgba(185, 121, 31, 0.35) !important;
padding: 26px 28px !important;
}
/* sticky tiles - rounded squares with the folded corner and pin dot */
html body #showcase .showcase-thumbs img {
border-radius: 16px 16px 16px 5px !important;
background: linear-gradient(180deg, #eef5fc 0%, #d3e4f2 100%) !important;
border: 0 !important;
box-shadow: 0 8px 18px rgba(47, 28, 6, 0.30), inset 0 0 0 1px rgba(58, 36, 8, 0.10) !important;
position: relative !important;
}
html body #showcase .showcase-thumbs img:nth-child(2) { background: linear-gradient(180deg, #f4e9fb 0%, #ddc7ef 100%) !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { background: linear-gradient(180deg, #fdf6c9 0%, #f4dd75 100%) !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { background: linear-gradient(180deg, #eaf7cd 0%, #cce893 100%) !important; }
html body #showcase .showcase-thumbs img:nth-child(5) { background: linear-gradient(180deg, #fdeaD2 0%, #f8c98c 100%) !important; }
html body #showcase .showcase-badge {
background: linear-gradient(135deg, #f9e79f 0%, #f2d565 100%) !important;
color: #5a4020 !important;
border-radius: 4px 14px 14px 14px !important;
box-shadow: 0 8px 18px rgba(47, 28, 6, 0.30), inset 0 0 0 1px rgba(58, 36, 8, 0.14) !important;
transform: rotate(-1.4deg) !important;
font-weight: 800 !important;
}
/* checker verdict strip reads as ink on the paper stage */
html body #showcase .showcase-checker .tp-verdict {
background: rgba(255, 250, 238, 0.9) !important;
color: #3a2410 !important;
}
html body #showcase .showcase-checker .tp-verdict strong { color: #2f1c06 !important; }
/* catalog top corner notches stop sampling the retired image and take
the wood tones instead, so no mismatched line appears there */
html body #catalog::before,
html body #catalog::after {
background-image:
linear-gradient(180deg, rgba(24, 14, 2, 0.18) 0%, rgba(24, 14, 2, 0.40) 100%),
linear-gradient(180deg, #c99340 0%, #a8742c 100%) !important;
background-attachment: scroll !important;
background-size: cover !important;
}
/* part 166/167 retired - the reference-site hero recipe actually belongs
to the showcase section; the hero keeps its original sky recipe */
/* part 168 - the showcase takes the reference-site recipe (from the
screenshot the user sent): deep naval gradient filling the band,
faint vertical grid lines, soft top glow, light ink, glass stage */
html body #showcase {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
radial-gradient(120% 85% at 50% 0%, rgba(74, 158, 255, 0.14) 0%, rgba(74, 158, 255, 0) 58%),
linear-gradient(180deg, #0e2138 0%, #0a1730 46%, #071026 100%) !important;
background-attachment: scroll, scroll, scroll !important;
background-size: cover, cover, cover !important;
background-position: center, center, center !important;
background-color: #08122a !important;
}
/* the former cream stage becomes a soft glass panel like their pill */
html body #showcase .shell {
background:
linear-gradient(112deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 60%) !important;
border-radius: 24px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 60px rgba(3, 8, 20, 0.5) !important;
padding: 30px 32px !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
/* light ink on the deep ground */
html body #showcase h2,
html body #showcase h3 {
color: #ffffff !important;
text-shadow: none !important;
}
html body #showcase .section-lead {
color: #c3d3e8 !important;
}
/* checker cards stay readable: night glass seen against the deep ground */
html body #showcase .showcase-checker .showcase-card,
html body #showcase .showcase-checker .tp-visual {
background: rgba(255, 248, 225, 0.94) !important;
border: 1px solid rgba(185, 121, 31, 0.5) !important;
}
html body #showcase .showcase-checker .tp-name,
html body #showcase .showcase-checker .tp-labels,
html body #showcase .showcase-checker .tp-val em {
color: #3a2410 !important;
}
html body #showcase .showcase-checker .tp-verdict {
background: rgba(255, 250, 238, 0.9) !important;
color: #3a2410 !important;
}
html body #showcase .showcase-checker .tp-verdict strong { color: #2f1c06 !important; }
/* primary action as the reference pill: gold fill, dark weight */
html body #showcase .hero-stats,
html body #showcase [data-open-trade] {
border-radius: 999px !important;
}
html body #showcase [data-open-trade] {
background: #f0b83a !important;
color: #241300 !important;
border: 0 !important;
font-weight: 800 !important;
box-shadow: 0 10px 26px rgba(240, 184, 58, 0.22) !important;
}
/* catalog corner notches return to the night ground so no warm seam */
html body #catalog::before,
html body #catalog::after {
background-image:
linear-gradient(180deg, rgba(4, 6, 14, 0) 55%, rgba(4, 6, 14, 0.32) 100%),
radial-gradient(140% 110% at 60% 40%, rgba(98, 78, 214, 0.10) 0%, rgba(98, 78, 214, 0) 62%) !important;
background-attachment: scroll !important;
background-size: cover !important;
}
/* part 169 - behind the blue quote card's rounded corners there must be
no color of the catalog's own: its gradient layer is removed, and the
two top corner notches continue the showcase recipe above instead */
html body #catalog {
background-image: none !important;
background-color: transparent !important;
}
html body #catalog::before,
html body #catalog::after {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0d1f36 0%, #071026 100%) !important;
background-attachment: scroll !important;
background-size: cover !important;
background-position: center !important;
}
/* part 170 - the corner patches of the catalog were still 96x96 from an
older part, leaving a ring of the body artwork visible inside the
140px rounded notch; they now cover the full notch square */
html body #catalog::before,
html body #catalog::after {
width: 140px !important;
height: 140px !important;
top: 0 !important;
border: 0 !important;
margin: 0 !important;
transform: none !important;
}
/* part 171 - every seam corner the reviewer circled showed leftover body
artwork behind rounded corners; the seams now butt flat: sky ends
straight on the showcase, the blue quote starts straight under it,
and the old corner patches are not needed anymore */
html body .sky-canvas {
border-radius: 28px 28px 0 0 !important;
}
html body #catalog .blue-quote {
border-radius: 0 0 0 0 !important;
}
html body #catalog {
border-radius: 0 !important;
}
html body #catalog::before,
html body #catalog::after {
display: none !important;
}
html body .band-tint:has(.blue-quote)::before,
html body .band-tint:has(.blue-quote)::after {
content: none !important;
}
/* part 172 - final kill of the catalog corner pseudos */
html body section#catalog::before,
html body section#catalog::after,
html body #catalog::before,
html body #catalog::after {
content: none !important;
display: none !important;
background: none !important;
width: 0 !important;
height: 0 !important;
}
/* part 173 - reviewer rule: keep the beautiful rounding, and let the
NEXT section's own background flow up and fill the notches behind it
1) the sky band keeps all four 28px corners; its frame paints the
showcase's naval grid recipe, exposed only in the bottom slivers
2) the blue quote keeps its 96px top shoulders; the catalog itself
carries the same showcase recipe so the slivers continue it */
html body .sky-canvas {
border-radius: 28px !important;
}
html body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 46%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-color: #08122a !important;
}
html body #catalog .blue-quote {
border-radius: 96px 96px 0 0 !important;
}
html body #catalog {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0a1730 0%, #08122a 55%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-position: center, center !important;
border-radius: 0 !important;
}
/* part 174 - the naval continuation must beat the [data-theme] selector
that blanked the sky frame; same-shape selectors, later in the file */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 46%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-color: #08122a !important;
}
/* part 175 - the shoulders region must be tonally continuous: the
catalog opens with the exact tone the showcase closes with, holds it
through the 96px shoulder zone, then deepens gently */
html body #catalog {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #071026 0%, #071026 170px, #0a1a33 52%, #0a1730 70%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-position: center, center !important;
}
/* part 176 - the sky-showcase seam, same reviewer mechanics: the
sky keeps all four rounded corners, and the frame behind the bottom
slivers closes with the exact tone the showcase opens with
(#0e2138), so no tone jump and no seam line at the curves */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0a1730 0%, #0e2138 38%, #0e2138 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-color: #0e2138 !important;
}
/* part 177 - one ground for the whole page: the naval grid recipe
becomes the body ground itself, ill every section now floats on the
same deep grid - no more per-section patches anywhere */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 28%, #071026 100%) !important;
background-attachment: scroll, scroll !important;
background-size: cover, cover !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
background-color: #071026 !important;
}
/* retire every section-owned backdrop from the patch era */
html body #showcase,
html body #catalog,
html body #trade,
html body .band-tint,
html body .band-rails,
html body .band-plain {
background-image: none !important;
background-color: transparent !important;
}
/* the sky frame returns to fully transparent: the body ground shows
behind the sky window's rounded corners */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background: transparent !important;
padding: 0 !important;
}
/* part 178 - restored the original grid density: "cover" was scaling
the repeating pattern on the body ground; "auto" keeps the 141px
cadence exactly as the mid-section recipe used it */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-size: auto, auto !important;
background-repeat: repeat, no-repeat !important;
background-position: left top, center !important;
}
/* part 179 - full square grid: horizontal lines at the same 141px
cadence join the vertical ones, on the deep graded ground */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 141px),
linear-gradient(180deg, #0e2138 0%, #0a1730 28%, #071026 100%) !important;
background-size: auto, auto, auto !important;
background-repeat: repeat, repeat, no-repeat !important;
background-position: left top, left top, center !important;
}
/* part 180 - the showcase card goes quiet-luxury glass: no opaque
backdrops behind the small items, smooth type, subtly glowing pill */
html body #showcase .showcase-thumbs img {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)) !important;
}
/* the counter sticker becomes a soft glass chip */
html body #showcase .showcase-badge {
background: rgba(255, 255, 255, 0.06) !important;
color: #eaf1fb !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
transform: none !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
}
/* checker surfaces: cream sticky notes retire into dark glass */
html body #showcase .showcase-checker .showcase-card,
html body #showcase .showcase-checker .tp-visual {
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 18px !important;
box-shadow: none !important;
-webkit-backdrop-filter: blur(16px) !important;
backdrop-filter: blur(16px) !important;
}
html body #showcase .showcase-checker .tp-name,
html body #showcase .showcase-checker .tp-labels,
html body #showcase .showcase-checker .tp-val em {
color: #eaf1fb !important;
font-weight: 600 !important;
}
html body #showcase .showcase-checker .tp-verdict {
background: rgba(255, 255, 255, 0.035) !important;
color: #c9d7ea !important;
border-radius: 14px !important;
}
html body #showcase .showcase-checker .tp-verdict strong {
color: #f0b83a !important;
font-weight: 700 !important;
text-shadow: none !important;
}
/* the action pill: dark glass with a gentle gold aura */
html body #showcase [data-open-trade] {
background: rgba(255, 255, 255, 0.06) !important;
color: #f0b83a !important;
border: 1px solid rgba(240, 184, 58, 0.30) !important;
border-radius: 999px !important;
font-weight: 650 !important;
letter-spacing: 0.02em !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04),
0 8px 26px rgba(0, 0, 0, 0.30),
0 0 22px rgba(240, 184, 58, 0.10) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
/* part 181 - the nth-child sticky-note rules from the tile era still
outranked the general transparent rule; they are now overridden at
the same strength, so every item tile is fully transparent */
html body #showcase .showcase-thumbs img:nth-child(1),
html body #showcase .showcase-thumbs img:nth-child(2),
html body #showcase .showcase-thumbs img:nth-child(3),
html body #showcase .showcase-thumbs img:nth-child(4),
html body #showcase .showcase-thumbs img:nth-child(5) {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)) !important;
}
/* part 182 - depth-field concept: many items floating in a soft blur
behind, only the featured ones rise from them freely - no boxes,
no rectangles, the items sit directly on the grid ground */
html body #showcase .showcase-media.is-grid {
display: block !important;
position: relative !important;
height: 440px !important;
overflow: hidden !important;
background: radial-gradient(60% 55% at 62% 40%, rgba(74, 158, 255, 0.10) 0%, rgba(74, 158, 255, 0) 70%) !important;
border-radius: 24px !important;
}
/* blurred scatter layer */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
opacity: 0.5 !important;
filter: blur(5px) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 6% !important; top: 10% !important; width: 96px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 20% !important; top: 58% !important; width: 78px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 38% !important; top: 12% !important; width: 116px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 55% !important; top: 66% !important; width: 88px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 70% !important; top: 8% !important; width: 92px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 86% !important; top: 44% !important; width: 104px !important; }
/* featured items: free-floating, sharp, bigger */
html body #showcase .showcase-thumbs {
position: absolute !important;
inset: 0 !important;
display: block !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 26% !important; top: 30% !important; width: 200px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 52% !important; top: 14% !important; width: 148px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 48% !important; top: 52% !important; width: 142px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 72% !important; top: 40% !important; width: 178px !important; }
/* the badge floats above everything */
html body #showcase .showcase-badge {
position: absolute !important;
right: 4% !important;
bottom: 6% !important;
z-index: 3 !important;
}
/* part 183 - free space everywhere: the dark center box is gone, the
blur field spreads across the WHOLE section, and the copy/buttons
get the quiet-luxury voice */
html body #showcase {
position: relative !important;
}
/* the big dark box: retired */
html body #showcase .shell {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html body #showcase .showcase-media.is-grid {
position: static !important;
height: 440px !important;
overflow: visible !important;
background: none !important;
border-radius: 0 !important;
}
/* the blur field now belongs to the whole section */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
opacity: 0.45 !important;
filter: blur(5px) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 3% !important; top: 7% !important; width: 96px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 11% !important; top: 76% !important; width: 80px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 27% !important; top: 14% !important; width: 112px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 44% !important; top: 84% !important; width: 86px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 87% !important; top: 12% !important; width: 94px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 91% !important; top: 62% !important; width: 104px !important; }
/* featured items float on the items side, frame-free */
html body #showcase .showcase-thumbs {
position: absolute !important;
inset: 0 !important;
display: block !important;
z-index: 1 !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
height: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 63% !important; top: 16% !important; width: 200px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 84% !important; top: 34% !important; width: 150px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 59% !important; top: 48% !important; width: 142px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 76% !important; top: 66% !important; width: 172px !important; }
html body #showcase .showcase-badge {
position: absolute !important;
right: 5% !important;
bottom: auto !important;
top: 4% !important;
z-index: 3 !important;
}
/* quiet-luxury voice for the copy */
html body #showcase .showcase-copy h3 {
color: #ffffff !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-shadow: none !important;
}
html body #showcase .showcase-copy p {
color: #b9c8dd !important;
font-weight: 400 !important;
line-height: 1.65 !important;
}
/* the ghost link as a small glowing pill */
html body #showcase .showcase-copy .button-ghost {
background: rgba(255, 255, 255, 0.06) !important;
color: #f0b83a !important;
border: 1px solid rgba(240, 184, 58, 0.28) !important;
border-radius: 999px !important;
font-weight: 650 !important;
letter-spacing: 0.02em !important;
box-shadow: 0 0 20px rgba(240, 184, 58, 0.10) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
}
/* part 184 - composed stage instead of scattered chaos: the media
column is a frame-free stage (no box, just geometry), items are
arranged harmonically inside it and never touch the copy */
html body #showcase .showcase-media.is-grid {
position: relative !important;
height: 440px !important;
overflow: hidden !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* scatter layer, contained and balanced */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
opacity: 0.45 !important;
filter: blur(5px) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 4% !important; top: 5% !important; width: 88px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 15% !important; top: 64% !important; width: 76px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 36% !important; top: 8% !important; width: 108px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 53% !important; top: 72% !important; width: 82px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 74% !important; top: 6% !important; width: 90px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 84% !important; top: 60% !important; width: 98px !important; }
/* featured: a calm diagonal inside the stage */
html body #showcase .showcase-thumbs {
position: absolute !important;
inset: 0 !important;
display: block !important;
z-index: 1 !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
height: auto !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 20% !important; top: 24% !important; width: 186px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 52% !important; top: 13% !important; width: 136px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 46% !important; top: 54% !important; width: 134px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 71% !important; top: 40% !important; width: 164px !important; }
html body #showcase .showcase-badge {
position: absolute !important;
right: 6% !important;
top: 5% !important;
z-index: 3 !important;
}
/* last remaining box-ghosts: nothing behind any item image here */
html body #showcase .showcase-checker img,
html body #showcase .tp-visual img {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* part 185 - two floats poked past the right edge of the stage;
nudged inside so nothing is ever clipped */
html body #showcase .showcase-depth img:nth-child(6) { left: 70% !important; top: 60% !important; width: 96px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 60% !important; top: 40% !important; width: 156px !important; }
/* part 186 - reset to the familiar structure: the four items as one
tidy even cluster (like the original layout), no frame around it,
and the blurred items drift gently AROUND the cluster - small,
unhurried, never crammed into corners */
html body #showcase .showcase-media.is-grid {
position: relative !important;
height: 440px !important;
overflow: hidden !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* featured cluster: one even 2x2 body in the middle of the stage */
html body #showcase .showcase-thumbs {
position: absolute !important;
left: 50% !important; top: 50% !important;
width: 300px !important; height: 300px !important;
transform: translate(-50%, -50%) !important;
display: block !important;
z-index: 1 !important;
}
html body #showcase .showcase-thumbs img {
position: absolute !important;
width: 132px !important;
height: auto !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.45)) !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { left: 18px !important; top: 24px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 156px !important; top: 24px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 18px !important; top: 162px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 156px !important; top: 162px !important; }
/* gentle drift around the cluster */
html body #showcase .showcase-depth {
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
height: auto !important;
width: 72px !important;
opacity: 0.4 !important;
filter: blur(6px) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)) !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 36% !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 38% !important; top: 3% !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 73% !important; top: 6% !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 3% !important; top: 79% !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 72% !important; top: 82% !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 41% !important; top: 86% !important; }
/* part 187 - same-strength overrides: the older per-child positioning
and sizing rules finally give way to the tidy composition */
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 36% !important; width: 72px !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 38% !important; top: 3% !important; width: 78px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 72% !important; top: 6% !important; width: 70px !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 3% !important; top: 78% !important; width: 74px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 71% !important; top: 81% !important; width: 72px !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 40% !important; top: 85% !important; width: 76px !important; }
html body #showcase .showcase-thumbs img:nth-child(1) { left: 18px !important; top: 24px !important; width: 132px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { left: 156px !important; top: 24px !important; width: 132px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { left: 18px !important; top: 162px !important; width: 132px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { left: 156px !important; top: 162px !important; width: 132px !important; }
/* part 188 - the container: fully defined anchor, no right/bottom
residue from the old inset rule (which fought RTL) */
html body #showcase .showcase-thumbs {
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
width: 300px !important;
height: 300px !important;
transform: translate(-50%, -50%) !important;
}
/* part 189 - FINAL arrangement, by exact reviewer instruction: one tidy
block, like the original layout - the four items in an even static
2x2 grid inside the media column, no outer box, nothing floating
anywhere else on the section */
html body #showcase .showcase-depth {
display: none !important;
}
html body #showcase .showcase-thumbs {
position: static !important;
display: grid !important;
grid-template-columns: repeat(2, 150px) !important;
gap: 22px !important;
justify-content: center !important;
align-content: center !important;
width: auto !important;
height: auto !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 auto !important;
}
html body #showcase .showcase-thumbs img {
position: static !important;
width: 150px !important;
height: auto !important;
left: auto !important;
top: auto !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42)) !important;
}
/* part 190 - the correct build, one time, final:
(1) blurred item field wraps the WHOLE section, harmonious drift,
(2) the four featured items big and frame-free beside the copy,
(3) everything transparent on the grid ground */
html body #showcase .showcase-media.is-grid {
position: static !important;
height: auto !important;
min-height: 440px !important;
overflow: visible !important;
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* (1) the blur field, full-section scope */
html body #showcase .showcase-depth {
display: block !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #showcase .showcase-depth img {
position: absolute !important;
width: 80px !important;
height: auto !important;
opacity: 0.42 !important;
filter: blur(6px) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35)) !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { left: 3% !important; top: 12% !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: 96% !important; top: 24% !important; margin-left: -80px !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 4% !important; top: 56% !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 94% !important; top: 72% !important; margin-left: -80px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 30% !important; top: 88% !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 64% !important; top: 92% !important; }
/* (2) featured cluster: bigger, still frame-free, beside the copy */
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, 172px) !important;
gap: 26px !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { width: 172px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { width: 172px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { width: 172px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { width: 172px !important; }
/* part 191 - scatter tuning: item 1 slid under the copy band */
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 40% !important; }
/* part 192 - final decisive pass: the two floating placeholder blobs of
the live pair (tossed at the top, disconnected) are removed; the blur
field stays gentle and never pokes above the section */
html body #showcase .tp-card.is-live > img {
display: none !important;
}
html body #showcase .showcase-depth img:nth-child(1) { top: 42% !important; }
html body #showcase .showcase-depth img:nth-child(2) { top: 34% !important; left: 90% !important; margin-left: -78px !important; }
html body #showcase .showcase-depth img:nth-child(3) { top: 62% !important; }
html body #showcase .showcase-depth img:nth-child(4) { top: 74% !important; left: 88% !important; margin-left: -80px !important; }
/* part 193 - the blur field now owns the FULL section: items pinned to
the extreme edges and corners, arcing around the central cluster */
html body #showcase .showcase-depth img:nth-child(1) { left: 2% !important; top: 6% !important; }
html body #showcase .showcase-depth img:nth-child(2) { left: calc(98% - 78px) !important; top: 5% !important; margin-left: 0 !important; }
html body #showcase .showcase-depth img:nth-child(3) { left: 1.5% !important; top: 52% !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: 99% !important; top: 50% !important; margin-left: -80px !important; }
html body #showcase .showcase-depth img:nth-child(5) { left: 34% !important; top: 91% !important; }
html body #showcase .showcase-depth img:nth-child(6) { left: 63% !important; top: 92% !important; }
/* part 194 - the live rotating pair returns: those two items change
every few seconds and they are the life of the stage - visible at
full size in their top area */
html body #showcase .tp-card.is-live > img {
display: block !important;
}
/* part 195 - use the room: the stage panel was capped at 1060px, which
left wide empty bands on big screens; it now breathes to 1620px and
the composition spreads with it */
html body #showcase .shell {
max-width: 1620px !important;
width: 100% !important;
}
html body #showcase .showcase-block {
max-width: none !important;
}
/* the featured cluster grows with the wider stage */
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, 188px) !important;
gap: 30px !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { width: 188px !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { width: 188px !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { width: 188px !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { width: 188px !important; }
/* part 198 - size hierarchy for the blur field: a few items enlarged
for real depth variance, small ones stay small */
html body #showcase .showcase-depth img:nth-child(1) { width: 118px !important; }
html body #showcase .showcase-depth img:nth-child(2) { width: 76px !important; }
html body #showcase .showcase-depth img:nth-child(3) { width: 126px !important; }
html body #showcase .showcase-depth img:nth-child(4) { width: 106px !important; }
html body #showcase .showcase-depth img:nth-child(5) { width: 72px !important; }
html body #showcase .showcase-depth img:nth-child(6) { width: 78px !important; }
/* keep edges inside the section at the new sizes */
html body #showcase .showcase-depth img:nth-child(2) { left: calc(98% - 128px) !important; }
html body #showcase .showcase-depth img:nth-child(4) { left: calc(99% - 112px) !important; }
/* part 199 - full strength: the glass-pill rules carried [data-theme]
weight, so the outline voice matches that weight and wins, and the
enlarged blur item 3 steps away from the copy */
html body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 1px solid rgba(240, 184, 58, 0.55) !important;
color: #f0b83a !important;
letter-spacing: 0.14em !important;
}
html body #showcase .showcase-badge::before,
html[data-theme="dark"] body #showcase .showcase-badge::before {
display: none !important;
}
html body #showcase [data-open-trade],
html[data-theme="dark"] body #showcase [data-open-trade],
html body .showcase-copy [data-open-trade],
html[data-theme="dark"] body .showcase-copy [data-open-trade] {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
padding: 14px 30px !important;
}
html body #showcase .button-ghost,
html[data-theme="dark"] body #showcase .button-ghost {
background: none !important;
box-shadow: none !important;
border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
color: #e7eef6 !important;
}
html body #showcase .showcase-depth img:nth-child(3) { left: 44% !important; top: 4% !important; }
html body #showcase .showcase-depth img:nth-child(1) { top: 12% !important; }
/* part 200 - decisive override: exact same selectors as the glass
rules, appended later, so the outline voice wins for good */
html body #showcase [data-open-trade] {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
}
html body .showcase-checker [data-open-trade] {
background: none !important;
box-shadow: none !important;
}
/* part 202 - the real winner found in the CSSOM: the glass pill lives
at html body #showcase .showcase-copy .button-ghost - matched at
equal or higher strength, appended later, so the outline wins */
html body #showcase .showcase-copy .button-ghost {
background: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
font-weight: 700 !important;
padding: 14px 30px !important;
}
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
background: none !important;
box-shadow: none !important;
border: 2px solid rgba(240, 184, 58, 0.85) !important;
color: #f0b83a !important;
}
/* part 203 - the enlarged blur item 1 sits above the copy band */
html body #showcase .showcase-depth img:nth-child(1) { top: 4% !important; left: 3% !important; }
/* part 204 - a less rounded, dashed, differently-colored button voice:
tiny corner radius (6px), dashed hairline frame, cool mint-teal
instead of orange gold - applying to every circled action pill and
the badge, site-wide for consistency */
html body [data-open-trade],
html body .button-ghost,
html body .showcase-badge {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 2px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
html body .showcase-badge {
border-width: 1.5px !important;
}
html body [data-open-trade]:hover,
html body .button-ghost:hover {
border-color: rgba(110, 214, 196, 0.95) !important;
color: #a4ecdc !important;
}
/* part 205 - id-weight dashes: the mint dashed voice matched at the
same selectors that carry #showcase weight, so they finally win */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 2px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 1.5px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
/* the header copy-side CTA inside the copy column carries id weight too */
html body #showcase .showcase-copy [data-open-trade],
html[data-theme="light"] body #showcase .showcase-copy [data-open-trade] {
border-radius: 6px !important;
border: 2px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
/* part 206 - the header pill joins the same voice: small radius,
dashed mint frame, transparent body */
html body .main-nav a,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
background: none !important;
box-shadow: none !important;
border-radius: 6px !important;
border: 1.5px dashed rgba(110, 214, 196, 0.65) !important;
color: #6ed6c4 !important;
}
html body .main-nav a:hover {
border-color: rgba(110, 214, 196, 0.95) !important;
color: #a4ecdc !important;
}
/* part 207 - the badge relocates beside the cluster (right, between
rows), and the featured four grow up and tilt a little each in its
own direction - orderly grid gone, gentle scatter in */
html body #showcase .showcase-badge {
position: absolute !important;
right: 13% !important;
top: 30% !important;
left: auto !important;
margin: 0 !important;
z-index: 3 !important;
}
html body #showcase .showcase-thumbs {
grid-template-columns: repeat(2, 214px) !important;
gap: 20px 26px !important;
}
html body #showcase .showcase-thumbs img:nth-child(1) { width: 210px !important; transform: rotate(-9deg) translateY(10px) !important; }
html body #showcase .showcase-thumbs img:nth-child(2) { width: 216px !important; transform: rotate(7deg) translateY(-6px) !important; }
html body #showcase .showcase-thumbs img:nth-child(3) { width: 208px !important; transform: rotate(5deg) translateY(-10px) translateX(-6px) !important; }
html body #showcase .showcase-thumbs img:nth-child(4) { width: 214px !important; transform: rotate(-7deg) translateY(8px) translateX(4px) !important; }
/* part 208 - the "3,900+ items" badge: bigger, bolder text in a loud
orange, dashed frame tinted to match */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
color: #ff8a3d !important;
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
padding: 12px 22px !important;
border-color: rgba(255, 138, 61, 0.75) !important;
}
/* part 209 - the showcase copy joins the orange voice, heading and
description deliberately different from each other:
title = big bold loud orange, description = soft pale warm gray */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
color: #ff8a3d !important;
font-size: 34px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
border-bottom: 2px dashed rgba(255, 138, 61, 0.6) !important;
padding-bottom: 8px !important;
}
html body #showcase .showcase-copy p {
color: #c4b8ae !important;
font-weight: 400 !important;
font-size: 16px !important;
letter-spacing: 0 !important;
}
/* the catalog CTA echoes the badge: orange dashed outline */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
border: 2px dashed rgba(255, 138, 61, 0.75) !important;
color: #ff8a3d !important;
}
html body #showcase .showcase-copy .button-ghost:hover {
border-color: rgba(255, 138, 61, 1) !important;
color: #ffb380 !important;
}
/* part 210 - color re-choice: orange reads as warning, mint reads as
green; the new voice is a confident bright blue, and everything
gets one size step bigger */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
color: #4fa8ff !important;
border: 2px dashed rgba(79, 168, 255, 0.8) !important;
font-size: 27px !important;
font-weight: 800 !important;
padding: 14px 26px !important;
}
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
color: #4fa8ff !important;
font-size: 40px !important;
border-bottom: 2px dashed rgba(79, 168, 255, 0.6) !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost,
html body .main-nav a,
html[data-theme="dark"] body .main-nav a {
color: #4fa8ff !important;
border: 2px dashed rgba(79, 168, 255, 0.8) !important;
font-size: 17px !important;
padding: 14px 34px !important;
}
html body #showcase .showcase-copy .button-ghost:hover,
html body .main-nav a:hover {
border-color: rgba(122, 190, 255, 1) !important;
color: #8cc5ff !important;
}
/* other data-open-trade pills that keep the dashed voice */
html body #showcase [data-open-trade],
html body .showcase-checker [data-open-trade] {
color: #4fa8ff !important;
border: 2px dashed rgba(79, 168, 255, 0.8) !important;
border-radius: 6px !important;
background: none !important;
box-shadow: none !important;
}
/* part 211 - live query exchange in the showcase copy: rotating typed
questions like people asking the same search over and over */
html body #showcase .showcase-copy .live-queries {
min-height: 96px !important;
color: #c4b8ae !important;
font-size: 17px !important;
line-height: 1.7 !important;
}
html body #showcase .showcase-copy .live-queries .lq-name {
color: #4fa8ff !important;
font-weight: 700 !important;
margin-inline-end: 6px !important;
}
html body #showcase .showcase-copy .live-queries .lq-text {
color: #e8d9cf !important;
}
html body #showcase .showcase-copy .live-queries .lq-caret {
display: inline-block !important;
width: 2px !important;
height: 1em !important;
background: #4fa8ff !important;
margin-inline-start: 2px !important;
vertical-align: -3px !important;
animation: lqBlink 0.9s steps(1) infinite !important;
}
@keyframes lqBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* part 212 - editorial hero treatment of the copy block: the title
becomes a huge dimmed background layer, tilted, underline gone;
the query line and the button tilt a little and get rounder */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-size: 64px !important;
font-weight: 800 !important;
opacity: 0.38 !important;
transform: rotate(-2deg) !important;
border-bottom: 0 !important;
border: 0 !important;
padding-bottom: 0 !important;
line-height: 1.15 !important;
letter-spacing: 0.01em !important;
}
html body #showcase .showcase-copy .live-queries {
transform: rotate(-1.6deg) !important;
border-radius: 16px !important;
}
html body #showcase .showcase-copy .button-ghost {
transform: rotate(-1.2deg) !important;
border-radius: 16px !important;
}
/* part 213 - same-strength rounding for the CTA |
the [data-theme] variant rules were out-ranking the plain one */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
transform: rotate(-1.2deg) !important;
border-radius: 16px !important;
}
/* part 214 - one-line shorter title, even dimmer, and everything
leans the OTHER way with stronger rounding */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
opacity: 0.20 !important;
transform: rotate(2.6deg) !important;
white-space: nowrap !important;
font-size: 62px !important;
}
html body #showcase .showcase-copy .live-queries {
transform: rotate(1.7deg) !important;
border-radius: 22px !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
transform: rotate(1.3deg) !important;
border-radius: 22px !important;
}
/* part 215 - Tazeq wave hover, ported: every site button gets the two
rising rounded water layers on hover, swim included; the rest of
the button voice (dashed blue frame, radius) stays untouched */
html body [data-open-trade],
html body .showcase-copy .button-ghost,
html body .main-nav a {
position: relative !important;
overflow: hidden !important;
}
html body [data-open-trade] > *,
html body .showcase-copy .button-ghost > *,
html body .main-nav a > * {
position: relative !important;
z-index: 2 !important;
}
html body [data-open-trade]::before,
html body [data-open-trade]::after,
html body .showcase-copy .button-ghost::before,
html body .showcase-copy .button-ghost::after,
html body .main-nav a::before,
html body .main-nav a::after {
content: "" !important;
position: absolute !important;
left: -15% !important;
right: -15% !important;
bottom: -45% !important;
height: 75% !important;
background: rgba(79, 168, 255, 0.22) !important;
border-radius: 48% 52% 0 0 / 60% 60% 0 0 !important;
transform: translateY(105%) !important;
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
pointer-events: none !important;
z-index: 1 !important;
}
html body [data-open-trade]::after,
html body .showcase-copy .button-ghost::after,
html body .main-nav a::after {
background: rgba(79, 168, 255, 0.12) !important;
border-radius: 55% 45% 0 0 / 70% 70% 0 0 !important;
transition-delay: 0.07s !important;
}
html body [data-open-trade]:hover::before,
html body .showcase-copy .button-ghost:hover::before,
html body .main-nav a:hover::before {
transform: translateY(0) !important;
}
html body [data-open-trade]:hover::after,
html body .showcase-copy .button-ghost:hover::after,
html body .main-nav a:hover::after {
transform: translateY(0) !important;
animation: tazeqWaveSwim 2.4s ease-in-out infinite !important;
}
@keyframes tazeqWaveSwim {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(7px) translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
html body [data-open-trade]:hover::after,
html body .showcase-copy .button-ghost:hover::after,
html body .main-nav a:hover::after {
animation: none !important;
}
}
/* part 216 - three different button characters instead of one clone:
(1) ׳”׳—׳׳₪׳•׳× = pill, solid frame, airy caps
(2) 3,900+ badge = double frame, tight, stamp-like
(3) ׳¢׳‘׳¨׳• ׳׳§׳¡׳˜׳•׳ = squared solid 3px frame with an arrow tail */
html body #showcase .showcase-copy [data-open-trade],
html[data-theme="light"] body #showcase .showcase-copy [data-open-trade] {
border-radius: 999px !important;
border: 2px solid rgba(79, 168, 255, 0.9) !important;
border-style: solid !important;
letter-spacing: 0.12em !important;
padding: 13px 40px !important;
}
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge {
border-radius: 4px !important;
border: 2px double rgba(79, 168, 255, 0.9) !important;
letter-spacing: 0.03em !important;
font-size: 25px !important;
padding: 10px 24px !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
border-radius: 2px !important;
border: 3px solid rgba(79, 168, 255, 0.95) !important;
border-style: solid !important;
letter-spacing: 0.05em !important;
padding: 13px 26px 13px 20px !important;
}
/* the arrow tail only on the squared CTA */
html body #showcase .showcase-copy .button-ghost::after,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost::after {
content: none !important;
}
/* part 217 - the header \u05d4\u05d7\u05dc\u05e4\u05d5\u05ea pill: full round, solid frame,
wide-tracked caps - its own character, not the dashed clone */
html body .main-nav a,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
border-radius: 999px !important;
border: 2px solid rgba(79, 168, 255, 0.9) !important;
border-style: solid !important;
letter-spacing: 0.12em !important;
padding: 10px 28px !important;
color: #4fa8ff !important;
}
/* part 218 - bubble-arc title: rounded Hebrew letterforms (Varela
Round -> Rubik), inflated size, soft arch curve on the letters */
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 78px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
-webkit-text-stroke: 2px rgba(79, 168, 255, 0.35) !important;
transform: rotate(2.6deg) skewY(-2deg) !important;
border-radius: 40px !important;
}
/* part 219 - the copy block becomes the purple bubble he drew: whole
block tilted at that angle, huge round pill corners, big scale */
html body #showcase .showcase-copy {
transform: rotate(-7deg) !important;
border: 2px dashed rgba(79, 168, 255, 0.45) !important;
border-radius: 170px !important;
padding: 90px 110px !important;
background: none !important;
box-shadow: none !important;
}
html body #showcase .showcase-copy h3 {
font-size: 88px !important;
opacity: 0.28 !important;
}
html body #showcase .showcase-copy .live-queries {
font-size: 19px !important;
transform: none !important;
}
/* inner tilts cancel: the bubble carries the single angle now */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
transform: none !important;
margin-top: 18px !important;
}
/* part 220 - theme-variant strength for the bubble: the light/dark
armed rules from part 218 were out-ranking the plain copy rules */
html body #showcase .showcase-copy,
html[data-theme="light"] body #showcase .showcase-copy,
html[data-theme="dark"] body #showcase .showcase-copy {
border: 2px dashed rgba(79, 168, 255, 0.45) !important;
border-radius: 170px !important;
padding: 90px 110px !important;
transform: rotate(-7deg) !important;
}
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-size: 88px !important;
opacity: 0.28 !important;
}
/* part 221 - keep the bubble fully on-screen: tighter horizontal
padding, slightly smaller title, nudge the block off the left edge */
html body #showcase .showcase-copy,
html[data-theme="light"] body #showcase .showcase-copy,
html[data-theme="dark"] body #showcase .showcase-copy {
padding: 80px 88px !important;
margin-inline-start: 34px !important;
margin-inline-end: 20px !important;
}
html body #showcase .showcase-copy h3,
html[data-theme="light"] body #showcase .showcase-copy h3,
html[data-theme="dark"] body #showcase .showcase-copy h3 {
font-size: 80px !important;
text-align: center !important;
width: 100% !important;
}
/* part 222 - bubble scoped to the real copy block, sized so the
one-line bubble title always fits inside the rounded frame */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
width: 600px !important;
max-width: none !important;
margin-inline: auto !important;
padding: 66px 72px 60px !important;
box-sizing: border-box !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 74px !important;
width: max-content !important;
margin-inline: auto !important;
white-space: nowrap !important;
}
/* part 223 - fitting the arc inside the viewport: narrower bubble,
gentler tilt, title scaled to comfortably fit inside the rounding */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
width: 500px !important;
padding: 58px 54px 52px !important;
transform: rotate(-5deg) !important;
margin-inline: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 66px !important;
}
/* part 224 - shift the bubble rightward (inline-end margin in RTL) so
its tilted arc never crosses the viewport edge */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
margin-inline-end: 90px !important;
margin-inline-start: 0 !important;
}
/* part 225 - the bubble fills its column naturally: no fixed width,
compact padding and a title size that always fits inside */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
width: auto !important;
max-width: 470px !important;
margin-inline: 0 auto !important;
padding: 46px 40px 44px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 56px !important;
}
/* part 226 - correction: NO bubble frame around the block; the TEXT
itself is the bubble - rounded letterforms + arc on title and on the
description line, frame deleted */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
transform: none !important;
width: auto !important;
max-width: none !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 72px !important;
font-weight: 800 !important;
-webkit-text-stroke: 2.5px rgba(79, 168, 255, 0.4) !important;
letter-spacing: 0.05em !important;
transform: rotate(2.6deg) skewY(-2deg) !important;
opacity: 0.28 !important;
width: auto !important;
margin: 0 !important;
}
/* the description gets the same rounded voice, smaller and readable */
html body #showcase .showcase-copy .live-queries,
html[data-theme="light"] body #showcase .showcase-copy .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy .live-queries {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 21px !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
transform: rotate(-1.6deg) !important;
}
html body #showcase .showcase-copy .live-queries .lq-name {
-webkit-text-stroke: 1.5px rgba(79, 168, 255, 0.3) !important;
}
/* archive the old per-element tilts that are now superseded */
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost {
transform: none !important;
}
/* part 227 - final clean pass: every dashed frame and every box ghost
is deleted site-wide; buttons become quiet solid hairlines; the copy
voice is pure fluid typography - no balloon strokes, no wobble */
/* buttons: solid, thin, calm */
html body [data-open-trade],
html body .button-ghost,
html body .main-nav a,
html body .showcase-badge,
html[data-theme="light"] body [data-open-trade],
html[data-theme="light"] body .button-ghost,
html[data-theme="light"] body .main-nav a,
html[data-theme="light"] body .showcase-badge,
html[data-theme="dark"] body [data-open-trade],
html[data-theme="dark"] body .button-ghost,
html[data-theme="dark"] body .main-nav a,
html[data-theme="dark"] body .showcase-badge {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
border-style: solid !important;
background: none !important;
box-shadow: none !important;
color: #4fa8ff !important;
}
/* per-button character kept in shape only */
html body .main-nav a { border-radius: 999px !important; }
html body .showcase-badge { border-radius: 10px !important; }
html body #showcase .showcase-copy [data-open-trade] { border-radius: 14px !important; }
html body #showcase .showcase-copy .button-ghost { border-radius: 12px !important; }
/* copy: fluid luxury typography, no balloon stroke, no absurd tilt */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 72px !important;
font-weight: 800 !important;
-webkit-text-stroke: 0 !important;
letter-spacing: 0.02em !important;
transform: none !important;
opacity: 0.92 !important;
}
html body #showcase .showcase-copy .live-queries,
html[data-theme="light"] body #showcase .showcase-copy .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy .live-queries {
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 21px !important;
font-weight: 600 !important;
transform: none !important;
-webkit-text-stroke: 0 !important;
}
html body #showcase .showcase-copy .live-queries .lq-name {
-webkit-text-stroke: 0 !important;
}
/* part 228 - last stragglers: the double badge frame and the thick 3px
CTA frame from the character round are calmed to the solid hairline */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
border-style: solid !important;
color: #4fa8ff !important;
}
html body #showcase .showcase-copy .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy .button-ghost {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
border-style: solid !important;
color: #4fa8ff !important;
}
html[data-theme="light"] body #showcase .showcase-copy [data-open-trade],
html body #showcase .showcase-copy [data-open-trade] {
border: 1.5px solid rgba(79, 168, 255, 0.55) !important;
color: #4fa8ff !important;
}
/* part 229 - the giant dashed frame at the top was the SECOND legacy
copy block (the trade preview). Borders that only dashed rules ever
drew are deleted site-wide now, decisively */
/* 1) the trade-preview copy block: frame gone completely */
html body #showcase .showcase-copy,
html[data-theme="light"] body #showcase .showcase-copy,
html[data-theme="dark"] body #showcase .showcase-copy {
border: 0 !important;
border-style: none !important;
border-radius: 0 !important;
padding: 0 !important;
transform: none !important;
width: auto !important;
max-width: none !important;
margin-inline: 0 auto !important;
}
/* 3) the places whose dashed was their only visible border / box: box deleted */
html body .empty-state,
html body .trade-empty,
html body #trade-board .trade-empty,
html body .modal-disclaimer,
html body #consent-drawer .consent-brand {
border: 0 !important;
box-shadow: none !important;
}
/* part 230 - recovery: the global border-style sweep is deleted from the
cascade; the two dashed-origin rules that are still wanted (the solid
hairline button voice) are re-armed explicitly, and every border that
was white-by-default is dead */
html body [data-open-trade],
html body .button-ghost,
html body .main-nav a,
html body .showcase-badge,
html[data-theme="light"] body [data-open-trade],
html[data-theme="light"] body .button-ghost,
html[data-theme="light"] body .main-nav a,
html[data-theme="light"] body .showcase-badge,
html[data-theme="dark"] body [data-open-trade],
html[data-theme="dark"] body .button-ghost,
html[data-theme="dark"] body .main-nav a,
html[data-theme="dark"] body .showcase-badge {
border-style: solid !important;
border-color: rgba(79, 168, 255, 0.55) !important;
border-width: 1.5px !important;
}
/* part 231 - torn sticky-notes: the title and the live description sit
on cut paper stickers with a ragged torn top edge - like the pad in
the reference; no dashed lines, no white frames */
/* --- title note: warm yellow cut paper --- */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
display: inline-block !important;
background: #ffe98f !important;
color: #1d3a52 !important;
opacity: 1 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 56px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.01em !important;
padding: 44px 46px 40px !important;
margin: 30px auto 6px !important;
border: 0 !important;
border-radius: 2px 2px 10px 10px !important;
transform: rotate(-2.2deg) !important;
clip-path: polygon(0 14px, 4% 5px, 9% 15px, 14% 4px, 20% 12px, 26% 3px, 32% 13px, 38% 5px, 44% 15px, 50% 6px, 56% 14px, 62% 4px, 68% 13px, 74% 5px, 80% 15px, 86% 4px, 92% 12px, 97% 6px, 100% 14px, 100% 100%, 0 100%);
box-shadow: 0 16px 34px rgba(4, 16, 30, 0.45) !important;
white-space: nowrap !important;
}
/* --- description note: soft mint cut paper, slightly offset --- */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: inline-block !important;
background: #cdeef9 !important;
color: #14344a !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
padding: 30px 30px 26px !important;
margin: 10px auto 24px !important;
border: 0 !important;
border-radius: 2px 2px 10px 10px !important;
transform: rotate(1.8deg) !important;
clip-path: polygon(0 12px, 6% 3px, 13% 13px, 21% 4px, 29% 14px, 37% 5px, 45% 13px, 53% 4px, 61% 13px, 69% 4px, 77% 14px, 85% 5px, 93% 13px, 100% 5px, 100% 100%, 0 100%);
box-shadow: 0 12px 26px rgba(4, 16, 30, 0.35) !important;
min-height: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #075985 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #17415c !important;
}
/* the copy stack centers its two notes */
html body #showcase .showcase-copy:has(> .live-queries) {
text-align: center !important;
}
/* part 232 - WhatsApp chat bubbles: paper torn edges replaced with
clean rounded chat bubbles; each incoming message pops in like a
chat message landing */
/* --- title bubble: user-style bubble anchored to the right --- */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
display: inline-block !important;
background: #155e63 !important;
color: #ffffff !important;
opacity: 1 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 44px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
padding: 30px 44px !important;
margin: 22px auto 10px !important;
border: 0 !important;
border-radius: 26px 26px 6px 26px !important;
clip-path: none !important;
transform: none !important;
box-shadow: 0 10px 26px rgba(0, 8, 14, 0.5) !important;
white-space: nowrap !important;
animation: waPopIn 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) both !important;
}
/* --- live description bubble: incoming-style bubble, left-aligned --- */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: inline-block !important;
background: #123038 !important;
color: #eef7f9 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
padding: 22px 30px !important;
margin: 6px auto 26px !important;
border: 0 !important;
border-radius: 26px 26px 26px 6px !important;
clip-path: none !important;
transform: none !important;
box-shadow: 0 8px 22px rgba(0, 8, 14, 0.4) !important;
min-height: 0 !important;
animation: waPopIn 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) both !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #8fd4e8 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #ffffff !important;
}
@keyframes waPopIn {
0% { opacity: 0; transform: translateY(16px) scale(0.88); }
60% { opacity: 1; transform: translateY(-3px) scale(1.02); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* part 233 - the WhatsApp typing indicator: three bouncing dots in a
small bubble, shown while the next asker is composing */
html body #showcase .live-queries .lq-typing {
display: inline-flex !important;
gap: 5px !important;
align-items: center !important;
background: #0d242b !important;
border-radius: 18px 18px 18px 6px !important;
padding: 12px 16px !important;
margin: 6px auto 26px !important;
box-shadow: 0 8px 22px rgba(0, 8, 14, 0.4) !important;
}
html body #showcase .live-queries .lq-typing i {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #8fd4e8 !important;
display: inline-block !important;
animation: waDot 1.1s ease-in-out infinite !important;
}
html body #showcase .live-queries .lq-typing i:nth-child(2) { animation-delay: 0.18s !important; }
html body #showcase .live-queries .lq-typing i:nth-child(3) { animation-delay: 0.36s !important; }
@keyframes waDot {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-5px); opacity: 1; }
}
/* part 234 - WhatsApp animations are cancelled entirely; the bubbles
become fixed chat cards, and the title gets a deep 3D perspective
locked solidly in place */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
animation: none !important;
transform: perspective(900px) rotateX(34deg) skewX(-7deg) scale(1.04) !important;
transform-style: preserve-3d !important;
font-size: 50px !important;
text-shadow: 1px 1px 0 #0b3a3e, 2px 2px 0 #0b3a3e, 3px 3px 0 #0a2f33, 4px 4px 0 #092a2e, 5px 5px 0 #082528, 6px 6px 0 #072023, 8px 8px 18px rgba(0, 8, 14, 0.55) !important;
line-height: 1.5 !important;
padding: 34px 46px 44px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
animation: none !important;
transform: none !important;
}
/* the typing-dots indicator is retired */
html body #showcase .live-queries .lq-typing {
display: none !important;
}
/* part 235 - the last visible motion is the blinking caret inside the
bubble (lqBlink) - it is killed now; the title grows +20px to 70px,
drops every shadow, and sits to the side instead of centered */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-caret,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-caret,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-caret {
animation: none !important;
opacity: 0 !important;
display: none !important;
}
/* title: huge, shadowless, start-aligned (to the side) */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 70px !important;
text-shadow: none !important;
animation: none !important;
display: block !important;
white-space: nowrap !important;
margin: 26px 0 10px auto !important;
text-align: start !important;
transform: perspective(900px) rotateX(34deg) skewX(-7deg) scale(1.04) !important;
}
/* the copy stack sides with the title, not centered */
html body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries),
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) {
text-align: start !important;
align-items: flex-start !important;
}
/* part 236 - backgrounds of both bubbles are deleted; the title grows
huge and wears an aged, weathered look; the downward lean (rotateX
view from above) is cancelled so it stands facing the viewer */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
background: none !important;
box-shadow: none !important;
color: #d9cfb2 !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 96px !important;
font-weight: 800 !important;
letter-spacing: 0.03em !important;
line-height: 1.15 !important;
padding: 0 !important;
margin: 20px 0 12px auto !important;
border-radius: 0 !important;
transform: none !important;
opacity: 0.94 !important;
filter: none !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}
/* the live description: bubble bg gone, quiet aged ink */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
color: #b9ab8d !important;
font-size: 21px !important;
transform: none !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #cbb98a !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .lq-text {
color: #b9ab8d !important;
}
/* part 237 - the logo treatment: the title is redrawn like the Mikmak 2
game logo - chunky white crayon letters with a thick playful outline */
html body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
color: #ffffff !important;
font-family: "Varela Round", "Rubik", "Heebo", sans-serif !important;
font-size: 88px !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
-webkit-text-stroke: 0 !important;
text-shadow:
0 0 0 #2e5fa3,
3px 0 0 #2e5fa3, -3px 0 0 #2e5fa3, 0 3px 0 #2e5fa3, 0 -3px 0 #2e5fa3,
2px 2px 0 #2e5fa3, -2px 2px 0 #2e5fa3, 2px -2px 0 #2e5fa3, -2px -2px 0 #2e5fa3,
4px 4px 0 #2e5fa3, -4px 4px 0 #2e5fa3, 4px -4px 0 #2e5fa3, -4px -4px 0 #2e5fa3,
0 10px 24px rgba(0, 0, 0, 0.55) !important;
}
/* part 238 - the player chat restyle: each message sits in a wide flat
card like the Mikmak in-game chat log - pale paper, thin blue hairline,
rounded corners, timestamp on the far left, bold name on the right */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: block !important;
width: min(560px, 100%) !important;
margin: 14px 0 18px auto !important;
background: #fbfcff !important;
color: #3f5573 !important;
border: 1px solid #a9bfe8 !important;
border-radius: 14px !important;
padding: 18px 20px 20px !important;
box-shadow: 0 4px 14px rgba(4, 16, 30, 0.22) !important;
}
/* the message line becomes the card body */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
display: block !important;
}
/* bold navy name, right-aligned like the game log */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
display: block !important;
color: #1c2f4e !important;
font-weight: 800 !important;
font-size: 16px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #3f5573 !important;
font-size: 14.5px !important;
}
/* the timestamp rides the far left edge, faint like the game */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries::after {
content: "13:21 17/08/2026" !important;
position: absolute !important;
inset-inline-end: auto !important;
left: 18px !important;
top: 22px !important;
color: #8ea1c0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
position: relative !important;
}
/* the avatar placeholder chip on the far side, like the player icon */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-avatar {
display: none !important;
}
/* part 239 - the game-log detail: real time+date stamp per message,
a running number under it on the left, and the player avatar chip
beside the name on the right */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries::after,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries::after {
content: var(--lq-stamp, "13:21 17/08/2026") !important;
position: absolute !important;
left: 18px !important;
top: 20px !important;
color: #8ea1c0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries::before,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries::before {
content: var(--lq-num, "54") !important;
position: absolute !important;
left: 18px !important;
bottom: 18px !important;
color: #aab9d4 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* avatar chip rides the far right beside the name */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
font-size: 19px !important;
border-radius: 50% !important;
background: linear-gradient(160deg, #e8f1ff, #c8d8f5) !important;
border: 1px solid #a9bfe8 !important;
box-shadow: 0 2px 8px rgba(4, 16, 30, 0.25) !important;
position: absolute !important;
top: 14px !important;
right: 16px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-inline-end: 46px !important;
}
/* part 240 - the log chips are real DOM elements now (inline styles and
pseudo-content were unreliable): stamp top-left, number bottom-left,
avatar chip beside the name */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
position: absolute !important;
left: 18px !important;
top: 20px !important;
color: #8ea1c0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
position: absolute !important;
left: 18px !important;
bottom: 16px !important;
color: #aab9d4 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
/* part 241 - real Mikmak profile pictures replace the emoji chips */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center top !important;
background: #dfe9fb !important;
border: 2px solid #ffffff !important;
box-shadow: 0 2px 8px rgba(4, 16, 30, 0.35) !important;
font-size: 0 !important;
position: absolute !important;
top: 12px !important;
right: 14px !important;
}
/* part 242 - the chat card rebuilt to match the game log exactly:
full-width pale card, name + avatar on one top row at the right,
the message on its own line beneath, time top-left and count
bottom-left with real clearance so nothing collides */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
display: block !important;
width: 100% !important;
max-width: 620px !important;
box-sizing: border-box !important;
background: #f7f9fe !important;
border: 1.5px solid #9db4dd !important;
border-radius: 12px !important;
padding: 20px 74px 34px 108px !important;
margin: 18px 0 20px auto !important;
text-align: right !important;
min-height: 96px !important;
box-shadow: 0 6px 18px rgba(4, 16, 30, 0.28) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding: 0 !important;
text-align: right !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
display: block !important;
color: #16324f !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
display: block !important;
color: #41597a !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.55 !important;
margin-top: 9px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
left: 20px !important;
top: 22px !important;
color: #8ba0c0 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
left: 20px !important;
bottom: 16px !important;
color: #a7b7d3 !important;
font-size: 13px !important;
font-weight: 600 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
top: 14px !important;
right: 16px !important;
border: 2px solid #c9d8f0 !important;
}
/* part 243 - breathing room: the stamp column no longer touches the
message text (left gutter widened), name sits closer to its avatar */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
padding: 20px 72px 34px 126px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-inline-end: 0 !important;
}
/* part 244 - exact game-log geometry: time top-left, number bottom-left,
name + avatar top-right, and the message on a full-width line beneath
them (no cramped left gutter, no clipped words) */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
padding: 18px 74px 34px 20px !important;
min-height: 104px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
display: block !important;
text-align: right !important;
padding: 30px 0 0 0 !important;
min-height: 46px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
position: absolute !important;
top: 18px !important;
right: 74px !important;
margin: 0 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
display: inline !important;
margin: 0 !important;
white-space: normal !important;
overflow: visible !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
left: 20px !important;
top: 20px !important;
white-space: nowrap !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
left: 20px !important;
bottom: 15px !important;
}
/* part 245 - the name must sit beside its avatar, and the message line
begins exactly under the name row - reference spacing */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
right: 76px !important;
top: 20px !important;
max-width: calc(100% - 210px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-top: 34px !important;
}
/* part 246 - match the blog log proportions: the card grows wider than
the text column (extra room pulled from the quiet left side), so the
message has the same long, calm line as the game chat */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
width: calc(100% + 84px) !important;
margin: 18px -84px 20px auto !important;
max-width: none !important;
}
/* part 247 - the card rectangle melts into the page: its own fill is
gone (the dark background shows through), and the whole unit is
enlarged - wider card, bigger message, name and avatar */
html body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: none !important;
width: calc(100% + 116px) !important;
margin: 20px -116px 24px auto !important;
min-height: 138px !important;
padding: 20px 84px 38px 22px !important;
border: 1.5px solid rgba(122, 158, 216, 0.55) !important;
box-shadow: none !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-top: 40px !important;
min-height: 56px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
font-size: 20px !important;
right: 86px !important;
top: 22px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
font-size: 17.5px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
top: 14px !important;
right: 18px !important;
box-shadow: 0 3px 10px rgba(4, 16, 30, 0.45) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
font-size: 13px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
font-size: 14px !important;
}
/* part 248 - theme-proof avatar sizing (the dark theme rule outranks
the base selector) */
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
top: 14px !important;
right: 18px !important;
border: 2px solid rgba(200, 216, 240, 0.75) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
right: 86px !important;
}
/* part 249 - the active theme here is LIGHT: the avatar enlargement and
the dark-text contrast must win in the light theme too */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
top: 14px !important;
right: 18px !important;
border: 2px solid #c9d8f0 !important;
box-shadow: 0 3px 10px rgba(4, 16, 30, 0.3) !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: none !important;
width: calc(100% + 116px) !important;
min-height: 138px !important;
padding: 20px 84px 38px 22px !important;
border: 1.5px solid rgba(122, 158, 216, 0.55) !important;
box-shadow: none !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #16324f !important;
font-size: 20px !important;
right: 86px !important;
top: 22px !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #41597a !important;
font-size: 17.5px !important;
}
/* part 250 - frosted glass card: translucent plate with a real blur
behind it, sky-blue player names, orange stamps and counters */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: rgba(255, 255, 255, 0.07) !important;
backdrop-filter: blur(14px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
border: 1.5px solid rgba(160, 200, 255, 0.35) !important;
border-radius: 16px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 26px rgba(2, 10, 24, 0.35) !important;
}
/* names - sky blue */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #4fc3f7 !important;
text-shadow: 0 1px 6px rgba(79, 195, 247, 0.35) !important;
}
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
color: #4fc3f7 !important;
}
/* message stays soft white */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: rgba(233, 244, 255, 0.92) !important;
}
/* timestamps and the running number - orange */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
color: #ff9a3d !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
color: #ff9a3d !important;
}
/* part 251 - one composed section instead of scattered pieces:
the legacy "exchange" strip at the top is removed, the title, the
glass chat card and the CTA share one wide column with identical
edges, and the featured items rise to meet the text */
html body #showcase .showcase-pair,
html[data-theme="light"] body #showcase .showcase-pair,
html[data-theme="dark"] body #showcase .showcase-pair {
display: none !important;
}
/* one shared column width for title + card + CTA */
html body #showcase .showcase-copy:has(> .live-queries) h3 {
width: calc(100% + 116px) !important;
margin: 8px 0 6px auto !important;
}
/* CTA: pulled into the same row system, right under the card */
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
display: flex !important;
width: calc(100% + 116px) !important;
margin: 10px 0 0 auto !important;
justify-content: center !important;
align-items: center !important;
min-height: 54px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(12px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
border: 1.5px solid rgba(160, 200, 255, 0.4) !important;
border-radius: 14px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
/* the featured cluster rises so both columns start at the same line */
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin-top: -96px !important;
}
/* badge docks to the top edge of the featured cluster like a tab */
html body #showcase .showcase-badge,
html[data-theme="light"] body #showcase .showcase-badge,
html[data-theme="dark"] body #showcase .showcase-badge {
position: absolute !important;
margin: 0 !important;
}
/* part 252 - cohesion pass: identical 100% column for all three pieces
(no off-screen spill), media column top aligned with the copy, and
the gaps tightened so title - card - CTA read as one unit */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
width: 100% !important;
margin: 14px 0 0 auto !important;
}
html body #showcase .showcase-copy:has(> .live-queries) h3 {
width: 100% !important;
text-align: start !important;
margin: 4px 0 2px auto !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
width: 100% !important;
margin: 12px 0 0 auto !important;
justify-content: center !important;
}
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin-top: -20px !important;
}
/* part 253 - final union: the item cluster and the text block start on
the exact same line */
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin-top: 28px !important;
}
/* part 254 - the showcase earns its height: a composed, centered stage
instead of a thin band - deep top/bottom breathing room, the two
columns vertically centered, and ordered rhythm inside the text
column (title, card, CTA with even spacing) */
html body #showcase .showcase-block,
html[data-theme="light"] body #showcase .showcase-block,
html[data-theme="dark"] body #showcase .showcase-block {
min-height: 620px !important;
padding-block: 96px 120px !important;
align-items: center !important;
align-content: center !important;
column-gap: 56px !important;
}
/* even vertical rhythm inside the text column */
html body #showcase .showcase-copy:has(> .live-queries) h3 {
margin: 0 0 18px auto !important;
text-align: start !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
margin: 0 0 16px auto !important;
min-height: 148px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
margin: 0 0 0 auto !important;
min-height: 58px !important;
}
/* the featured cluster keeps its own quiet counterweight on the side */
html body #showcase .showcase-block > .showcase-media,
html[data-theme="light"] body #showcase .showcase-block > .showcase-media {
margin: 0 !important;
}
/* part 255 - professional pass over both circled clusters */
/* --- left cluster: calm editorial column --- */
/* title: tighter, a touch smaller, premium spacing */
html body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 64px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: 0.01em !important;
padding: 6px 4px 2px !important;
}
/* chat reads like a proper widget: meta row up top, message centered,
counter as a soft pill instead of a bare number */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(150, 190, 240, 0.28) !important;
min-height: 150px !important;
padding: 16px 84px 44px 20px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-name {
font-size: 18px !important;
top: 20px !important;
right: 88px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-av {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
top: 13px !important;
right: 16px !important;
border: 1px solid rgba(180, 210, 250, 0.45) !important;
box-shadow: 0 4px 12px rgba(2, 10, 24, 0.4) !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-line {
padding-top: 52px !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
font-size: 16.5px !important;
font-weight: 500 !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-stamp {
top: 20px !important;
left: 20px !important;
font-size: 12px !important;
letter-spacing: 0.04em !important;
}
html body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-num {
bottom: 12px !important;
left: 20px !important;
font-size: 11.5px !important;
padding: 3px 10px !important;
border-radius: 999px !important;
background: rgba(255, 154, 61, 0.12) !important;
color: #ffb266 !important;
border: 1px solid rgba(255, 154, 61, 0.28) !important;
}
/* CTA: confident filled action, not another glass sheet */
html body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .button-ghost {
background: linear-gradient(180deg, #3f8cff, #2563eb) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 0 !important;
border-radius: 13px !important;
color: #ffffff !important;
font-size: 19px !important;
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
/* --- right cluster: curated shelf instead of floating puddles --- */
html body #showcase .showcase-media.is-grid .showcase-thumbs,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 26px 30px !important;
justify-items: center !important;
align-items: center !important;
padding: 34px 30px 30px !important;
background: rgba(255, 255, 255, 0.035) !important;
backdrop-filter: blur(10px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
border: 1px solid rgba(150, 190, 240, 0.22) !important;
border-radius: 22px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
grid-auto-flow: row !important;
position: relative !important;
}
/* calm, deliberate tilts and a shared drop shadow */
html body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs > img {
width: min(190px, 100%) !important;
transform: none !important;
filter: drop-shadow(0 14px 22px rgba(2, 10, 24, 0.5)) !important;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs > img:nth-child(odd) {
transform: rotate(-3deg) !important;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs > img:nth-child(even) {
transform: rotate(2.6deg) !important;
}
/* the depth ghost layer is silent */
html body #showcase .showcase-media.is-grid .showcase-depth,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-depth {
display: none !important;
}
/* badge becomes a compact floating chip anchored to the panel */
html body #showcase .showcase-media.is-grid .showcase-badge,
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-badge {
right: auto !important;
top: -16px !important;
inset-inline-start: 24px !important;
font-size: 15px !important;
padding: 6px 14px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #3f8cff, #2563eb) !important;
border: 0 !important;
color: #ffffff !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.4) !important;
}
/* part 256 - theme-proof overrides: both light and dark variants carry
the professional sizing, and the title follows */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) h3 {
font-size: 64px !important;
line-height: 1.1 !important;
}
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html[data-theme="dark"] body #showcase .showcase-media.is-grid .showcase-thumbs > img {
width: min(196px, 100%) !important;
height: auto !important;
}
/* part 257 - stable shelf: fixed item size so the panel keeps its
proportions even before the lazy images decode */
html[data-theme="light"] body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html[data-theme="dark"] body #showcase .showcase-media.is-grid .showcase-thumbs > img,
html body #showcase .showcase-media.is-grid .showcase-thumbs > img {
width: 190px !important;
height: 190px !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
}
html body #showcase .showcase-media.is-grid .showcase-thumbs {
min-height: 420px !important;
}
/* part 258 - the user ground: pure black replaces the deep-navy wash,
and every section that painted the blue gradient follows it; the
faint white grid lines stay as structure */
html body {
background-color: #000000 !important;
}
html[data-theme="light"] body {
background-color: #000000 !important;
}
html[data-theme="dark"] body {
background-color: #000000 !important;
}
html body #showcase,
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, rgba(255, 255, 255, 0) 1px 141px) !important;
background-color: #000000 !important;
}
html body .shell,
html body #showcase .shell {
background: rgba(255, 255, 255, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* part 259 - correction: the user meant WHITE (#FFFFFF) ג€” the whole
ground goes white, and the grid lines flip to a soft dark hairline
so the structure stays visible on the light paper */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-color: #ffffff !important;
}
html body #showcase,
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
background-image:
repeating-linear-gradient(90deg, rgba(11, 22, 41, 0.08) 0 1px, rgba(11, 22, 41, 0) 1px 141px) !important;
background-color: #ffffff !important;
}
html body #showcase .shell,
html body .shell {
background: rgba(17, 34, 64, 0.04) !important;
box-shadow: inset 0 0 0 1px rgba(17, 34, 64, 0.14) !important;
}
/* the deep-navy inks that were tuned for the dark ground now flip to
dark ink on white */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3 {
color: #10203a !important;
text-shadow: 0 2px 8px rgba(20, 40, 80, 0.28) !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) h3 {
/* logo-like: white letters with a navy outline still read on white */
color: #ffffff !important;
text-shadow:
3px 0 0 #2e5fa3, -3px 0 0 #2e5fa3, 0 3px 0 #2e5fa3, 0 -3px 0 #2e5fa3,
2px 2px 0 #2e5fa3, -2px 2px 0 #2e5fa3, 2px -2px 0 #2e5fa3, -2px -2px 0 #2e5fa3,
4px 4px 0 #2e5fa3, -4px 4px 0 #2e5fa3, 4px -4px 0 #2e5fa3, -4px -4px 0 #2e5fa3,
0 10px 22px rgba(20, 40, 80, 0.35) !important;
}
/* part 260 - white-paper contrast: the chat ink and glass edges flip to
dark so nothing vanishes on the white ground */
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries,
html body #showcase .showcase-copy:has(> .live-queries) .live-queries {
background: rgba(20, 40, 80, 0.04) !important;
border: 1px solid rgba(17, 34, 64, 0.22) !important;
box-shadow: 0 8px 24px rgba(17, 34, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="light"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text,
html[data-theme="dark"] body #showcase .showcase-copy:has(> .live-queries) .live-queries .lq-text {
color: #2b4260 !important;
}
/* part 261 - the community-volunteers quote block is removed (markup too);
the catalog below goes black as the user wants, so its type flips to
light ink and its chrome to light hairlines */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog {
background-color: #000000 !important;
background-image: none !important;
}
html[data-theme="light"] body #catalog,
html body #catalog {
--line: rgba(255, 255, 255, 0.16);
--line-strong: rgba(255, 255, 255, 0.3);
color: #e8eefb !important;
}
html[data-theme="light"] body #catalog .shell,
html body #catalog .shell {
background: rgba(255, 255, 255, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="light"] body #catalog .catalog-display,
html[data-theme="dark"] body #catalog .catalog-display,
html body #catalog .catalog-display {
color: #ffffff !important;
}
html[data-theme="light"] body #catalog .catalog-kicker,
html[data-theme="dark"] body #catalog .catalog-kicker,
html body #catalog .catalog-kicker {
color: #7fb8ff !important;
}
html[data-theme="light"] body #catalog .section-lead,
html[data-theme="dark"] body #catalog .section-lead,
html body #catalog .section-lead {
color: #b9c8dd !important;
}
html[data-theme="light"] body #catalog .catalog-stat span,
html[data-theme="dark"] body #catalog .catalog-stat span,
html body #catalog .catalog-stat span {
color: #93a7c4 !important;
}
html[data-theme="light"] body #catalog .catalog-stat strong,
html[data-theme="dark"] body #catalog .catalog-stat strong,
html body #catalog .catalog-stat strong {
color: #ffffff !important;
}
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field,
html body #catalog .search-field {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #e8eefb !important;
}
html[data-theme="light"] body #catalog input::placeholder,
html body #catalog input::placeholder {
color: #7d92b3 !important;
}
html[data-theme="light"] body #catalog .filter-pill,
html[data-theme="dark"] body #catalog .filter-pill,
html body #catalog .filter-pill {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #dfe8f8 !important;
}
html[data-theme="light"] body #catalog .filter-pill.is-active,
html body #catalog .filter-pill.is-active {
background: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
}
/* part 262 - the black rounded catalog panel sits on a white page: the
section itself is cleared (white shows behind its corners), the black
becomes the rounded .shell plate, and everything under the catalog
joins the white ground */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog {
background-color: transparent !important;
background-image: none !important;
}
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-color: #000000 !important;
background-image: none !important;
border-radius: 96px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background-color: #ffffff !important;
background-image: none !important;
}
html body #trade .shell,
html[data-theme="light"] body #trade .shell,
html[data-theme="dark"] body #trade .shell {
background: rgba(17, 34, 64, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(17, 34, 64, 0.12) !important;
border-radius: 0 !important;
}
html body .site-rails,
html[data-theme="light"] body .site-rails,
html[data-theme="dark"] body .site-rails {
background-image: none !important;
background-color: transparent !important;
}
/* part 263 - the page-wide deep-navy sweep under sections is retired:
the white ground now rules the full page (the catalog black plate is
untouched), and the scrollbar becomes a short quiet glass pill */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image:
repeating-linear-gradient(90deg, rgba(17, 34, 64, 0.07) 0 1px, rgba(17, 34, 64, 0) 1px 141px),
linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
background-attachment: scroll, scroll !important;
background-size: auto, auto !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
background-color: #ffffff !important;
}
/* glass scrollbar: no track, a short translucent thumb that takes its
tone from whatever is behind it */
::-webkit-scrollbar {
width: 7px !important;
height: 7px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(90, 110, 140, 0.28) !important;
border-radius: 999px !important;
min-height: 42px !important;
-webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
backdrop-filter: blur(6px) saturate(1.1) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(90, 110, 140, 0.45) !important;
}
::-webkit-scrollbar-corner {
background: transparent !important;
}
html {
scrollbar-width: thin !important;
scrollbar-color: rgba(90, 110, 140, 0.28) transparent !important;
}
/* part 264 - big text pass matched to the reference Mikmod site:
the Assistant font, ink #111 body copy, navy #1a233a headings,
title-blue #3a7bd5 links, soft gray secondary text. The black
catalog plate keeps its own tuned inks (untouched). */
/* --- the font itself, theme-proof --- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
font-family: "Assistant", "Segoe UI", system-ui, -apple-system, Arial, sans-serif !important;
}
/* --- body copy: ink #111 on the white paper --- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
color: #111111 !important;
}
html body p:not(#catalog p):not(#showcase p),
html[data-theme="light"] body p:not(#catalog p):not(#showcase p) {
color: #3a3a3a !important;
}
/* showcase chat keeps its tuned message ink; other copy joins the pass */
html body #trade p,
html body #trade li,
html body .site-rails p,
html body footer p {
color: #3a3a3a !important;
}
/* --- headings: deep navy like the reference --- */
html body h1:not(#catalog h1):not(#showcase h1),
html body h2:not(#catalog h2):not(#showcase h2),
html body h3:not(#catalog h3),
html[data-theme="light"] body h2:not(#catalog h2),
html[data-theme="dark"] body h2:not(#catalog h2) {
color: #1a233a !important;
font-weight: 800 !important;
}
/* the reference hero title is title-blue #3a7bd5 */
html body .hero-band h1,
html body .hero-band h2,
html[data-theme="light"] body .hero-band h1,
html[data-theme="dark"] body .hero-band h1 {
color: #3a7bd5 !important;
}
/* --- links: title blue, like the reference footer --- */
html body a:not(#catalog a):not(#showcase a) {
color: #3a7bd5 !important;
}
/* --- small labels / kickers: ink, uppercase feel preserved by existing rules --- */
html body .section-head small,
html body footer .footer-copy,
html body footer .footer-disclaimer {
color: #7a7a7a !important;
}
/* --- selection tint like the reference --- */
::selection {
background: rgba(179, 142, 68, 0.25) !important;
}
/* part 265 - the hero headline takes the reference title-blue */
html body .hero-band h1,
html body .hero-band h2,
html body .hero-band h3,
html[data-theme="light"] body .hero-band h1,
html[data-theme="light"] body .hero-band h2,
html[data-theme="dark"] body .hero-band h1,
html[data-theme="dark"] body .hero-band h2 {
color: #3a7bd5 !important;
}
/* part 266 - same-shape higher-specificity fix: the .hero nested
headline also takes title-blue */
html body .hero-band .hero h1,
html body .hero-band .hero h2,
html body .hero-band .hero-copy h1,
html body .hero-band .hero-copy h2,
html[data-theme="light"] body .hero-band .hero h1,
html[data-theme="dark"] body .hero-band .hero h1 {
color: #3a7bd5 !important;
}
/* part 267 - specificity parity: the :not(#id) navy rules outrank plain
blue rules, so the blue rules carry the same :not guards */
html body .hero-band .hero h1:not(#catalog h1):not(#showcase h1),
html body .hero-band .hero h2:not(#catalog h2):not(#showcase h2),
html body .hero-band h1:not(#catalog h1):not(#showcase h1),
html[data-theme="light"] body .hero-band .hero h1:not(#catalog h1):not(#showcase h1),
html[data-theme="dark"] body .hero-band .hero h1:not(#catalog h1):not(#showcase h1) {
color: #3a7bd5 !important;
}
/* and the sibling headings (not hero, not catalog) go navy */
html body h2:not(#catalog h2):not(#showcase h2):not(.hero-band h2),
html body h3:not(#catalog h3):not(#showcase h3) {
color: #1a233a !important;
}
/* part 268 - the accent span inside the hero headline joins the blue */
html body .hero-band .hero h1 .accent-text:not(#catalog .accent-text),
html body .hero-band .hero h1 span.accent-text,
html[data-theme="light"] body .hero-band .hero h1 .accent-text,
html[data-theme="dark"] body .hero-band .hero h1 .accent-text {
color: #3a7bd5 !important;
}
/* part 269 - user pass: no more grid squares, header logo square off,
hero stats plain text, divider before footer off, consent tab readable */
/* --- the grid squares are removed everywhere --- */
html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
background-image: none !important;
}
html body #showcase,
html body .sky-frame,
html[data-theme="light"] body #showcase,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body #showcase,
html[data-theme="dark"] body .sky-frame {
background-image: none !important;
}
/* --- header: no logo square, the brand rests as text only --- */
html body .site-header .brand .brand-mark,
html body header .brand-mark {
display: none !important;
}
/* --- hero stats: the square background behind the numbers goes --- */
html body .hero-stats,
html body .hero-stats > div,
html body .hero-lead,
html[data-theme="light"] body .hero-stats,
html[data-theme="dark"] body .hero-stats {
background: none !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* --- the little side consent tab: the powered-by line sat absolutely
on top of the paragraph; now it flows below like normal text --- */
html body #consent-drawer .consent-brand {
position: static !important;
display: block !important;
margin: 12px 0 4px !important;
opacity: 0.75 !important;
}
html body #consent-drawer .consent-card {
padding-bottom: 18px !important;
}
html body #consent-drawer .consent-card p {
margin-bottom: 6px !important;
}
/* --- the divider between the last section and the footer goes --- */
html body .site-footer .footer-flare,
html body .site-footer .site-wave,
html body .site-footer .site-wave .wave-layer,
html body .site-footer .footer-flare i {
display: none !important;
}
html body .site-footer,
html body .site-footer .footer-bottom,
html[data-theme="light"] body .site-footer {
border-top: 0 !important;
background-image: none !important;
}
/* part 270 - corrections from the marked screenshot:
/* --- (X) the rounded panel behind the hero text is removed --- */
html body .hero-band .shell,
html body .hero-band .shell.hero,
html[data-theme="light"] body .hero-band .shell,
html[data-theme="dark"] body .hero-band .shell {
background: none !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* --- (top circle) nav pills become plain text: no pill background,
no border, no radius - only the words in their current blue --- */
html body .main-nav a,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
background: none !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #3a7bd5 !important;
padding: 2px 4px !important;
}
/* --- (side circle) the brand picture is back, but without the square
frame around it: image only, transparent, no border or fill --- */
html body .site-header .brand .brand-mark,
html body header .brand-mark {
display: block !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body .site-header .brand .brand-mark img {
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 40px !important;
height: 40px !important;
}
/* part 271 - the brand picture returns to its former size (the clamp
from the previous pass), and the nav links lose even the subtle
motion - plain text only */
html body .site-header .brand .brand-mark img,
html body header .brand-mark img {
width: clamp(92px, 10vw, 132px) !important;
height: auto !important;
object-fit: contain !important;
}
html body .main-nav a,
html body .main-nav a:hover,
html body .main-nav a:focus,
html body .main-nav a:active,
html[data-theme="light"] body .main-nav a,
html[data-theme="dark"] body .main-nav a {
transition: none !important;
animation: none !important;
transform: none !important;
}
/* part 272 - nav links: absolutely nothing happens on hover - no flash
background, no underline, no color shift. And a little air between
the words */
html body .main-nav a,
html body .main-nav a:hover,
html body .main-nav a:focus,
html body .main-nav a:active,
html body .main-nav a::before,
html body .main-nav a::after,
html[data-theme="light"] body .main-nav a,
html[data-theme="light"] body .main-nav a:hover,
html[data-theme="dark"] body .main-nav a,
html[data-theme="dark"] body .main-nav a:hover,
html body .site-header .main-nav a,
html body .site-header .main-nav a:hover {
background: none !important;
background-image: none !important;
box-shadow: none !important;
text-decoration: none !important;
color: #3a7bd5 !important;
transition: none !important;
animation: none !important;
}
html body .main-nav a::before,
html body .main-nav a::after,
html body .site-header .main-nav a::before,
html body .site-header .main-nav a::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
/* breathing room between the words */
html body .main-nav,
html[data-theme="light"] body .main-nav,
html[data-theme="dark"] body .main-nav {
gap: 26px !important;
}
/* part 273 - the nav row moves to the top-center of the header,
keeping its gaps */
html body .site-header .shell.header-inner,
html body .header-inner {
position: relative !important;
}
html body .site-header .main-nav,
html[data-theme="light"] body .site-header .main-nav,
html[data-theme="dark"] body .site-header .main-nav {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: 50% !important;
translate: 0 -50% !important;
margin: 0 !important;
align-self: auto !important;
}
/* part 274 - the seam between the browser mockup and the games column
becomes a straight line: the 16px radii that curved both inner edges
are squared off */
html body .win-main,
html body .win-sidebar,
html[data-theme="light"] body .win-main,
html[data-theme="light"] body .win-sidebar,
html[data-theme="dark"] body .win-main,
html[data-theme="dark"] body .win-sidebar {
border-radius: 0 !important;
}
html body .win-main .win-body,
html body .win-content {
border-radius: 0 !important;
}
/* part 275 - the separator lines at the tail of the site go away:
around the trade board, under the trade section, and above/inside
the footer */
html body #trade,
html body #trade .trade-board,
html body #trade .trade-column,
html body #trade .trade-column-head,
html body #trade .trade-summary,
html body .band-plain,
html body .site-rails,
html body .site-rails .band,
html[data-theme="light"] body #trade,
html[data-theme="light"] body .band-plain {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body .site-footer,
html body .site-footer .footer-cols,
html body .site-footer .footer-bottom,
html body .site-footer .footer-col {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* part 276 - footer band reaches the page edges, and the black strip
above the catalog title becomes blue */
html body .site-footer,
html[data-theme="light"] body .site-footer,
html[data-theme="dark"] body .site-footer {
background-color: rgba(17, 34, 64, 0.04) !important;
padding: 0 !important;
}
html body .site-footer .footer-cols,
html body .site-footer .footer-bottom {
background-color: transparent !important;
margin: 0 auto !important;
}
/* blue cap over the black catalog plate, above kicker */
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-image: linear-gradient(180deg, #2563eb 0px, #2563eb 158px, #000000 158px, #000000 100%) !important;
background-color: #000000 !important;
}
/* kicker stays visible on the blue */
html body #catalog .catalog-kicker {
color: #ffffff !important;
}
/* part 277 - the top corners of the black catalog plate get the same
clear rounding as the blue cap above the kicker: enforced late */
html body section#catalog .shell,
html[data-theme="light"] body section#catalog .shell,
html[data-theme="dark"] body section#catalog .shell,
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
border-radius: 140px 140px 96px 96px !important;
overflow: hidden !important;
}
/* nothing paints over the curve */
html body section#catalog,
html body #catalog {
border-radius: 140px 140px 96px 96px !important;
}
/* part 278 - the blue band becomes its own rounded card, and the black
catalog plate opens with its own rounded top corners beneath it */
html body .catalog-cap,
html[data-theme="light"] body .catalog-cap,
html[data-theme="dark"] body .catalog-cap {
height: 158px !important;
background: #2563eb !important;
border-radius: 140px 140px 0 0 !important;
}
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-image: none !important;
background-color: #000000 !important;
border-radius: 110px 110px 96px 96px !important;
padding-top: 46px !important;
margin-top: 0 !important;
}
html body #catalog .catalog-cap + .shell {
margin-top: 0 !important;
}
/* part 279 - the area behind the catalog plate (the white wedges around
its rounded corners) turns blue, matching the cap */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog {
background-color: #2563eb !important;
background-image: none !important;
}
/* part 280 - scrollbar redesign: ultra thin, invisible track, dark gray
capsule thumb */
::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
background: transparent !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(35, 43, 58, 0.62) !important;
border-radius: 999px !important;
min-height: 36px !important;
border: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
background: rgba(35, 43, 58, 0.86) !important;
}
html {
scrollbar-width: thin !important;
scrollbar-color: rgba(35, 43, 58, 0.62) transparent !important;
}
/* part 281 - scrollbar exactly per the user CSS snippet */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
::-webkit-scrollbar-corner {
background: transparent !important;
}
* {
scrollbar-width: thin !important;
scrollbar-color: #333333 transparent !important;
}
/* part 282 - keep the html color pair in sync with the thumb */
html {
scrollbar-color: #333333 transparent !important;
}
/* part 283 - block: hide the up/down arrow buttons of the scrollbar */
::-webkit-scrollbar-button {
display: none !important;
height: 0 !important;
width: 0 !important;
}
::-webkit-scrollbar {
width: 6px !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
/* part 284 - final scrollbar state: nothing but a bare dark capsule;
no track, no corner, no piece, no buttons, in every corner case */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
::-webkit-scrollbar-track {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-track-piece {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
::-webkit-scrollbar-thumb:hover:active {
background: #333333 !important;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment {
display: none !important;
height: 0 !important;
width: 0 !important;
background: transparent !important;
background-image: none !important;
}
::-webkit-scrollbar-corner {
background: transparent !important;
}
::-webkit-resizer {
background: transparent !important;
}
html {
scrollbar-width: thin !important;
scrollbar-color: #333333 transparent !important;
}
/* part 285 - critical fix: scrollbar-width/scrollbar-color (the Firefox
pair) make Chromium ignore ALL ::-webkit-scrollbar rules and fall back
to the native arrows scrollbar. Both go back to auto */
html,
* {
scrollbar-width: auto !important;
scrollbar-color: auto !important;
}
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: #333333 !important;
border-radius: 10px !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover {
background: #555555 !important;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment {
display: none !important;
height: 0 !important;
width: 0 !important;
background: transparent !important;
background-image: none !important;
}
::-webkit-resizer {
background: transparent !important;
}
/* part 286 - scrollbar: the reserved column paints nothing at all, and
the thumb itself becomes glass */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
::-webkit-scrollbar-thumb {
background: rgba(120, 140, 170, 0.35) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
backdrop-filter: blur(8px) saturate(1.2) !important;
border-radius: 999px !important;
border: 0 !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(120, 140, 170, 0.55) !important;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment {
display: none !important;
height: 0 !important;
width: 0 !important;
background: transparent !important;
background-image: none !important;
}
/* part 287 - content reclaims the reserved scrollbar strip: the body is
widened by exactly the scrollbar width (6px) and paints underneath the
transparent track; overflow-x guards against sideways drift */
html,
html body {
overflow-x: hidden !important;
}
html body {
width: calc(100% + 6px) !important;
}
/* part 288 - the direct page wrappers also paint under the scrollbar */
html body main,
html body main > section,
html body .site-footer,
html body .sky-frame,
html[data-theme="light"] body main {
width: calc(100% + 6px) !important;
}
/* part 289 - revert the per-section widening (it distorted the layout);
keep only the body-wide reclaim so the strip paints with the page */
html body main,
html body main > section,
html body .site-footer,
html body .sky-frame,
html[data-theme="light"] body main {
width: auto !important;
}
html body {
width: calc(100% + 6px) !important;
}
/* part 290 - RTL shift: the widened blocks sit 6px too far left; nudge
them back so their right edge reaches the window edge */
html body main,
html body #catalog,
html body .sky-frame,
html body .site-footer,
html body #showcase {
margin-left: 6px !important;
}
/* part 291 - correct RTL reclaim: pull each band's start edge (right, in
RTL) into the reserved scrollbar strip instead of widening */
html body,
html body main,
html body main > section,
html body .sky-frame,
html body .site-footer,
html body .site-rails {
width: auto !important;
margin-right: -6px !important;
}
html body .site-rails {
margin-right: 26px !important;
}
html body .site-rails.is-tail {
margin-right: 26px !important;
}
/* part 292 - cancel the earlier left-nudge; only the right pull counts */
html body main,
html body #catalog,
html body .sky-frame,
html body .site-footer,
html body #showcase,
html body main > section {
margin-left: 0 !important;
margin-right: -6px !important;
}
/* part 293 - native scrollbar goes to width zero: content spans the full
window; the glass thumb is drawn by app.v6.js instead */
::-webkit-scrollbar,
::-webkit-scrollbar:horizontal {
width: 0 !important;
height: 0 !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner,
::-webkit-resizer {
display: none !important;
}
/* part 294 - undo the margin tricks from the scrollbar-reserve era */
html body,
html body main,
html body main > section,
html body .sky-frame,
html body .site-footer,
html body .site-rails {
margin-right: 0 !important;
margin-left: 0 !important;
width: auto !important;
}
/* part 295 - the footer trade-check button loses the pill/wave voice:
plain text link like the rest of the footer, no border, no pseudo
waves, no animation */
html body .footer-col button[data-open-trade],
html[data-theme="light"] body .footer-col button[data-open-trade],
html[data-theme="dark"] body .footer-col button[data-open-trade] {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: inherit !important;
font: inherit !important;
cursor: pointer !important;
padding: 0 !important;
border-radius: 0 !important;
}
html body .footer-col button[data-open-trade],
html body .footer-col button[data-open-trade]:hover,
html body .footer-col button[data-open-trade]:active,
html body .footer-col button[data-open-trade]:focus {
animation: none !important;
transition: none !important;
}
html body .footer-col button[data-open-trade]::before,
html body .footer-col button[data-open-trade]::after,
html body .footer-col button[data-open-trade]:hover::before,
html body .footer-col button[data-open-trade]:hover::after {
content: none !important;
display: none !important;
animation: none !important;
}
html body .footer-col button[data-open-trade]:hover {
background: transparent !important;
}
html body .footer-col button[data-open-trade] > * {
transform: none !important;
}
/* part 296 - catalog area cleanup: remove the dividing line above the
footer band, delete the kicker line above the big heading, and shrink
the oversized display heading */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog,
html body #catalog::after,
html body #catalog .shell::after {
border-bottom: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
html body .catalog-body-sep,
html body .catalog-sep,
html body #catalog hr {
display: none !important;
}
html body .catalog-kicker,
html[data-theme="light"] body .catalog-kicker,
html[data-theme="dark"] body .catalog-kicker {
display: none !important;
}
html body .catalog-display,
html[data-theme="light"] body .catalog-display,
html[data-theme="dark"] body .catalog-display {
font-size: 40px !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
}
html body .catalog-display em,
html body .catalog-display br {
line-height: inherit !important;
}
/* part 297 - the hairline above the footer comes from the tail rails
pseudo element - remove it entirely and tighten the gap between the
trade band and the footer */
html body .site-rails.is-tail::after,
html[data-theme="light"] body .site-rails.is-tail::after,
html[data-theme="dark"] body .site-rails.is-tail::after {
border: 0 !important;
height: 0 !important;
content: none !important;
display: none !important;
}
html body .site-rails.is-tail::before {
border: 0 !important;
box-shadow: none !important;
}
html body #trade {
padding-bottom: 26px !important;
}
html body main {
padding-bottom: 0 !important;
}
/* part 298 - item cards become glass like the scroll thumb: translucent
blue tint, backdrop blur, no border, soft capsule radius */
html body .item-card,
html[data-theme="light"] body .item-card,
html[data-theme="dark"] body .item-card {
background: rgba(58, 123, 213, 0.16) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
backdrop-filter: blur(12px) saturate(1.6) !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 18px !important;
overflow: hidden !important;
}
html body .item-card:hover {
background: rgba(58, 123, 213, 0.26) !important;
}
html body .item-card .item-card-main {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* part 299 - per-rarity glass tint on item cards: same glass recipe,
different hue by rarity level */
html body .item-card[data-rarity="legendary"],
html[data-theme="light"] body .item-card[data-rarity="legendary"],
html[data-theme="dark"] body .item-card[data-rarity="legendary"] {
background: rgba(240, 184, 58, 0.20) !important;
}
html body .item-card[data-rarity="epic"],
html[data-theme="light"] body .item-card[data-rarity="epic"],
html[data-theme="dark"] body .item-card[data-rarity="epic"] {
background: rgba(147, 96, 240, 0.20) !important;
}
html body .item-card[data-rarity="rare"],
html[data-theme="light"] body .item-card[data-rarity="rare"],
html[data-theme="dark"] body .item-card[data-rarity="rare"] {
background: rgba(58, 123, 213, 0.24) !important;
}
html body .item-card[data-rarity="regular"],
html[data-theme="light"] body .item-card[data-rarity="regular"],
html[data-theme="dark"] body .item-card[data-rarity="regular"] {
background: rgba(120, 140, 170, 0.16) !important;
}
/* part 300 - card text pass: drop the crossed id number and the slot
line, enlarge the rounded badge pills, tint the item name by rarity
(tint opacity is low, so text takes the hue itself, brightened) */
html body .item-id,
html body .item-slot-label {
display: none !important;
}
html body .item-card .badge,
html body .item-card .badge.mono,
html[data-theme="light"] body .item-card .badge {
font-size: 16px !important;
padding: 11px 22px !important;
border-radius: 999px !important;
}
html body .item-card .item-name {
font-size: 22px !important;
font-weight: 700 !important;
color: rgb(232, 238, 251) !important;
}
html body .item-card[data-rarity="legendary"] .item-name {
color: #ffc757 !important;
}
html body .item-card[data-rarity="epic"] .item-name {
color: #c39af7 !important;
}
html body .item-card[data-rarity="rare"] .item-name {
color: #7fb2f7 !important;
}
html body .item-card[data-rarity="regular"] .item-name {
color: #b7c4d8 !important;
}
/* part 301 - every number inside the catalog section reads in orange:
filter pill counts, card prices, header stat numbers, kbd hint */
html body #catalog .mono,
html body #catalog .item-sub,
html body #catalog .catalog-stat strong,
html body #catalog kbd,
html[data-theme="light"] body #catalog .mono,
html[data-theme="light"] body #catalog .item-sub,
html[data-theme="light"] body #catalog .catalog-stat strong,
html[data-theme="dark"] body #catalog .mono,
html[data-theme="dark"] body #catalog .item-sub,
html[data-theme="dark"] body #catalog .catalog-stat strong {
color: #ff8a3d !important;
}
/* part 302 - effect on the header stat numbers: warm glow + slow shine
sweep across the digits */
html body #catalog .catalog-stat strong,
html[data-theme="light"] body #catalog .catalog-stat strong {
text-shadow: 0 0 14px rgba(255, 138, 61, 0.45), 0 1px 0 rgba(91, 44, 0, 0.5) !important;
animation: statGlow 3.2s ease-in-out infinite !important;
}
@keyframes statGlow {
0%, 100% { text-shadow: 0 0 10px rgba(255, 138, 61, 0.35), 0 1px 0 rgba(91, 44, 0, 0.5) !important; filter: brightness(1); }
50% { text-shadow: 0 0 22px rgba(255, 158, 91, 0.75), 0 1px 0 rgba(91, 44, 0, 0.5) !important; filter: brightness(1.12); }
}
/* part 303 - restore original colors that part 301 mistakenly touched:
numbers are orange ONLY inside the catalog header stats */
html body #catalog .mono,
html body #catalog .item-sub,
html body #catalog kbd,
html body #catalog .catalog-toolbar .mono,
html[data-theme="light"] body #catalog .mono,
html[data-theme="light"] body #catalog .item-sub,
html[data-theme="light"] body #catalog kbd,
html[data-theme="light"] body #catalog .catalog-toolbar .mono {
color: rgb(20, 52, 74) !important;
}
html body #catalog .item-sub {
color: rgb(232, 238, 251) !important;
}
html[data-theme="dark"] body #catalog .mono,
html[data-theme="dark"] body #catalog kbd {
color: rgb(232, 238, 251) !important;
}
html body #catalog .catalog-stat strong {
color: #ff8a3d !important;
}
/* part 304 - item price on the dark glass cards keeps its light text
across all theme variants */
html body #catalog .item-sub,
html[data-theme="light"] body #catalog .item-sub,
html[data-theme="dark"] body #catalog .item-sub {
color: rgb(232, 238, 251) !important;
}
/* part 305 - press feedback on item cards instead of opening a card */
html body .item-card-main,
html[data-theme="light"] body .item-card-main,
html[data-theme="dark"] body .item-card-main {
cursor: pointer !important;
transition: transform 0.16s ease, background-color 0.3s ease !important;
}
html body .item-card-main:active {
transform: scale(0.965) !important;
}
html body .item-card:has(.item-card-main:active) {
background: rgba(58, 123, 213, 0.34) !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset !important;
}
html body .item-card-main:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.4) !important;
outline-offset: -2px !important;
}
/* part 306 - retire the diagonal light sweep on item cards; instead a
calm hover: soft lift + gentle brighten of the glass */
html body .item-card::after,
html[data-theme="light"] body .item-card::after,
html[data-theme="dark"] body .item-card::after {
content: none !important;
display: none !important;
animation: none !important;
background: none !important;
}
html body .item-card:hover,
html[data-theme="light"] body .item-card:hover,
html[data-theme="dark"] body .item-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 30px rgba(10, 22, 40, 0.45) !important;
}
html body .item-card {
transition: transform 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease !important;
}
/* part 307 - remove the leftover golden hairline pseudo on item cards
(the "lines" artifact) */
html body .item-card::before,
html[data-theme="light"] body .item-card::before,
html[data-theme="dark"] body .item-card::before {
content: none !important;
display: none !important;
background: none !important;
}
/* part 308 - the catalog search field: calm glass pill like the thumb */
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field {
background: rgba(58, 123, 213, 0.14) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.5) !important;
backdrop-filter: blur(10px) saturate(1.5) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 0 18px !important;
height: 56px !important;
box-shadow: none !important;
transition: background-color 0.25s ease !important;
}
html body #catalog .search-field input {
color: rgb(232, 238, 251) !important;
font-size: 17px !important;
}
html body #catalog .search-field input::placeholder {
color: rgba(232, 238, 251, 0.55) !important;
}
html body #catalog .search-field .icon {
width: 20px !important;
height: 20px !important;
opacity: 0.8 !important;
}
html body #catalog .search-field:focus-within {
background: rgba(58, 123, 213, 0.24) !important;
}
html body #catalog .search-field .search-kbd {
background: rgba(255, 255, 255, 0.08) !important;
border: 0 !important;
border-radius: 6px !important;
color: rgb(232, 238, 251) !important;
}
/* part 309 - the catalog search becomes a reflective glass "ask bar":
tall glass box, placeholder in the open, chips row at the bottom, and
a round accent arrow on the far side */
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
background: linear-gradient(120deg, rgba(58, 123, 213, 0.22), rgba(58, 123, 213, 0.10) 60%) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
backdrop-filter: blur(12px) saturate(1.6) !important;
border: 0 !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
border-radius: 26px !important;
padding: 18px 20px 14px !important;
height: 118px !important;
}
html body #catalog .search-field input {
flex: 1 !important;
height: auto !important;
color: rgb(232, 238, 251) !important;
font-size: 20px !important;
background: transparent !important;
border: 0 !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: right !important;
}
html body #catalog .search-field input::placeholder {
color: rgba(232, 238, 251, 0.65) !important;
}
html body #catalog .search-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
html body #catalog .search-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.10) !important;
color: rgb(232, 238, 251) !important;
}
html body #catalog .search-chip .icon {
width: 19px !important;
height: 19px !important;
}
html body #catalog .search-kbd {
background: rgba(255, 255, 255, 0.10) !important;
border: 0 !important;
border-radius: 999px !important;
color: rgb(232, 238, 251) !important;
padding: 8px 12px !important;
}
html body #catalog .search-go {
margin-inline-start: auto !important;
width: 46px !important;
height: 46px !important;
border-radius: 999px !important;
border: 0 !important;
background: #4cd964 !important;
color: #0b2a12 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: transform 0.2s ease, background-color 0.2s ease !important;
}
html body #catalog .search-go svg {
width: 20px !important;
height: 20px !important;
}
html body #catalog .search-go:active {
transform: scale(0.94) !important;
}
html body #catalog .search-field:focus-within {
background: linear-gradient(120deg, rgba(58, 123, 213, 0.32), rgba(58, 123, 213, 0.16)) !important;
}
/* part 310 - item-card hover cleanup: the base theme glow shadows and
gold hairline variants are gone; only the calm lift stays */
html body .item-card:hover,
html[data-theme="light"] body .item-card:hover,
html[data-theme="dark"] body .item-card:hover {
transform: translateY(-4px) !important;
border-color: transparent !important;
box-shadow: 0 14px 30px rgba(10, 22, 40, 0.45) !important;
}
html body .item-card:focus-within {
transform: translateY(-4px) !important;
border-color: transparent !important;
box-shadow: 0 14px 30px rgba(10, 22, 40, 0.45) !important;
}
/* part 311 - the ask-bar alignment: input text and placeholder sit on the
start edge (right in RTL), the chips row hugs the same edge, the arrow
button sits at the far end */
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field {
text-align: start !important;
align-items: stretch !important;
}
html body #catalog .search-field input {
text-align: start !important;
direction: rtl !important;
display: block !important;
width: 100% !important;
}
html body #catalog .search-row {
justify-content: flex-start !important;
}
html body #catalog .search-go {
order: 99 !important;
margin-inline-start: auto !important;
}
/* part 312 - diagnostic: every hover/press/entry animation on item cards
is fully removed; cards are completely static */
html body .item-card,
html[data-theme="light"] body .item-card,
html[data-theme="dark"] body .item-card {
animation: none !important;
transition: none !important;
transform: none !important;
box-shadow: none !important;
}
html body .item-card *,
html body .item-card::before,
html body .item-card::after {
animation: none !important;
transition: none !important;
}
html body .item-card:hover,
html body .item-card:focus-within,
html body .item-card:active,
html[data-theme="light"] body .item-card:hover {
transform: none !important;
box-shadow: none !important;
}
html body .item-card[data-rarity="legendary"] {
background: rgba(240, 184, 58, 0.20) !important;
}
html body .item-card[data-rarity="epic"] {
background: rgba(147, 96, 240, 0.20) !important;
}
html body .item-card[data-rarity="rare"] {
background: rgba(58, 123, 213, 0.24) !important;
}
html body .item-card[data-rarity="regular"] {
background: rgba(120, 140, 170, 0.16) !important;
}
html body .item-card:hover .item-media,
html body .item-card:hover .item-img {
transform: none !important;
opacity: 1 !important;
}
/* part 313 - hover paints nothing: kill the legacy hover-tint rules;
card keeps exactly the same static rarity glass on hover */
html body .item-card:hover,
html body .item-card:focus-within,
html body .item-card:active,
html[data-theme="light"] body .item-card:hover,
html[data-theme="dark"] body .item-card:hover {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
border-color: transparent !important;
}
html body .item-card:hover[data-rarity="legendary"],
html body .item-card:focus-within[data-rarity="legendary"] {
background: rgba(240, 184, 58, 0.20) !important;
}
html body .item-card:hover[data-rarity="epic"],
html body .item-card:focus-within[data-rarity="epic"] {
background: rgba(147, 96, 240, 0.20) !important;
}
html body .item-card:hover[data-rarity="rare"],
html body .item-card:focus-within[data-rarity="rare"] {
background: rgba(58, 123, 213, 0.24) !important;
}
html body .item-card:hover[data-rarity="regular"],
html body .item-card:focus-within[data-rarity="regular"] {
background: rgba(120, 140, 170, 0.16) !important;
}
/* part 314 - the gold sweep streak: every pseudo-element and every glow
source inside item cards is now display-gone, and the active-press
background flash is dead too; the card is fully invariant on hover */
html body .item-card::before,
html body .item-card::after,
html[data-theme="light"] body .item-card::before,
html[data-theme="light"] body .item-card::after,
html[data-theme="dark"] body .item-card::before,
html[data-theme="dark"] body .item-card::after {
content: none !important;
display: none !important;
background: none !important;
animation: none !important;
transition: none !important;
}
html body .item-card *::before,
html body .item-card *::after {
content: none !important;
display: none !important;
background: none !important;
animation: none !important;
transition: none !important;
}
html body .item-card:has(.item-card-main:active) {
background: transparent !important;
box-shadow: none !important;
}
html body .item-card-main,
html body .item-card-main:active {
transform: none !important;
transition: none !important;
}
html body .item-card,
html body .item-card-main {
border: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
}
html body .item-card:hover,
html body .item-card:focus-within,
html body .item-card:active,
html[data-theme="light"] body .item-card:hover,
html[data-theme="dark"] body .item-card:hover {
box-shadow: none !important;
background: transparent !important;
}
html body .item-card:hover[data-rarity="legendary"],
html body .item-card:focus-within[data-rarity="legendary"] {
background: rgba(240, 184, 58, 0.20) !important;
}
html body .item-card:hover[data-rarity="epic"],
html body .item-card:focus-within[data-rarity="epic"] {
background: rgba(147, 96, 240, 0.20) !important;
}
html body .item-card:hover[data-rarity="rare"],
html body .item-card:focus-within[data-rarity="rare"] {
background: rgba(58, 123, 213, 0.24) !important;
}
html body .item-card:hover[data-rarity="regular"],
html body .item-card:focus-within[data-rarity="regular"] {
background: rgba(120, 140, 170, 0.16) !important;
}
/* part 315 - the catalog section is frozen: no animation, no transition,
no glow shadows anywhere inside #catalog, in every theme, unconditionally */
html body #catalog,
html[data-theme="light"] body #catalog,
html[data-theme="dark"] body #catalog,
html body #catalog *,
html body #catalog *::before,
html body #catalog *::after {
animation: none !important;
transition: none !important;
}
html body #catalog *,
html body #catalog *::before,
html body #catalog *::after {
text-shadow: none !important;
filter: none !important;
}
html body #catalog .badge,
html body #catalog .stat,
html body #catalog strong {
box-shadow: none !important;
}
/* keep the breathing stat numbers' color but stop their animation (already
killed above); cards keep only their static rarity glass */
/* part 316 - equal-or-higher-spec kills for the leftovers: stat numbers
and the ask bar transitions */
html body .catalog-stats strong,
html[data-theme="light"] body .catalog-stats strong,
html[data-theme="dark"] body .catalog-stats strong,
html body #catalog .catalog-stats strong {
animation: none !important;
transition: none !important;
text-shadow: none !important;
}
html body #catalog .search-field,
html body #catalog .search-field:focus-within,
html body #catalog .search-go,
html body #catalog .search-chip,
html body #catalog .search-kbd,
html body #catalog .search-field input {
transition: none !important;
animation: none !important;
text-shadow: none !important;
filter: none !important;
}
/* part 317 - exact-specificity finals: stat numbers (class is
catalog-stat, singular) and the light/dark variants of the ask bar */
html body #catalog .catalog-stat strong,
html[data-theme="light"] body #catalog .catalog-stat strong,
html[data-theme="dark"] body #catalog .catalog-stat strong {
animation: none !important;
transition: none !important;
text-shadow: none !important;
filter: none !important;
}
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field,
html body #catalog .search-go,
html[data-theme="light"] body #catalog .search-go,
html[data-theme="dark"] body #catalog .search-go {
transition: none !important;
animation: none !important;
filter: none !important;
text-shadow: none !important;
}
/* part 318 - the catalog control deck: compact, centered, minimal.
labels hidden, everything shrinks into two short centered rows */
html body #catalog .catalog-cap,
html[data-theme="light"] body #catalog .catalog-cap {
max-width: 980px !important;
margin-inline: auto !important;
}
html body #catalog .filter-block {
display: flex !important;
justify-content: center !important;
margin: 10px 0 6px !important;
}
html body #catalog .filter-label {
display: none !important;
}
html body #catalog .filter-pills {
justify-content: center !important;
gap: 8px !important;
}
html body #catalog .filter-pill {
padding: 7px 14px !important;
font-size: 13px !important;
border-radius: 999px !important;
min-height: 0 !important;
}
html body #catalog .filter-pill .mono {
font-size: 11px !important;
opacity: .7 !important;
}
html body #catalog .select-row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 4px 0 8px !important;
}
html body #catalog .select-field {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
html body #catalog .select-field > span {
display: none !important;
}
html body #catalog .select-field select {
height: 36px !important;
padding: 6px 14px !important;
font-size: 13px !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background: rgba(255, 255, 255, 0.05) !important;
color: rgb(232, 238, 251) !important;
}
html body #catalog .switch-field {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 13px !important;
margin: 0 !important;
}
html body #catalog .switch-field .switch-track {
transform: scale(0.85) !important;
}
html body #catalog #reset-filters {
font-size: 13px !important;
padding: 6px 14px !important;
border-radius: 999px !important;
}
/* part 319 - the "moving gold band" glitch: semi-transparent backdrop-filter
glass regions can mis-composite in Chrome/Windows showing displaced bands
over the grid; the cards go to a solid tinted glass (no live blur behind
them), which removes the failing compositing surface entirely */
html body .item-card,
html[data-theme="light"] body .item-card,
html[data-theme="dark"] body .item-card {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background-color: rgba(28, 22, 8, 0.88) !important;
background-image: none !important;
}
html body .item-card[data-rarity="legendary"] {
background-color: rgba(58, 44, 10, 0.90) !important;
}
html body .item-card[data-rarity="epic"] {
background-color: rgba(42, 26, 58, 0.90) !important;
}
html body .item-card[data-rarity="rare"] {
background-color: rgba(20, 34, 56, 0.90) !important;
}
html body .item-card[data-rarity="regular"] {
background-color: rgba(28, 32, 40, 0.88) !important;
}
/* part 320 - theme-variant twin of part 319 so the solid glass also wins
under [data-theme="light"] / [data-theme="dark"] (same specificity, later) */
html[data-theme="light"] body .item-card[data-rarity="legendary"],
html[data-theme="dark"] body .item-card[data-rarity="legendary"] {
background: rgba(58, 44, 10, 0.90) !important;
}
html[data-theme="light"] body .item-card[data-rarity="epic"],
html[data-theme="dark"] body .item-card[data-rarity="epic"] {
background: rgba(42, 26, 58, 0.90) !important;
}
html[data-theme="light"] body .item-card[data-rarity="rare"],
html[data-theme="dark"] body .item-card[data-rarity="rare"] {
background: rgba(20, 34, 56, 0.90) !important;
}
html[data-theme="light"] body .item-card[data-rarity="regular"],
html[data-theme="dark"] body .item-card[data-rarity="regular"] {
background: rgba(28, 32, 40, 0.88) !important;
}
html body .item-card,
html[data-theme="light"] body .item-card,
html[data-theme="dark"] body .item-card {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* part 321 - card motion is back: entrance, hover lift + rarity glow,
press feedback. No backdrop-filter anywhere (that surface caused the
band glitch), and everything is scoped above the #catalog freeze */
html body #catalog .item-grid .item-card {
animation: card-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, background-color 0.28s ease;
will-change: transform;
}
html body #catalog .item-grid .item-card:hover {
transform: translateY(-6px);
}
html body #catalog .item-grid .item-card:hover,
html body #catalog .item-grid .item-card:focus-within {
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95), 0 0 32px -8px rgba(255, 255, 255, 0.10);
}
html body #catalog .item-grid .item-card:active {
transform: translateY(-2px) scale(0.985);
transition-duration: 0.12s;
}
html body #catalog .item-grid .item-card:hover[data-rarity="legendary"] {
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95), 0 0 34px -6px rgba(240, 184, 58, 0.50);
background-color: rgba(74, 56, 14, 0.92);
}
html body #catalog .item-grid .item-card:hover[data-rarity="epic"] {
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95), 0 0 34px -6px rgba(147, 96, 240, 0.50);
background-color: rgba(52, 34, 72, 0.92);
}
html body #catalog .item-grid .item-card:hover[data-rarity="rare"] {
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95), 0 0 34px -6px rgba(58, 123, 213, 0.52);
background-color: rgba(26, 44, 72, 0.92);
}
html body #catalog .item-grid .item-card:hover[data-rarity="regular"] {
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95), 0 0 30px -8px rgba(160, 178, 205, 0.35);
background-color: rgba(36, 42, 54, 0.92);
}
html body #catalog .item-grid .item-card:hover .item-img {
transform: translateY(-2px) scale(1.02);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* part 322 - re-assert part 321 with !important so it outranks the
earlier freeze kills (equal or higher specificity, later in file) */
html body #catalog .item-grid .item-card {
animation: card-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, background-color 0.28s ease !important;
}
html body #catalog .item-grid .item-card:hover {
transform: translateY(-6px) !important;
}
html body #catalog .item-grid .item-card:hover,
html body #catalog .item-grid .item-card:focus-within {
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95), 0 0 32px -8px rgba(255, 255, 255, 0.10) !important;
}
html body #catalog .item-grid .item-card:active {
transform: translateY(-2px) scale(0.985) !important;
}
html body #catalog .item-grid .item-card:hover .item-img {
transform: translateY(-2px) scale(1.02) !important;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
/* part 323 - real glass look without backdrop-filter: layered sheen,
inner light ring and edge accents painted by gradients on a solid base
(the technique avoids the live-blur compositing bug) */
html body #catalog .item-grid .item-card {
border-radius: 20px !important;
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0) 70%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -18px 30px -22px rgba(0, 0, 0, 0.55),
0 10px 26px -14px rgba(0, 0, 0, 0.55) !important;
}
html body #catalog .item-grid .item-card::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
border-radius: inherit !important;
pointer-events: none !important;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.10) 8%, rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 46%) !important;
transform: translateX(0) !important;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
animation: none !important;
}
html body #catalog .item-grid .item-card::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 34% !important;
z-index: 2 !important;
border-radius: inherit !important;
pointer-events: none !important;
background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.055) 50%, rgba(255, 255, 255, 0)) !important;
opacity: 0 !important;
transform: translateX(-60%) !important;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
animation: none !important;
}
html body #catalog .item-grid .item-card:hover::before {
transform: translateX(14px) !important;
}
html body #catalog .item-grid .item-card:hover::after {
opacity: 1 !important;
transform: translateX(240%) !important;
}
html body #catalog .item-grid .item-card:hover {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -18px 30px -22px rgba(0, 0, 0, 0.45),
0 24px 44px -20px rgba(0, 0, 0, 0.95) !important;
}
/* part 324 - the ask bar becomes a compact centered command bar, like the
reference: one row, icon at the start, input filling, subtle action
button at the end. Solid glass, no backdrop blur */
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
max-width: 760px !important;
margin-inline: auto !important;
height: 64px !important;
border-radius: 16px !important;
padding: 8px 10px 8px 8px !important;
background: linear-gradient(140deg, rgba(34, 48, 70, 0.62), rgba(22, 32, 48, 0.62) 55%, rgba(18, 26, 40, 0.62)) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 12px 26px -16px rgba(0, 0, 0, 0.6) !important;
}
html body #catalog .search-field .search-chip {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
order: 0 !important;
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
html body #catalog .search-row {
display: contents !important;
}
html body #catalog .search-field input {
flex: 1 1 auto !important;
order: 1 !important;
height: 44px !important;
font-size: 17px !important;
}
html body #catalog .search-kbd {
display: none !important;
}
html body #catalog .search-go,
html[data-theme="light"] body #catalog .search-go,
html[data-theme="dark"] body #catalog .search-go {
order: 2 !important;
margin-inline-start: 0 !important;
width: auto !important;
height: 44px !important;
padding: 0 20px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.13) !important;
border: 0 !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
color: rgb(234, 242, 255) !important;
gap: 6px !important;
transition: background-color 0.2s ease, transform 0.2s ease !important;
}
html body #catalog .search-go .go-label {
display: inline !important;
font-size: 15px !important;
font-weight: 700 !important;
}
html body #catalog .search-go svg {
width: 15px !important;
height: 15px !important;
display: none !important;
}
html body #catalog .search-go:hover {
background: rgba(255, 255, 255, 0.20) !important;
}
html body #catalog .search-go:active {
transform: scale(0.96) !important;
}
html body #catalog .search-field:focus-within {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 12px 26px -16px rgba(0, 0, 0, 0.6) !important;
}
/* part 325 - fixes: kill the leftover live blur on the ask bar (band-glitch
surface) and make it span the reference-like width */
html body .search-field-main,
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
width: 100% !important;
max-width: 760px !important;
}
html body .search-field-main .search-row {
display: contents !important;
}
/* part 326 - strip the gray plate behind the search & filter deck and let
the command bar melt into the black catalog plate */
html body #catalog .catalog-toolbar,
html[data-theme="light"] body #catalog .catalog-toolbar,
html[data-theme="dark"] body #catalog .catalog-toolbar {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
html body #catalog .search-field,
html[data-theme="light"] body #catalog .search-field,
html[data-theme="dark"] body #catalog .search-field {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
html body #catalog .search-field .search-chip {
background: rgba(255, 255, 255, 0.06) !important;
}
html body #catalog .search-go,
html[data-theme="light"] body #catalog .search-go,
html[data-theme="dark"] body #catalog .search-go {
background: rgba(255, 255, 255, 0.09) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
html body #catalog .search-go:hover {
background: rgba(255, 255, 255, 0.16) !important;
}
html body #catalog .filter-pill {
background: rgba(255, 255, 255, 0.05) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
html body #catalog .filter-pill.is-active {
background: rgb(37, 99, 235) !important;
box-shadow: none !important;
}
html body #catalog .select-field select {
background: rgba(255, 255, 255, 0.05) !important;
}
/* part 327 - the whole control deck becomes quiet ghost glass: near-black
capsules with hairline edges that melt into the plate */
html body #catalog .filter-pill,
html body #catalog .select-field select,
html body #catalog #reset-filters {
background-color: rgba(255, 255, 255, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
color: rgba(214, 224, 240, 0.78) !important;
border: 0 !important;
font-weight: 500 !important;
}
html body #catalog .filter-pill.is-active {
background: rgb(37, 99, 235) !important;
color: #eaf1ff !important;
box-shadow: none !important;
font-weight: 700 !important;
}
html body #catalog .filter-pill .mono,
html body #catalog .select-field select .mono {
color: rgba(214, 224, 240, 0.45) !important;
}
html body #catalog .search-go,
html[data-theme="light"] body #catalog .search-go,
html[data-theme="dark"] body #catalog .search-go {
background: transparent !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
color: rgba(214, 224, 240, 0.85) !important;
font-weight: 600 !important;
}
html body #catalog .search-go:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
html body #catalog .switch-field,
html body #catalog .switch-field > span {
color: rgba(214, 224, 240, 0.7) !important;
font-size: 13px !important;
}
html body #catalog .text-button#reset-filters {
color: rgba(214, 224, 240, 0.6) !important;
}
/* part 328 - the control deck tidied into one compact centered zone under
the ask bar: pills row, then selects row together, reset inline, counts
line centered, stray hairlines gone */
html body #catalog .select-row,
html[data-theme="light"] body #catalog .select-row,
html[data-theme="dark"] body #catalog .select-row {
display: flex !important;
justify-content: center !important;
align-content: center !important;
gap: 10px !important;
max-width: 760px !important;
margin: 8px auto 10px !important;
border: 0 !important;
}
html body #catalog .select-row > * {
flex: 0 0 auto !important;
margin: 0 !important;
}
html body #catalog #reset-filters {
margin: 0 !important;
}
html body #catalog .catalog-status {
text-align: center !important;
font-size: 12px !important;
color: rgba(214, 224, 240, 0.55) !important;
margin: 2px 0 14px !important;
}
html body #catalog .catalog-toolbar::before,
html body #catalog .catalog-toolbar::after,
html body #catalog .select-row::before,
html body #catalog .select-row::after {
content: none !important;
display: none !important;
}
html body #catalog .filter-block {
margin: 14px 0 2px !important;
}
/* part 329 - custom menus: the ugly native long white list is gone;
each select shows one quiet glass button and a dark styled panel */
html body #catalog .select-row .menu-field {
position: relative !important;
display: inline-flex !important;
margin: 0 !important;
}
html body #catalog .select-row .menu-field .menu-toggle,
html[data-theme="light"] body #catalog .menu-field .menu-toggle,
html[data-theme="dark"] body #catalog .menu-field .menu-toggle {
height: 36px !important;
padding: 6px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(214, 224, 240, 0.78) !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
cursor: pointer !important;
}
html body #catalog .menu-field.is-open .menu-toggle {
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
html body #catalog .menu-field .menu-panel {
display: none !important;
position: absolute !important;
top: calc(100% + 8px) !important;
inset-inline-end: 0 !important;
min-width: 200px !important;
max-height: 300px !important;
overflow: auto !important;
z-index: 90 !important;
padding: 6px !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #121822, #0d1219) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.10),
0 18px 40px -18px rgba(0, 0, 0, 0.85) !important;
}
html body #catalog .menu-field.is-open .menu-panel {
display: block !important;
animation: panel-in 0.16s ease !important;
}
@keyframes panel-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
html body #catalog .menu-option {
display: block !important;
width: 100% !important;
text-align: start !important;
padding: 8px 12px !important;
border-radius: 9px !important;
border: 0 !important;
background: transparent !important;
color: rgba(214, 224, 240, 0.82) !important;
font-size: 13px !important;
cursor: pointer !important;
}
html body #catalog .menu-option:hover {
background: rgba(58, 123, 213, 0.22) !important;
color: #eaf2ff !important;
}
html body #catalog .menu-option.is-selected {
background: rgb(37, 99, 235) !important;
color: #eaf2ff !important;
font-weight: 700 !important;
}
/* hide the native select visuals; it still exists and works */
html body #catalog .select-row .select-field {
display: none !important;
}
/* part 330 - decluttered control deck: the extra controls collapse behind
one "סינון מתקדם" button; the row reveals them in a tidy dark panel */
html body #catalog .deck-toggle,
html[data-theme="light"] body #catalog .deck-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
height: 32px !important;
padding: 0 16px !important;
border-radius: 999px !important;
border: 0 !important;
background: rgba(37, 99, 235, 0.16) !important;
box-shadow: inset 0 0 0 1px rgba(58, 123, 213, 0.45) !important;
color: rgb(126, 176, 255) !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
order: 99 !important;
}
html body #catalog .deck-toggle svg {
width: 14px !important;
height: 14px !important;
}
html body #catalog .deck-toggle .dt-label {
display: inline !important;
}
/* by default the advanced controls are hidden */
html body #catalog .select-row .menu-field,
html body #catalog .select-row .switch-field,
html body #catalog .select-row #reset-filters {
display: none !important;
}
/* open state: they appear inside a compact dark panel row */
html body #catalog .catalog-toolbar.deck-open .select-row,
html[data-theme="light"] body #catalog .catalog-toolbar.deck-open .select-row {
max-width: 760px !important;
background: linear-gradient(180deg, rgba(24, 32, 46, 0.75), rgba(16, 22, 33, 0.75)) !important;
border-radius: 16px !important;
padding: 10px 14px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
html body #catalog .catalog-toolbar.deck-open .menu-field,
html body #catalog .catalog-toolbar.deck-open .switch-field,
html body #catalog .catalog-toolbar.deck-open #reset-filters {
display: inline-flex !important;
}
html body #catalog .catalog-toolbar.deck-open .deck-toggle {
background: rgba(37, 99, 235, 0.30) !important;
color: #eaf2ff !important;
}
/* part 331 - the advanced filter lives as a quiet icon button inside the
ask bar (opposite end from the magnifier chip); no standalone button */
html body #catalog .deck-icon,
html[data-theme="light"] body #catalog .deck-icon,
html[data-theme="dark"] body #catalog .deck-icon {
order: 2 !important;
width: 40px !important;
height: 40px !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
border: 0 !important;
background: rgba(255, 255, 255, 0.05) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
color: rgba(214, 224, 240, 0.85) !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
}
html body #catalog .deck-icon svg {
width: 17px !important;
height: 17px !important;
}
html body #catalog .deck-icon:hover {
background: rgba(255, 255, 255, 0.11) !important;
}
html body #catalog .catalog-toolbar.deck-open .deck-icon {
background: rgba(37, 99, 235, 0.35) !important;
color: #eaf2ff !important;
}
/* the standalone triggers of the old deck are gone */
html body #catalog .deck-toggle {
display: none !important;
}
/* when the panel opens it stays centered under the bar like before */
html body #catalog .catalog-toolbar.deck-open .select-row {
margin-top: 10px !important;
}
/* part 332 - the black catalog plate gets a blurred blue light atmosphere:
soft radial glows (top corner aurora, mid bloom, cool base wash) painted
as gradients so nothing animates and nothing uses live blur */
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-color: #04060b !important;
background-image:
radial-gradient(900px 420px at 50% -6%, rgba(88, 156, 255, 0.16), rgba(88, 156, 255, 0.05) 52%, transparent 72%),
radial-gradient(680px 520px at 14% 12%, rgba(58, 123, 213, 0.14), transparent 70%),
radial-gradient(640px 480px at 86% 22%, rgba(96, 88, 235, 0.12), transparent 70%),
radial-gradient(1100px 700px at 50% 58%, rgba(46, 96, 190, 0.07), transparent 74%),
linear-gradient(180deg, rgba(12, 20, 38, 0.35), rgba(3, 5, 10, 0) 34%) !important;
}
/* a deep blurred horizon glow behind the item grid */
html body #catalog .shell::before,
html[data-theme="light"] body #catalog .shell::before,
html[data-theme="dark"] body #catalog .shell::before {
content: "" !important;
position: absolute !important;
inset: -60px -40px auto !important;
height: 620px !important;
z-index: 0 !important;
pointer-events: none !important;
background:
radial-gradient(56% 60% at 22% 46%, rgba(58, 123, 213, 0.12), transparent 70%),
radial-gradient(48% 62% at 72% 40%, rgba(126, 96, 255, 0.10), transparent 72%),
radial-gradient(70% 80% at 50% 88%, rgba(30, 80, 180, 0.10), transparent 76%);
}
html body #catalog .shell > * {
position: relative !important;
z-index: 1 !important;
}
/* part 333 - ambient blue light continues behind the item grid: glows peek
through the gaps between the solid glass cards and a low horizon glow
fills the lower black area */
html body #catalog .shell::after,
html[data-theme="light"] body #catalog .shell::after,
html[data-theme="dark"] body #catalog .shell::after {
content: "" !important;
position: absolute !important;
inset: 34% -40px -80px !important;
z-index: 0 !important;
pointer-events: none !important;
background:
radial-gradient(54% 46% at 26% 34%, rgba(58, 123, 213, 0.10), transparent 72%),
radial-gradient(50% 50% at 74% 28%, rgba(126, 96, 255, 0.08), transparent 72%),
radial-gradient(80% 60% at 50% 78%, rgba(38, 78, 170, 0.09), transparent 78%);
}
html body #catalog .item-grid,
html[data-theme="light"] body #catalog .item-grid,
html[data-theme="dark"] body #catalog .item-grid {
background-image:
radial-gradient(340px 260px at 12% 28%, rgba(88, 156, 255, 0.09), transparent 72%),
radial-gradient(340px 260px at 88% 62%, rgba(96, 88, 235, 0.08), transparent 72%),
radial-gradient(420px 300px at 50% 90%, rgba(46, 96, 190, 0.07), transparent 74%) !important;
border-radius: 22px !important;
}
html body #catalog .item-grid > * {
position: relative !important;
z-index: 1 !important;
}
/* part 334 - fix two issues:
1) the deck panel is no longer a hard dark box that cuts the ambience
into a visible seam - it is a near-invisible tint
2) the menu panels must paint above the item cards (the toolbar now owns
a high stacking level), so options are clickable */
html body #catalog .catalog-toolbar,
html[data-theme="light"] body #catalog .catalog-toolbar,
html[data-theme="dark"] body #catalog .catalog-toolbar {
position: relative !important;
z-index: 60 !important;
}
html body #catalog .select-row .menu-panel {
z-index: 95 !important;
}
html body #catalog .catalog-toolbar.deck-open .select-row {
background: rgba(10, 14, 22, 0.30) !important;
box-shadow: none !important;
}
html body #catalog .catalog-cap::before,
html body #catalog .catalog-cap::after,
html body #catalog .catalog-toolbar::before,
html body #catalog .catalog-toolbar::after {
content: none !important;
display: none !important;
border: 0 !important;
}
/* part 335 - the decorative sky-frame overlay was intercepting clicks above
the menu panels; it is transparent decoration, so it must never capture
the pointer */
html body .sky-frame,
html[data-theme="light"] body .sky-frame,
html[data-theme="dark"] body .sky-frame {
pointer-events: none !important;
}
/* part 335b - pointer-events inherits, so the blanket "none" above also
muted the hero button and every other interactive element inside the
frame. Re-enable on the content container: the frame itself stays
click-through, but real content inside is clickable again. */
html body .sky-frame .sky-canvas {
pointer-events: auto;
}
/* part 336 - theme-variant twin so the open deck panel is the near-invisible
tint in light/dark too (the light-theme attr variant outranked it before) */
html[data-theme="light"] body #catalog .catalog-toolbar.deck-open .select-row,
html[data-theme="dark"] body #catalog .catalog-toolbar.deck-open .select-row {
background: rgba(10, 14, 22, 0.30) !important;
box-shadow: none !important;
}
/* part 338 - kill the band steps: the separate ::before/::after glow blobs
each ended abruptly and stacked into visible seams; now a single smooth
atmosphere is painted directly on the plate, top to bottom */
html body #catalog .shell::before,
html[data-theme="light"] body #catalog .shell::before,
html[data-theme="dark"] body #catalog .shell::before,
html body #catalog .shell::after,
html[data-theme="light"] body #catalog .shell::after,
html[data-theme="dark"] body #catalog .shell::after {
content: none !important;
display: none !important;
}
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
background-color: #04060b !important;
background-image:
radial-gradient(1100px 620px at 50% -80px, rgba(88, 156, 255, 0.16), rgba(88, 156, 255, 0.05) 50%, transparent 74%),
radial-gradient(900px 700px at 10% 12%, rgba(58, 123, 213, 0.13), transparent 72%),
radial-gradient(900px 700px at 90% 18%, rgba(96, 88, 235, 0.11), transparent 72%),
radial-gradient(1500px 1000px at 50% 42%, rgba(46, 96, 190, 0.07), transparent 78%),
radial-gradient(1200px 900px at 18% 72%, rgba(50, 100, 225, 0.065), transparent 78%),
radial-gradient(1200px 900px at 82% 84%, rgba(90, 76, 220, 0.06), transparent 78%) !important;
}
/* part 339 - last seam source: the item-grid still carried three glow
gradients from the blob era, each with its own hard stop; they painted
band steps inside the plate above the smooth shell paint. The grid is
now fully transparent - the plate glow is the only painter left. */
html body #catalog .item-grid,
html[data-theme="light"] body #catalog .item-grid,
html[data-theme="dark"] body #catalog .item-grid {
background: none !important;
border-radius: 0 !important;
}
/* part 340 - the empty state blends into the plate: no floating card box,
no icon - just quiet centered text and the reset action */
html body #catalog .empty-state,
html[data-theme="light"] body #catalog .empty-state,
html[data-theme="dark"] body #catalog .empty-state {
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 70px 20px 80px !important;
border-radius: 0 !important;
}
html body #catalog .empty-state .empty-mark {
display: none !important;
}
html body #catalog .empty-state h3,
html[data-theme="light"] body #catalog .empty-state h3,
html[data-theme="dark"] body #catalog .empty-state h3 {
color: rgba(214, 224, 240, 0.92) !important;
font-size: 19px !important;
font-weight: 700 !important;
margin: 0 0 10px !important;
}
html body #catalog .empty-state p {
color: rgba(160, 176, 200, 0.65) !important;
font-size: 14px !important;
max-width: 420px !important;
margin: 0 auto 22px !important;
}
/* part 341 - the card action row redesign: "הוסף לצד שלי" is the primary
filled action, "הוסף לצד השני" is the outlined partner; both get a
press animation (scale + glow ring + quick settle) */
html body #catalog .item-card-actions,
html[data-theme="light"] body #catalog .item-card-actions,
html[data-theme="dark"] body #catalog .item-card-actions {
display: flex !important;
gap: 7px !important;
padding: 9px 10px 10px !important;
margin: 0 !important;
}
html body #catalog .item-card-actions button,
html[data-theme="light"] body #catalog .item-card-actions button,
html[data-theme="dark"] body #catalog .item-card-actions button {
flex: 1 1 0 !important;
height: 34px !important;
border-radius: 11px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
cursor: pointer !important;
transition: transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
}
/* primary - my side: filled blue with an inner top sheen */
html body #catalog .item-card-actions button[data-add="offer"],
html[data-theme="light"] body #catalog .item-card-actions button[data-add="offer"],
html[data-theme="dark"] body #catalog .item-card-actions button[data-add="offer"] {
border: 0 !important;
background: linear-gradient(180deg, rgba(88, 156, 255, 0.92), rgba(37, 99, 235, 0.92)) !important;
color: #f4f9ff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px rgba(37, 99, 235, 0.22) !important;
}
html body #catalog .item-card-actions button[data-add="offer"]:hover {
background: linear-gradient(180deg, rgba(104, 170, 255, 1), rgba(52, 114, 245, 1)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 14px rgba(37, 99, 235, 0.34) !important;
transform: translateY(-1px) !important;
}
/* secondary - the other side: quiet outline partner */
html body #catalog .item-card-actions button[data-add="request"],
html[data-theme="light"] body #catalog .item-card-actions button[data-add="request"],
html[data-theme="dark"] body #catalog .item-card-actions button[data-add="request"] {
border: 0 !important;
background: rgba(255, 255, 255, 0.05) !important;
color: rgba(196, 212, 236, 0.9) !important;
box-shadow: inset 0 0 0 1px rgba(122, 164, 232, 0.35) !important;
}
html body #catalog .item-card-actions button[data-add="request"]:hover {
background: rgba(88, 156, 255, 0.14) !important;
color: #eaf2ff !important;
box-shadow: inset 0 0 0 1px rgba(122, 164, 232, 0.6) !important;
transform: translateY(-1px) !important;
}
/* press animation - both buttons: quick squash, blue glow ring, settle back */
html body #catalog .item-card-actions button:active,
html[data-theme="light"] body #catalog .item-card-actions button:active,
html[data-theme="dark"] body #catalog .item-card-actions button:active {
transform: scale(0.94) !important;
transition-duration: 0.08s !important;
}
html body #catalog .item-card-actions button[data-add]:active {
animation: mkAddPress 0.45s cubic-bezier(0.3, 1.25, 0.55, 1) !important;
}
@keyframes mkAddPress {
0% { transform: scale(0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(88, 156, 255, 0.5); }
40% { transform: scale(1.035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 7px rgba(88, 156, 255, 0.16); }
100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 12px rgba(88, 156, 255, 0); }
}
/* the card itself also dips a touch when its action is pressed */
html body #catalog .item-card:has(.item-card-actions button:active) {
transform: scale(0.99) !important;
}
/* part 342 - accessible, hierarchy-first action row redesign:
large 44px targets, clear primary/secondary roles, focus-visible rings,
high-contrast text, + icons that make the action readable at a glance */
html body #catalog .item-card-actions,
html[data-theme="light"] body #catalog .item-card-actions,
html[data-theme="dark"] body #catalog .item-card-actions {
display: flex !important;
gap: 8px !important;
padding: 12px 12px 12px !important;
margin: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* primary: "הוסף לצד שלי" - dominant, 1.8x the width of the secondary */
html body #catalog .item-card-actions button[data-add="offer"],
html[data-theme="light"] body #catalog .item-card-actions button[data-add="offer"],
html[data-theme="dark"] body #catalog .item-card-actions button[data-add="offer"] {
flex: 1.8 1 0 !important;
height: 44px !important;
border-radius: 13px !important;
font-size: 14px !important;
font-weight: 700 !important;
border: 0 !important;
background: linear-gradient(180deg, rgba(96, 162, 255, 0.95), rgba(37, 99, 235, 0.95)) !important;
color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(37, 99, 235, 0.28) !important;
cursor: pointer !important;
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
/* secondary: "הוסף לצד השני" - clearly quieter but still 44px */
html body #catalog .item-card-actions button[data-add="request"],
html[data-theme="light"] body #catalog .item-card-actions button[data-add="request"],
html[data-theme="dark"] body #catalog .item-card-actions button[data-add="request"] {
flex: 1 1 0 !important;
height: 44px !important;
border-radius: 13px !important;
font-size: 13px !important;
font-weight: 600 !important;
border: 0 !important;
background: rgba(255, 255, 255, 0.07) !important;
color: #dbe6f7 !important;
box-shadow: inset 0 0 0 1.5px rgba(150, 184, 240, 0.45) !important;
cursor: pointer !important;
transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
/* + icons: the action becomes legible without reading the label */
html body #catalog .item-card-actions button[data-add]::before {
content: "+" !important;
display: inline-block !important;
margin-inline-end: 6px !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1 !important;
vertical-align: -1px !important;
}
html body #catalog .item-card-actions button[data-add="offer"]::before,
html[data-theme="light"] body #catalog .item-card-actions button[data-add="offer"]::before,
html[data-theme="dark"] body #catalog .item-card-actions button[data-add="offer"]::before {
color: #ffffff !important;
}
html body #catalog .item-card-actions button[data-add="request"]::before {
color: rgba(170, 204, 250, 0.95) !important;
}
/* hover / active / keyboard focus - all states explicit */
html body #catalog .item-card-actions button[data-add="offer"]:hover {
filter: brightness(1.08) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px rgba(37, 99, 235, 0.4) !important;
transform: translateY(-1px) !important;
}
html body #catalog .item-card-actions button[data-add="request"]:hover {
background: rgba(120, 168, 248, 0.16) !important;
box-shadow: inset 0 0 0 1.5px rgba(170, 204, 250, 0.7) !important;
transform: translateY(-1px) !important;
}
html body #catalog .item-card-actions button[data-add]:focus-visible,
html[data-theme="light"] body #catalog .item-card-actions button[data-add]:focus-visible,
html[data-theme="dark"] body #catalog .item-card-actions button[data-add]:focus-visible {
outline: 2px solid rgba(140, 190, 255, 0.95) !important;
outline-offset: 2px !important;
}
html body #catalog .item-card-actions button[data-add]:active {
transform: scale(0.96) !important;
animation: mkAddPress 0.4s cubic-bezier(0.3, 1.2, 0.55, 1) !important;
}
/* part 343 - position & display redesign: the action row is ALWAYS visible
(the old opacity:0 hover-only rule made it unreachable). It becomes a
proper card footer: full-bleed bottom band with its own backdrop, the
two buttons sized by design, and noticeably larger label text. */
html body #catalog .item-card-actions,
html[data-theme="light"] body #catalog .item-card-actions,
html[data-theme="dark"] body #catalog .item-card-actions {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
position: relative !important;
display: flex !important;
gap: 8px !important;
align-items: stretch !important;
margin-top: auto !important;
padding: 10px 12px 12px !important;
background: linear-gradient(180deg, rgba(10, 16, 28, 0.55), rgba(7, 11, 20, 0.85)) !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 0 0 17px 17px !important;
}
/* larger, better-set labels inside the buttons */
html body #catalog .item-card-actions button[data-add],
html[data-theme="light"] body #catalog .item-card-actions button[data-add],
html[data-theme="dark"] body #catalog .item-card-actions button[data-add] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 42px !important;
padding: 0 14px !important;
font-size: 14.5px !important;
line-height: 1 !important;
white-space: nowrap !important;
border-radius: 12px !important;
}
html body #catalog .item-card-actions button[data-add="offer"].about { }
/* slight size hierarchy kept, text remains comfortable */
html body #catalog .item-card-actions button[data-add="offer"] {
flex: 1.6 1 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
}
html body #catalog .item-card-actions button[data-add="request"] {
flex: 1 1 0 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
}
/* make sure no legacy rule slides the bar away on hover or re-hides it */
html body #catalog .item-card:hover .item-card-actions,
html body #catalog .item-card:focus-within .item-card-actions {
opacity: 1 !important;
transform: none !important;
}
/* part 344 - the "added to side" feedback toast redesigned: a proper
notification chip - check badge, clear side label, larger readable text,
no live blur (backdrop-filter removed for the Chrome/Windows bug) */
html body .toast,
html[data-theme="light"] body .toast,
html[data-theme="dark"] body .toast {
display: flex !important;
align-items: center !important;
gap: 10px !important;
bottom: 26px !important;
padding: 12px 20px 12px 14px !important;
border-radius: 16px !important;
border: 0 !important;
background: linear-gradient(180deg, rgba(20, 30, 48, 0.97), rgba(12, 18, 30, 0.97)) !important;
box-shadow: inset 0 0 0 1px rgba(122, 164, 232, 0.28), 0 18px 44px -14px rgba(0, 0, 0, 0.75) !important;
backdrop-filter: none !important;
color: #eaf2ff !important;
font-size: 14px !important;
font-weight: 600 !important;
max-width: min(460px, calc(100vw - 32px)) !important;
text-align: right !important;
}
/* check badge painted as prefix element */
html body .toast::before {
content: "" !important;
flex: 0 0 auto !important;
width: 26px !important;
height: 26px !important;
border-radius: 50% !important;
background:
url("data:image/svg+xml;utf8,") center / 15px no-repeat,
linear-gradient(180deg, rgb(96, 162, 255), rgb(37, 99, 235)) !important;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}
/* the item name part after the side label is gently separated in the flow */
html body .toast[hidden] {
display: none !important;
}
/* part 345 - roomier inner card layout: the name/price/tags zone breathes -
real gaps instead of the 5px squeeze, clear line rhythm, aligned rows */
html body #catalog .item-content-bottom,
html[data-theme="light"] body #catalog .item-content-bottom,
html[data-theme="dark"] body #catalog .item-content-bottom {
gap: 12px !important;
margin-top: 14px !important;
}
html body #catalog .item-content,
html[data-theme="light"] body #catalog .item-content,
html[data-theme="dark"] body #catalog .item-content {
padding: 16px 16px 14px !important;
}
/* the item name: comfortable wrap height, keeps its size */
html body #catalog .item-name,
html[data-theme="light"] body #catalog .item-name,
html[data-theme="dark"] body #catalog .item-name {
line-height: 1.4 !important;
display: inline !important;
}
/* slot + secondary line: normal size, calm color, visible again */
html body #catalog .item-slot-label,
html[data-theme="light"] body #catalog .item-slot-label,
html[data-theme="dark"] body #catalog .item-slot-label {
display: inline !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: rgba(185, 200, 221, 0.8) !important;
line-height: 1.5 !important;
}
/* the price / creator row: its own quiet band, price emphasized */
html body #catalog .item-sub,
html[data-theme="light"] body #catalog .item-sub,
html[data-theme="dark"] body #catalog .item-sub {
margin-top: 2px !important;
gap: 10px !important;
font-size: 14px !important;
align-items: baseline !important;
}
html body #catalog .item-sub > span:first-child {
font-weight: 700 !important;
font-size: 15px !important;
color: #f2f6ff !important;
}
html body #catalog .item-sub > span:not(:first-child) {
color: rgba(185, 200, 221, 0.75) !important;
font-size: 13.5px !important;
}
/* tags row: as chips with air, not squeezed words */
html body #catalog .item-flags,
html[data-theme="light"] body #catalog .item-flags,
html[data-theme="dark"] body #catalog .item-flags {
margin-top: 2px !important;
gap: 7px !important;
flex-wrap: wrap !important;
}
html body #catalog .item-flags > * {
padding: 4px 10px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
color: rgba(206, 218, 238, 0.9) !important;
}
/* part 346 - taller action buttons: the slim 42px chips looked lost in the
big card; give the action row real presence matching the card scale */
html body #catalog .item-card-actions,
html[data-theme="light"] body #catalog .item-card-actions,
html[data-theme="dark"] body #catalog .item-card-actions {
gap: 10px !important;
padding: 12px 14px 14px !important;
}
html body #catalog .item-card-actions button[data-add],
html[data-theme="light"] body #catalog .item-card-actions button[data-add],
html[data-theme="dark"] body #catalog .item-card-actions button[data-add] {
height: 62px !important;
border-radius: 16px !important;
padding: 0 16px !important;
font-size: 16px !important;
}
html body #catalog .item-card-actions button[data-add]::before {
font-size: 21px !important;
margin-inline-end: 8px !important;
vertical-align: -2px !important;
}
html body #catalog .item-card-actions button[data-add="offer"] {
font-size: 16.5px !important;
}
html body #catalog .item-card-actions button[data-add="request"] {
font-size: 15px !important;
}
/* part 347 - the item visual fills the card: the media zone stretches
into the leftover vertical space instead of staying a fixed 168px strip
with dead air around it */
html body #catalog .item-media,
html[data-theme="light"] body #catalog .item-media,
html[data-theme="dark"] body #catalog .item-media {
flex: 1 1 auto !important;
align-self: stretch !important;
min-height: 240px !important;
padding: 18px 18px 6px !important;
}
html body #catalog .item-media img,
html[data-theme="light"] body #catalog .item-media img,
html[data-theme="dark"] body #catalog .item-media img {
width: 100% !important;
height: 100% !important;
max-height: 340px !important;
object-fit: contain !important;
display: block !important;
}
/* and the card grid stretches the cards so the freed space is used */
html body #catalog .item-content {
flex: 0 0 auto !important;
}
/* part 348 - quality guards: the enlarged item visuals must stay crisp -
no smoothing hacks, no scale filters, native browser imaging retained */
html body #catalog .item-media img,
html[data-theme="light"] body #catalog .item-media img,
html[data-theme="dark"] body #catalog .item-media img {
image-rendering: auto !important;
filter: none !important;
-webkit-user-drag: none !important;
user-select: none !important;
}
/* part 349 - the trade board in the game's own visual language: deep
violet-blue night like the in-game swap screen, two slotted panels
with neon rims, a glowing swap ring in the middle, cyan verdict bar.
Static gradients only - no blur, no animation. */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background:
radial-gradient(900px 540px at 16% 30%, rgba(126, 74, 255, 0.16), transparent 72%),
radial-gradient(900px 540px at 84% 30%, rgba(64, 130, 255, 0.16), transparent 72%),
radial-gradient(1200px 700px at 50% 110%, rgba(88, 60, 220, 0.14), transparent 74%),
linear-gradient(180deg, #0a0d22 0%, #0a0d22 100%) !important;
background-color: #0a0d22 !important;
}
html body #trade .shell,
html[data-theme="light"] body #trade .shell,
html[data-theme="dark"] body #trade .shell {
background: transparent !important;
box-shadow: none !important;
}
html body #trade .section-head h2,
html[data-theme="light"] body #trade .section-head h2,
html[data-theme="dark"] body #trade .section-head h2 {
color: #eef4ff !important;
}
html body #trade .section-lead,
html[data-theme="light"] body #trade .section-lead,
html[data-theme="dark"] body #trade .section-lead {
color: rgba(178, 192, 222, 0.75) !important;
}
/* the two inventory panels: slotted game-grid look */
html body #trade .trade-column,
html[data-theme="light"] body #trade .trade-column,
html[data-theme="dark"] body #trade .trade-column {
background:
radial-gradient(300px 200px at 50% 0%, rgba(255, 255, 255, 0.035), transparent 70%),
linear-gradient(180deg, rgba(38, 26, 92, 0.5), rgba(22, 15, 58, 0.62)) !important;
border-radius: 20px !important;
border: 0 !important;
box-shadow: inset 0 0 0 1.5px rgba(139, 106, 255, 0.35), inset 0 0 60px rgba(88, 50, 220, 0.12), 0 16px 40px -18px rgba(0, 0, 0, 0.6) !important;
padding: 18px 16px 16px !important;
}
html body #trade .trade-column-head h3 {
color: #bfeaff !important;
font-size: 18px !important;
}
/* the english micro labels must not appear (hebrew only) */
html body #trade .trade-column-head .micro-label {
display: none !important;
}
html body #trade .trade-score {
color: #ffd86b !important;
font-size: 20px !important;
text-shadow: 0 0 14px rgba(255, 205, 90, 0.35) !important;
}
/* search rows: dark wells with cyan focus */
html body #trade .search-field-small,
html[data-theme="light"] body #trade .search-field-small,
html[data-theme="dark"] body #trade .search-field-small {
background: rgba(10, 12, 30, 0.7) !important;
border-radius: 12px !important;
box-shadow: inset 0 0 0 1.5px rgba(120, 150, 255, 0.28) !important;
color: #dfe8ff !important;
height: 44px !important;
}
html body #trade .search-field-small input {
color: #eaf0ff !important;
font-size: 14px !important;
}
html body #trade .search-field-small input::placeholder {
color: rgba(160, 176, 216, 0.6) !important;
}
/* item tiles inside each side: square game slots */
html body #trade .trade-list {
gap: 10px !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background: linear-gradient(180deg, rgba(52, 40, 120, 0.35), rgba(34, 24, 88, 0.45)) !important;
border-radius: 14px !important;
box-shadow: inset 0 0 0 1.5px rgba(140, 110, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
border: 0 !important;
color: #e6ecff !important;
}
/* the swap ring between the panels: neon cyan target */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
border: 0 !important;
background: linear-gradient(180deg, rgba(60, 220, 255, 0.22), rgba(40, 140, 255, 0.16)) !important;
box-shadow: inset 0 0 0 2px rgba(110, 220, 255, 0.5), 0 0 26px rgba(80, 190, 255, 0.3) !important;
color: #9fe6ff !important;
}
html body #trade .swap-button svg {
width: 26px !important;
height: 26px !important;
}
html body #trade .trade-divider-line {
background: linear-gradient(90deg, transparent, rgba(110, 150, 255, 0.25), transparent) !important;
}
/* verdict bar: cyan glass strip */
html body #trade .verdict-inner,
html[data-theme="light"] body #trade .verdict-inner,
html[data-theme="dark"] body #trade .verdict-inner {
background: linear-gradient(180deg, rgba(24, 44, 78, 0.8), rgba(16, 28, 56, 0.8)) !important;
border-radius: 16px !important;
border: 0 !important;
box-shadow: inset 0 0 0 1.5px rgba(110, 200, 255, 0.3) !important;
color: #d8ecff !important;
}
html body #trade .verdict-copy strong {
color: #a9e9ff !important;
}
/* part 350 - exact game-grid look: square slotted tiles with translucent
violet fills (like the in-game 8-slot boards), magenta rim on the left
panel, cyan rim on the right, horizontal neon floor line, cyan approval
bar. Filled tiles are the game's occupied slots. */
/* side rims - left column glows magenta, right column cyan */
html body #trade .trade-column[data-side="offer"] {
box-shadow: inset 0 0 0 2px rgba(168, 85, 255, 0.4), inset 0 0 80px rgba(140, 60, 255, 0.14), 0 20px 50px -20px rgba(0,0,0,.6) !important;
}
html[data-theme="light"] body #trade .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-column[data-side="offer"] {
box-shadow: inset 0 0 0 2px rgba(168, 85, 255, 0.4), inset 0 0 80px rgba(140, 60, 255, 0.14), 0 20px 50px -20px rgba(0,0,0,.6) !important;
}
html body #trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-column[data-side="request"] {
box-shadow: inset 0 0 0 2px rgba(64, 200, 255, 0.35), inset 0 0 80px rgba(50, 140, 255, 0.12), 0 20px 50px -20px rgba(0,0,0,.6) !important;
}
/* the item grid: square slots in 2 columns like the game boards */
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-list {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
margin-top: 14px !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
aspect-ratio: 1 / 1 !important;
min-height: 130px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
background:
linear-gradient(180deg, rgba(120, 92, 220, 0.18), rgba(70, 48, 160, 0.30)) !important;
border-radius: 8px !important;
box-shadow:
inset 0 0 0 1.5px rgba(160, 130, 255, 0.35),
inset 0 0 26px rgba(120, 80, 255, 0.12),
0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
html body #trade .trade-list li img,
html body #trade .trade-list li svg {
width: 58% !important;
height: 58% !important;
object-fit: contain !important;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) !important;
}
/* rarity crown badge like the game's slot corner */
html body #trade .trade-list li::after {
content: "" !important;
position: absolute !important;
inset-inline-start: 6px !important;
inset-block-start: 6px !important;
width: 10px !important;
height: 10px !important;
border-radius: 3px !important;
background: rgba(255, 255, 255, 0.14) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
/* empty-side note sits quietly under the slots */
html body #trade .trade-empty {
color: rgba(160, 176, 216, 0.55) !important;
}
/* the horizontal neon floor line under the board */
html body #trade .trade-board::after,
html[data-theme="light"] body #trade .trade-board::after,
html[data-theme="dark"] body #trade .trade-board::after {
content: "" !important;
display: block !important;
margin-top: 26px !important;
height: 2px !important;
width: min(70%, 640px) !important;
margin-inline: auto !important;
background: linear-gradient(90deg, rgba(168, 85, 255, 0) 0%, rgba(200, 120, 255, 0.55) 22%, rgba(100, 190, 255, 0.7) 50%, rgba(200, 120, 255, 0.55) 78%, rgba(168, 85, 255, 0) 100%) !important;
box-shadow: 0 0 18px rgba(150, 110, 255, 0.45) !important;
border-radius: 999px !important;
}
/* the approval button: cyan capsule like אישור in the game */
html body #trade .trade-clear-button,
html[data-theme="light"] body #trade .trade-clear-button,
html[data-theme="dark"] body #trade .trade-clear-button {
width: 200px !important;
height: 50px !important;
border-radius: 12px !important;
border: 0 !important;
background: linear-gradient(180deg, #67d8ff 0%, #35b4f2 55%, #2ba7e8 100%) !important;
color: #062238 !important;
font-size: 15px !important;
font-weight: 700 !important;
box-shadow: 0 3px 0 rgba(20, 120, 180, 0.55), 0 10px 26px -8px rgba(60, 190, 255, 0.45) !important;
margin-inline: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html body #trade .trade-clear-button svg {
width: 18px !important;
height: 18px !important;
}
html body #trade .trade-clear-button:hover {
filter: brightness(1.07) !important;
}
/* faint dot pair at the panel feet (game detail) */
html body #trade .trade-column::after,
html[data-theme="light"] body #trade .trade-column::after,
html[data-theme="dark"] body #trade .trade-column::after {
content: "" !important;
position: absolute !important;
inset-inline-end: 14px !important;
inset-block-end: 12px !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: rgba(150, 130, 255, 0.3) !important;
box-shadow: -14px 0 0 rgba(150, 130, 255, 0.18) !important;
}
html body #trade .trade-column {
position: relative !important;
}
/* part 351 - exact match to the in-game swap screen: two tall glowing
columns (magenta-purple vs cyan), translucent slot tiles, outlined swap
arrows, connector stings with end dots, double neon floor lines */
/* columns become glowing vertical capsules */
html body #trade .trade-column,
html[data-theme="light"] body #trade .trade-column,
html[data-theme="dark"] body #trade .trade-column {
background: linear-gradient(180deg, rgba(30, 18, 70, 0.25), rgba(70, 40, 190, 0.30) 55%, rgba(140, 70, 255, 0.28)) !important;
border-radius: 26px !important;
padding: 16px 16px 20px !important;
}
html body #trade .trade-column[data-side="offer"] {
background:
radial-gradient(120px 340px at 50% 100%, rgba(196, 100, 255, 0.22), transparent 76%),
linear-gradient(180deg, rgba(28, 16, 64, 0.35), rgba(90, 40, 200, 0.26) 70%, rgba(190, 100, 255, 0.30)) !important;
box-shadow: inset 0 0 0 1.5px rgba(190, 110, 255, 0.45), 0 0 48px -6px rgba(168, 85, 255, 0.35) !important;
}
html[data-theme="light"] body #trade .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-column[data-side="offer"] {
background:
radial-gradient(120px 340px at 50% 100%, rgba(196, 100, 255, 0.22), transparent 76%),
linear-gradient(180deg, rgba(28, 16, 64, 0.35), rgba(90, 40, 200, 0.26) 70%, rgba(190, 100, 255, 0.30)) !important;
box-shadow: inset 0 0 0 1.5px rgba(190, 110, 255, 0.45), 0 0 48px -6px rgba(168, 85, 255, 0.35) !important;
}
html body #trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-column[data-side="request"] {
background:
radial-gradient(120px 340px at 50% 100%, rgba(80, 220, 255, 0.20), transparent 76%),
linear-gradient(180deg, rgba(18, 34, 90, 0.35), rgba(40, 90, 220, 0.26) 70%, rgba(90, 220, 255, 0.26)) !important;
box-shadow: inset 0 0 0 1.5px rgba(110, 220, 255, 0.45), 0 0 48px -6px rgba(80, 190, 255, 0.35) !important;
}
/* slot tiles: fainter, more translucent - like the empty slots */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
border-radius: 10px !important;
}
/* swap arrows: thin dark outline, no pill - just like the game glyph */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
background: none !important;
box-shadow: none !important;
color: rgba(150, 130, 255, 0.55) !important;
width: 80px !important;
height: 80px !important;
}
html body #trade .swap-button svg {
width: 64px !important;
height: 64px !important;
filter: drop-shadow(0 0 10px rgba(130, 100, 255, 0.35)) !important;
}
/* connector strings with end dots: magenta on the left glow, cyan right */
html body #trade .trade-divider {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
}
html body #trade .trade-divider-line {
height: 2px !important;
width: 46px !important;
border-radius: 999px !important;
margin: 0 !important;
}
html body #trade .trade-divider-line:first-of-type {
background: rgba(196, 100, 255, 0.7) !important;
box-shadow: 0 0 10px rgba(196, 100, 255, 0.5) !important;
}
html body #trade .trade-divider-line:last-of-type {
background: rgba(90, 220, 255, 0.7) !important;
box-shadow: 0 0 10px rgba(90, 220, 255, 0.5) !important;
}
/* double neon floor line */
html body #trade .trade-board::after,
html[data-theme="light"] body #trade .trade-board::after,
html[data-theme="dark"] body #trade .trade-board::after {
height: 3px !important;
background:
linear-gradient(90deg, rgba(168, 85, 255, 0) 0%, rgba(210, 130, 255, 0.75) 20%, rgba(120, 200, 255, 0.85) 50%, rgba(210, 130, 255, 0.75) 80%, rgba(168, 85, 255, 0) 100%) !important;
box-shadow: 0 4px 0 -1px rgba(96, 60, 220, 0.5), 0 0 22px rgba(160, 110, 255, 0.55) !important;
}
/* search input merges into the column: quiet dark field */
html body #trade .search-field-small {
height: 42px !important;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14) !important;
background: rgba(12, 10, 34, 0.55) !important;
}
/* remove the purple dot pairs from 350 in favour of the game look */
html body #trade .trade-column::after,
html[data-theme="light"] body #trade .trade-column::after,
html[data-theme="dark"] body #trade .trade-column::after {
content: none !important;
}
/* part 352 - one-to-one with the in-game swap board: diagonal neon
threads + sparkles in the backdrop, 2x3 translucent slot grids, glowing
column feet, outlined swap glyph with end dots, neon floor bar. */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background:
repeating-linear-gradient(58deg, rgba(150, 120, 255, 0.05) 0 1px, transparent 1px 240px),
radial-gradient(2px 2px at 12% 26%, rgba(190, 170, 255, 0.5), transparent 60%),
radial-gradient(2px 2px at 28% 68%, rgba(190, 170, 255, 0.35), transparent 60%),
radial-gradient(2px 2px at 63% 22%, rgba(190, 170, 255, 0.4), transparent 60%),
radial-gradient(2px 2px at 82% 74%, rgba(160, 210, 255, 0.35), transparent 60%),
radial-gradient(2px 2px at 47% 44%, rgba(190, 170, 255, 0.3), transparent 60%),
radial-gradient(1000px 640px at 8% 78%, rgba(170, 70, 255, 0.20), transparent 72%),
radial-gradient(1000px 640px at 92% 70%, rgba(40, 190, 255, 0.16), transparent 72%),
linear-gradient(180deg, #0c0a26 0%, #0e0a2c 46%, #120a33 100%) !important;
}
/* slot stage: six translucent squares, exactly like the game boards */
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
position: relative !important;
margin-top: 14px !important;
min-height: 300px !important;
}
html body #trade .trade-slots {
position: absolute !important;
inset: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-auto-rows: 1fr !important;
gap: 14px !important;
pointer-events: none !important;
}
html body #trade .trade-slots span {
border-radius: 9px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)) !important;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.13) !important;
}
html body #trade .trade-list {
position: relative !important;
z-index: 1 !important;
grid-auto-rows: 1fr !important;
min-height: 300px !important;
align-content: stretch !important;
}
/* column feet glow: magenta for the offer side, cyan for the request side */
html body #trade .trade-column[data-side="offer"],
html[data-theme="light"] body #trade .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-column[data-side="offer"] {
background:
radial-gradient(70% 34% at 50% 104%, rgba(200, 90, 255, 0.5), rgba(150, 60, 235, 0.16) 52%, transparent 78%),
linear-gradient(180deg, rgba(24, 14, 58, 0.2), rgba(38, 20, 92, 0.32)) !important;
box-shadow: inset 0 0 0 1.5px rgba(186, 116, 255, 0.35), 0 0 60px -10px rgba(170, 80, 255, 0.45) !important;
border-radius: 22px !important;
}
html body #trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-column[data-side="request"] {
background:
radial-gradient(70% 34% at 50% 104%, rgba(80, 215, 255, 0.45), rgba(60, 150, 255, 0.14) 52%, transparent 78%),
linear-gradient(180deg, rgba(12, 22, 58, 0.2), rgba(20, 40, 100, 0.32)) !important;
box-shadow: inset 0 0 0 1.5px rgba(110, 220, 255, 0.32), 0 0 60px -10px rgba(70, 180, 255, 0.4) !important;
border-radius: 22px !important;
}
/* filled tiles: solid lilac glass like the game inventory */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background: linear-gradient(180deg, rgba(126, 100, 220, 0.42), rgba(86, 62, 170, 0.5)) !important;
box-shadow: inset 0 0 0 1.5px rgba(190, 160, 255, 0.4) !important;
border-radius: 9px !important;
}
/* the center column: outlined circular arrows, two soft dots beneath */
html body #trade .trade-divider,
html[data-theme="light"] body #trade .trade-divider,
html[data-theme="dark"] body #trade .trade-divider {
justify-content: center !important;
gap: 18px !important;
}
html body #trade .trade-divider-line {
width: 2px !important;
height: 54px !important;
border-radius: 999px !important;
}
html body #trade .trade-divider-line:first-of-type {
background: linear-gradient(180deg, transparent, rgba(196, 100, 255, 0.8)) !important;
}
html body #trade .trade-divider-line:last-of-type {
background: linear-gradient(180deg, rgba(90, 220, 255, 0.8), transparent) !important;
}
/* dot ends on the connector lines */
html body #trade .trade-divider-line:first-of-type::before,
html body #trade .trade-divider-line:last-of-type::after {
content: "" !important;
display: block !important;
width: 11px !important;
height: 11px !important;
margin-inline-start: -4.5px !important;
border-radius: 50% !important;
background: currentColor !important;
}
html body #trade .trade-divider-line:first-of-type::before {
background: rgb(196, 100, 255) !important;
box-shadow: 0 0 12px rgba(196, 100, 255, 0.8) !important;
margin-bottom: -6px !important;
}
html body #trade .trade-divider-line:last-of-type::after {
background: rgb(90, 220, 255) !important;
box-shadow: 0 0 12px rgba(90, 220, 255, 0.8) !important;
margin-top: -6px !important;
}
/* swap glyph larger and softer, matching the game line-art */
html body #trade .swap-button svg {
width: 86px !important;
height: 86px !important;
opacity: 0.85 !important;
}
/* verdict becomes dark glass instead of the cream card */
html body #trade .verdict-inner,
html[data-theme="light"] body #trade .verdict-inner,
html[data-theme="dark"] body #trade .verdict-inner {
background: linear-gradient(180deg, rgba(30, 24, 66, 0.72), rgba(20, 16, 48, 0.8)) !important;
box-shadow: inset 0 0 0 1.5px rgba(150, 120, 255, 0.28) !important;
color: #e7ecff !important;
}
html body #trade .verdict-copy p {
color: rgba(190, 200, 235, 0.7) !important;
}
/* part 353 - the verdict/score panel was still the cream card because the
app swaps its class to plain ".verdict" at runtime; theme it as dark glass
so the whole trade board reads as one in-game screen */
html body #trade .verdict,
html body #trade-verdict,
html[data-theme="light"] body #trade .verdict,
html[data-theme="dark"] body #trade .verdict,
html[data-theme="light"] body #trade-verdict,
html[data-theme="dark"] body #trade-verdict {
background: linear-gradient(180deg, rgba(34, 26, 76, 0.85), rgba(22, 17, 52, 0.9)) !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: inset 0 0 0 1.5px rgba(158, 126, 255, 0.32), 0 18px 44px -20px rgba(0, 0, 0, 0.7) !important;
color: #e9eeff !important;
}
html body #trade .verdict strong,
html body #trade .verdict b,
html[data-theme="light"] body #trade .verdict strong,
html[data-theme="dark"] body #trade .verdict strong {
color: #ffe08a !important;
}
html body #trade .verdict p,
html[data-theme="light"] body #trade .verdict p,
html[data-theme="dark"] body #trade .verdict p {
color: rgba(196, 206, 238, 0.72) !important;
}
html body #trade .verdict .verdict-icon,
html[data-theme="light"] body #trade .verdict .verdict-icon,
html[data-theme="dark"] body #trade .verdict .verdict-icon {
color: rgba(180, 200, 255, 0.85) !important;
}
/* the little mint-pill counter row inside the verdict follows the palette */
html body #trade .verdict .score-pill,
html body #trade .verdict .mini-stat,
html[data-theme="light"] body #trade .verdict .score-pill,
html[data-theme="dark"] body #trade .verdict .score-pill {
background: rgba(120, 150, 255, 0.14) !important;
box-shadow: inset 0 0 0 1px rgba(150, 180, 255, 0.3) !important;
color: #dfe8ff !important;
}
html body #trade .verdict .trade-verdict-number,
html body #trade .verdict .score-value,
html[data-theme="light"] body #trade .verdict .trade-verdict-number,
html[data-theme="dark"] body #trade .verdict .trade-verdict-number {
color: #ffffff !important;
}
/* part 354 - literal copy of the screenshot: flat translucent slabs with a
1px light edge (no glow halos), 2x3 square slots, magenta / cyan neon
FLOOR planes at the bottom of each slab, thin vertical connector threads
with dot ends, faint diagonal lines + stars behind */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background:
repeating-linear-gradient(62deg, rgba(176, 150, 255, 0.055) 0 1px, transparent 1px 300px),
repeating-linear-gradient(-28deg, rgba(176, 150, 255, 0.035) 0 1px, transparent 1px 420px),
radial-gradient(2px 2px at 9% 30%, rgba(220, 210, 255, 0.75), transparent 70%),
radial-gradient(1.6px 1.6px at 23% 62%, rgba(220, 210, 255, 0.5), transparent 70%),
radial-gradient(1.6px 1.6px at 34% 18%, rgba(220, 210, 255, 0.45), transparent 70%),
radial-gradient(1.6px 1.6px at 58% 30%, rgba(190, 225, 255, 0.5), transparent 70%),
radial-gradient(2px 2px at 71% 66%, rgba(190, 225, 255, 0.55), transparent 70%),
radial-gradient(1.6px 1.6px at 88% 36%, rgba(220, 210, 255, 0.4), transparent 70%),
linear-gradient(180deg, #1c0b3d 0%, #24104a 40%, #2a0f52 72%, #33125e 100%) !important;
}
/* flat translucent slabs, light 1px edge, square-ish corners */
html body #trade .trade-column,
html[data-theme="light"] body #trade .trade-column,
html[data-theme="dark"] body #trade .trade-column {
border-radius: 4px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
box-shadow: inset 0 0 0 1px rgba(214, 196, 255, 0.20) !important;
border: 0 !important;
overflow: visible !important;
}
/* neon floor plane at the bottom of each slab - magenta left, cyan right */
html body #trade .trade-column::before,
html[data-theme="light"] body #trade .trade-column::before,
html[data-theme="dark"] body #trade .trade-column::before {
content: "" !important;
position: absolute !important;
inset-inline: -2px !important;
bottom: -6px !important;
height: 130px !important;
z-index: 0 !important;
pointer-events: none !important;
border-radius: 4px !important;
}
html body #trade .trade-column[data-side="offer"]::before,
html[data-theme="light"] body #trade .trade-column[data-side="offer"]::before,
html[data-theme="dark"] body #trade .trade-column[data-side="offer"]::before {
background:
radial-gradient(75% 42% at 50% 100%, rgba(206, 78, 255, 0.55), rgba(170, 50, 235, 0.22) 46%, transparent 76%),
linear-gradient(180deg, rgba(196, 92, 255, 0) 62%, rgba(196, 92, 255, 0.16) 86%, rgba(214, 120, 255, 0.38) 100%) !important;
}
html body #trade .trade-column[data-side="request"]::before,
html[data-theme="light"] body #trade .trade-column[data-side="request"]::before,
html[data-theme="dark"] body #trade .trade-column[data-side="request"]::before {
background:
radial-gradient(75% 42% at 50% 100%, rgba(64, 214, 255, 0.5), rgba(46, 150, 250, 0.2) 46%, transparent 76%),
linear-gradient(180deg, rgba(90, 220, 255, 0) 62%, rgba(90, 220, 255, 0.14) 86%, rgba(120, 230, 255, 0.34) 100%) !important;
}
html body #trade .trade-column > * {
position: relative !important;
z-index: 1 !important;
}
/* headers: plain white name like the players above the boards */
html body #trade .trade-column-head h3,
html[data-theme="light"] body #trade .trade-column-head h3,
html[data-theme="dark"] body #trade .trade-column-head h3 {
color: #ffffff !important;
font-size: 20px !important;
font-weight: 600 !important;
text-align: center !important;
}
html body #trade .trade-column-head {
justify-content: center !important;
text-align: center !important;
}
html body #trade .trade-column-head > div {
width: 100% !important;
text-align: center !important;
}
/* score in the header: small soft pill, not gold neon */
html body #trade .trade-score {
position: absolute !important;
inset-inline-end: 10px !important;
top: 10px !important;
color: rgba(255, 255, 255, 0.85) !important;
font-size: 13px !important;
text-shadow: none !important;
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 6px !important;
padding: 3px 9px !important;
}
/* search field: a single dim bar at the top of the slab */
html body #trade .search-field-small {
height: 38px !important;
border-radius: 6px !important;
background: rgba(10, 6, 28, 0.55) !important;
box-shadow: inset 0 0 0 1px rgba(214, 196, 255, 0.16) !important;
}
/* slots: flat squares, faint fill, 1px light border, 3px radius */
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
border-radius: 3px !important;
background: rgba(255, 255, 255, 0.055) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
/* filled tiles: same square language, violet fill, thin edge */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
border-radius: 3px !important;
background: linear-gradient(180deg, rgba(120, 92, 205, 0.35), rgba(96, 70, 180, 0.4)) !important;
box-shadow: inset 0 0 0 1px rgba(214, 196, 255, 0.22) !important;
}
/* connector threads: thin vertical neon lines with dots, like the screenshot */
html body #trade .trade-divider {
justify-content: flex-end !important;
padding-bottom: 10px !important;
}
html body #trade .trade-divider-line {
width: 2px !important;
height: 120px !important;
}
html body #trade .trade-divider-line:first-of-type {
background: linear-gradient(180deg, rgba(196, 100, 255, 0), rgba(196, 100, 255, 0.9)) !important;
}
html body #trade .trade-divider-line:last-of-type {
background: linear-gradient(180deg, rgba(90, 220, 255, 0.9), rgba(90, 220, 255, 0)) !important;
}
html body #trade .swap-button {
background: none !important;
box-shadow: none !important;
color: rgba(196, 180, 255, 0.35) !important;
}
html body #trade .swap-button svg {
width: 92px !important;
height: 92px !important;
opacity: 1 !important;
filter: none !important;
}
/* no neon floor bar of our own - the floors are inside each slab */
html body #trade .trade-board::after {
content: none !important;
display: none !important;
}
/* part 355 - the earlier side-specific theme variants outranked part 354's
plain selectors (cascade trap), so the slabs still showed the old radial
glow and 22px radius, and the floor bar survived. Same-shape twins here. */
html body #trade .trade-column[data-side="offer"],
html[data-theme="light"] body #trade .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-column[data-side="offer"],
html body #trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-column[data-side="request"] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
box-shadow: inset 0 0 0 1px rgba(214, 196, 255, 0.20) !important;
border-radius: 4px !important;
}
html body #trade .trade-board::after,
html[data-theme="light"] body #trade .trade-board::after,
html[data-theme="dark"] body #trade .trade-board::after {
content: none !important;
display: none !important;
}
/* part 356 - true square geometry like the game board: the slots were
stretching into 170x95 rectangles because the rows were 1fr inside a
fixed min-height. Now the stage keeps a 2:3.05 board proportion, every
slot is a real square, and the filled tiles use the same squares. */
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
max-width: 820px !important;
margin-inline: auto !important;
grid-template-columns: 1fr 64px 1fr !important;
}
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
min-height: 0 !important;
aspect-ratio: 2 / 3.05 !important;
}
html body #trade .trade-slots,
html[data-theme="light"] body #trade .trade-slots,
html[data-theme="dark"] body #trade .trade-slots {
grid-auto-rows: 1fr !important;
}
/* empty slot: a real square, thin border, tiny radius */
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
aspect-ratio: 1 / 1 !important;
min-height: 0 !important;
border-radius: 4px !important;
}
/* real items: same square cells */
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-list {
min-height: 0 !important;
grid-auto-rows: auto !important;
align-content: start !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
aspect-ratio: 1 / 1 !important;
min-height: 0 !important;
border-radius: 4px !important;
overflow: hidden !important;
}
html body #trade .trade-list li img,
html body #trade .trade-list li svg {
width: 74% !important;
height: 74% !important;
object-fit: contain !important;
}
/* keep the panels compact like the game boards */
html body #trade .trade-column {
padding: 14px !important;
}
html body #trade .trade-stage {
margin-top: 10px !important;
}
/* part 357 - proportion tuning to the screenshot: the boards are compact
like in-game (not 820px wide with 151px bricks), slot gaps tightened and
the center channel narrowed so the two boards read as the game's pair */
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
max-width: 660px !important;
}
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
aspect-ratio: auto !important;
}
html body #trade .trade-slots,
html body #trade .trade-list {
gap: 12px !important;
}
html body #trade .trade-column {
padding: 14px 14px 16px !important;
}
/* part 358 - the absolute slot layer collapsed the stage height (127px for
3 rows of 112px squares). Invert it: the slot grid is in normal flow and
defines the board height; the real item list overlays it exactly. */
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
position: relative !important;
min-height: 0 !important;
}
html body #trade .trade-slots,
html[data-theme="light"] body #trade .trade-slots,
html[data-theme="dark"] body #trade .trade-slots {
position: static !important;
inset: auto !important;
}
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-list {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
align-content: start !important;
grid-auto-rows: auto !important;
}
/* part 359 - the last details from the crop: ringed swap glyph with two
dots, hairline slots (1px, 2px radius), wider row gaps, the faint top
hairline across the board and the vertical neon rails at the panel feet */
/* slots: hairline edge, near-square corners, roomier rows */
html body #trade .trade-slots,
html body #trade .trade-list {
column-gap: 14px !important;
row-gap: 18px !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
border-radius: 2px !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: inset 0 0 0 1px rgba(238, 232, 255, 0.22) !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
border-radius: 2px !important;
box-shadow: inset 0 0 0 1px rgba(238, 232, 255, 0.28) !important;
}
/* the ringed glyph sits on a soft halo, with two dots beneath */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
position: relative !important;
color: rgba(206, 190, 255, 0.5) !important;
}
html body #trade .swap-button::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: -22px !important;
width: 9px !important;
height: 9px !important;
margin-left: -14px !important;
border-radius: 50% !important;
background: rgba(196, 100, 255, 0.4) !important;
box-shadow: 15px 0 0 rgba(120, 200, 255, 0.35) !important;
}
html body #trade .swap-button svg {
width: 104px !important;
height: 104px !important;
opacity: 1 !important;
}
/* faint hairline running across the top of the board */
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
position: relative !important;
}
html body #trade .trade-board::before,
html[data-theme="light"] body #trade .trade-board::before,
html[data-theme="dark"] body #trade .trade-board::before {
content: "" !important;
position: absolute !important;
inset-inline: -8% !important;
top: 8px !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(180, 160, 255, 0.18) 18%, rgba(180, 160, 255, 0.18) 82%, transparent) !important;
pointer-events: none !important;
}
/* vertical neon rails inside the panel feet (magenta left, cyan right) */
html body #trade .trade-column::after,
html[data-theme="light"] body #trade .trade-column::after,
html[data-theme="dark"] body #trade .trade-column::after {
content: "" !important;
position: absolute !important;
bottom: -4px !important;
width: 9px !important;
height: 46% !important;
z-index: 0 !important;
pointer-events: none !important;
border-radius: 3px !important;
}
html body #trade .trade-column[data-side="offer"]::after,
html[data-theme="light"] body #trade .trade-column[data-side="offer"]::after,
html[data-theme="dark"] body #trade .trade-column[data-side="offer"]::after {
left: -5px !important;
background: linear-gradient(180deg, rgba(196, 90, 255, 0), rgba(196, 90, 255, 0.55) 60%, rgba(226, 140, 255, 0.85) 100%) !important;
box-shadow: 0 0 18px rgba(196, 90, 255, 0.45) !important;
}
html body #trade .trade-column[data-side="request"]::after,
html[data-theme="light"] body #trade .trade-column[data-side="request"]::after,
html[data-theme="dark"] body #trade .trade-column[data-side="request"]::after {
right: -5px !important;
background: linear-gradient(180deg, rgba(90, 220, 255, 0), rgba(90, 220, 255, 0.5) 60%, rgba(140, 235, 255, 0.85) 100%) !important;
box-shadow: 0 0 18px rgba(90, 220, 255, 0.4) !important;
}
/* part 360 - the glyph was clipped by the old 80px button box */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
width: 118px !important;
height: 118px !important;
}
html body #trade .swap-button svg {
width: 104px !important;
height: 104px !important;
}
/* part 361 - scale up to match the crop: the glyph must be ~1.4x a slot and
the boards larger so the whole board reads like the reference */
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
max-width: 940px !important;
grid-template-columns: 1fr 200px 1fr !important;
align-items: start !important;
}
html body #trade .trade-column {
padding: 16px !important;
}
html body #trade .trade-slots,
html body #trade .trade-list {
column-gap: 16px !important;
row-gap: 20px !important;
}
/* the ringed glyph, now at reference scale */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
width: 214px !important;
height: 214px !important;
margin-inline: auto !important;
}
html body #trade .swap-button svg {
width: 196px !important;
height: 196px !important;
overflow: visible !important;
}
/* thinner strokes that still read at this size, like the reference line art */
html body #trade .swap-button svg circle,
html body #trade .swap-button svg path {
stroke-width: 0.82 !important;
vector-effect: non-scaling-stroke !important;
}
/* the divider column centers the glyph vertically against the boards */
html body #trade .trade-divider {
height: 100% !important;
justify-content: center !important;
align-items: center !important;
}
html body #trade .trade-divider-line {
flex: 1 1 auto !important;
width: 2px !important;
height: auto !important;
}
/* part 362 - the connector threads run UP from the bottom on either side of
the glyph (as in the reference), not straight through it */
html body #trade .trade-divider,
html[data-theme="light"] body #trade .trade-divider,
html[data-theme="dark"] body #trade .trade-divider {
position: relative !important;
display: block !important;
height: 100% !important;
}
html body #trade .trade-divider .swap-button {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 2 !important;
}
html body #trade .trade-divider-line {
position: absolute !important;
bottom: 0 !important;
width: 2px !important;
height: 42% !important;
flex: none !important;
margin: 0 !important;
}
html body #trade .trade-divider-line:first-of-type {
left: 58px !important;
background: linear-gradient(180deg, rgba(196, 100, 255, 0.05), rgba(196, 100, 255, 0.85)) !important;
}
html body #trade .trade-divider-line:last-of-type {
right: 58px !important;
background: linear-gradient(180deg, rgba(90, 220, 255, 0.05), rgba(90, 220, 255, 0.85)) !important;
}
html body #trade .trade-divider-line:first-of-type::before {
position: absolute !important;
bottom: -4px !important;
left: -4.5px !important;
margin: 0 !important;
}
html body #trade .trade-divider-line:last-of-type::after {
position: absolute !important;
bottom: -4px !important;
right: -4.5px !important;
margin: 0 !important;
}
/* the two dots sit just under the glyph */
html body #trade .swap-button::after {
bottom: -34px !important;
}
/* part 363 - shorten the threads so they begin below the glyph (they were
poking into its lower arc) */
html body #trade .trade-divider-line {
height: 22% !important;
}
/* part 364 - the ring is gone: the swap glyph is only the two curved arrows
with solid triangular heads, larger and soft violet like the reference */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
width: 232px !important;
height: 232px !important;
}
html body #trade .swap-button svg {
width: 212px !important;
height: 212px !important;
}
html body #trade .swap-button svg path {
vector-effect: non-scaling-stroke !important;
}
html body #trade .swap-button svg path[fill="currentColor"] {
stroke: none !important;
}
/* part 365 - light restyle of the trade section as requested: white ground,
the slot squares centred inside each panel, quiet grey hairlines, no neon */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background: #ffffff !important;
background-color: #ffffff !important;
}
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
max-width: 760px !important;
}
/* panels: light glass cards */
html body #trade .trade-column,
html[data-theme="light"] body #trade .trade-column,
html[data-theme="dark"] body #trade .trade-column {
background: #fbfbfd !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.09) !important;
border-radius: 10px !important;
}
html body #trade .trade-column[data-side="offer"]::before,
html body #trade .trade-column[data-side="request"]::before,
html body #trade .trade-column[data-side="offer"]::after,
html body #trade .trade-column[data-side="request"]::after,
html[data-theme="light"] body #trade .trade-column[data-side="offer"]::before,
html[data-theme="light"] body #trade .trade-column[data-side="request"]::before,
html[data-theme="light"] body #trade .trade-column[data-side="offer"]::after,
html[data-theme="light"] body #trade .trade-column[data-side="request"]::after,
html[data-theme="dark"] body #trade .trade-column[data-side="offer"]::before,
html[data-theme="dark"] body #trade .trade-column[data-side="request"]::before,
html[data-theme="dark"] body #trade .trade-column[data-side="offer"]::after,
html[data-theme="dark"] body #trade .trade-column[data-side="request"]::after {
content: none !important;
display: none !important;
}
/* headers + text in ink */
html body #trade .trade-column-head h3,
html[data-theme="light"] body #trade .trade-column-head h3,
html[data-theme="dark"] body #trade .trade-column-head h3 {
color: #14162b !important;
}
html body #trade .trade-score,
html[data-theme="light"] body #trade .trade-score,
html[data-theme="dark"] body #trade .trade-score {
background: rgba(20, 22, 40, 0.06) !important;
color: #2c3050 !important;
}
html body #trade .section-head h2,
html[data-theme="light"] body #trade .section-head h2,
html[data-theme="dark"] body #trade .section-head h2 {
color: #14162b !important;
}
html body #trade .section-lead,
html[data-theme="light"] body #trade .section-lead,
html[data-theme="dark"] body #trade .section-lead {
color: rgba(38, 42, 68, 0.66) !important;
}
/* search wells: light */
html body #trade .search-field-small,
html[data-theme="light"] body #trade .search-field-small,
html[data-theme="dark"] body #trade .search-field-small {
background: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.12) !important;
}
html body #trade .search-field-small input {
color: #14162b !important;
}
html body #trade .search-field-small input::placeholder {
color: rgba(38, 42, 68, 0.42) !important;
}
/* the slots: centred grid, soft grey squares */
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
display: flex !important;
justify-content: center !important;
}
html body #trade .trade-slots,
html[data-theme="light"] body #trade .trade-slots,
html[data-theme="dark"] body #trade .trade-slots {
width: 100% !important;
justify-items: center !important;
align-content: center !important;
}
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-list {
justify-items: center !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
width: 100% !important;
background: #f3f4f8 !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.10) !important;
border-radius: 4px !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
width: 100% !important;
background: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.12) !important;
}
/* swap glyph: slate ink */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
color: rgba(70, 66, 120, 0.55) !important;
}
html body #trade .trade-divider-line:first-of-type,
html body #trade .trade-divider-line:last-of-type {
background: rgba(70, 66, 120, 0.18) !important;
box-shadow: none !important;
}
html body #trade .trade-divider-line:first-of-type::before,
html body #trade .trade-divider-line:last-of-type::after {
background: rgba(70, 66, 120, 0.35) !important;
box-shadow: none !important;
}
html body #trade .swap-button::after {
background: rgba(70, 66, 120, 0.25) !important;
box-shadow: 15px 0 0 rgba(70, 66, 120, 0.18) !important;
}
/* verdict back to a light card */
html body #trade .verdict,
html[data-theme="light"] body #trade .verdict,
html[data-theme="dark"] body #trade .verdict {
background: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.10) !important;
color: #14162b !important;
}
html body #trade .verdict strong {
color: #14162b !important;
}
html body #trade .verdict p {
color: rgba(38, 42, 68, 0.6) !important;
}
/* part 366 - trim the trade section to the bare boards: no section title,
no helper texts, no verdict card; squares have no fill and are larger;
the side that is worth more gets a green overlay */
html body #trade .section-head,
html body #trade .trade-empty,
html body #trade #trade-verdict,
html body #trade .trade-summary,
html body #trade .trade-column-head .trade-score,
html[data-theme="light"] body #trade .section-head,
html[data-theme="light"] body #trade .trade-empty,
html[data-theme="light"] body #trade #trade-verdict,
html[data-theme="dark"] body #trade .section-head,
html[data-theme="dark"] body #trade .trade-empty,
html[data-theme="dark"] body #trade #trade-verdict {
display: none !important;
}
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
max-width: 940px !important;
grid-template-columns: 1fr 190px 1fr !important;
}
html body #trade .trade-column {
padding: 16px !important;
}
html body #trade .trade-slots,
html body #trade .trade-list {
column-gap: 16px !important;
row-gap: 20px !important;
}
/* no fill in the squares - only a hairline */
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
background: transparent !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.16) !important;
width: 100% !important;
}
/* bigger squares also for real items */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
width: 100% !important;
background: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.14) !important;
}
/* green overlay marking the side that is worth more */
html body #trade .trade-column.is-better::before,
html[data-theme="light"] body #trade .trade-column.is-better::before,
html[data-theme="dark"] body #trade .trade-column.is-better::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -2px !important;
border-radius: 12px !important;
background: linear-gradient(180deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.18)) !important;
box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.55), 0 0 26px rgba(34, 197, 94, 0.18) !important;
pointer-events: none !important;
z-index: 2 !important;
}
html body #trade .trade-column.is-better .trade-list li,
html[data-theme="light"] body #trade .trade-column.is-better .trade-list li,
html[data-theme="dark"] body #trade .trade-column.is-better .trade-list li {
box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45) !important;
}
/* part 367 - item art fills its square edge to edge (never small, never
spilling), and the hover X is designed: a clean round glass button with
a red ring that pops in on hover and squashes on press */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
overflow: visible !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
}
html body #trade .trade-list li .trade-item-img,
html body #trade .trade-list li img,
html[data-theme="light"] body #trade .trade-list li .trade-item-img,
html[data-theme="dark"] body #trade .trade-list li .trade-item-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
padding: 4px !important;
box-sizing: border-box !important;
display: block !important;
grid-area: 1 / 1 !important;
}
/* the remove X: designed button */
html body #trade .trade-item-remove,
html[data-theme="light"] body #trade .trade-item-remove,
html[data-theme="dark"] body #trade .trade-item-remove {
position: absolute !important;
top: 6px !important;
inset-inline-end: 6px !important;
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
border: 0 !important;
display: grid !important;
place-items: center !important;
background: rgba(255, 255, 255, 0.92) !important;
color: #c62b3a !important;
box-shadow: inset 0 0 0 1.5px rgba(198, 43, 58, 0.45), 0 3px 10px rgba(20, 22, 40, 0.18) !important;
opacity: 0 !important;
transform: scale(0.72) !important;
transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.16s ease, box-shadow 0.16s ease !important;
cursor: pointer !important;
z-index: 3 !important;
}
html body #trade .trade-item-remove svg,
html[data-theme="light"] body #trade .trade-item-remove svg,
html[data-theme="dark"] body #trade .trade-item-remove svg {
width: 13px !important;
height: 13px !important;
stroke-width: 2.1 !important;
}
html body #trade .trade-list li:hover .trade-item-remove,
html body #trade .trade-item-remove:focus-visible,
html[data-theme="light"] body #trade .trade-list li:hover .trade-item-remove,
html[data-theme="dark"] body #trade .trade-list li:hover .trade-item-remove {
opacity: 1 !important;
transform: scale(1) !important;
}
html body #trade .trade-item-remove:hover {
background: #c62b3a !important;
color: #ffffff !important;
box-shadow: inset 0 0 0 1.5px rgba(198, 43, 58, 0.9), 0 4px 14px rgba(198, 43, 58, 0.4) !important;
}
html body #trade .trade-item-remove:active {
transform: scale(0.9) !important;
transition-duration: 0.08s !important;
}
html body #trade .trade-item-remove:focus-visible {
outline: 2px solid rgba(198, 43, 58, 0.85) !important;
outline-offset: 2px !important;
}
/* part 368 - the tile's old grid template (10px column) was squeezing the
image to a sliver; force one full cell. The X gets a stronger selector
so the old 22px rule can no longer win. */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
align-items: stretch !important;
justify-items: stretch !important;
place-items: stretch !important;
}
html body #trade .trade-list li .trade-item-img,
html[data-theme="light"] body #trade .trade-list li .trade-item-img,
html[data-theme="dark"] body #trade .trade-list li .trade-item-img {
width: 100% !important;
height: 100% !important;
align-self: stretch !important;
justify-self: stretch !important;
}
html body #trade .trade-list li .trade-item-remove,
html[data-theme="light"] body #trade .trade-list li .trade-item-remove,
html[data-theme="dark"] body #trade .trade-list li .trade-item-remove {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
top: 6px !important;
inset-inline-end: 6px !important;
}
html body #trade .trade-list li .trade-item-remove svg,
html[data-theme="light"] body #trade .trade-list li .trade-item-remove svg,
html[data-theme="dark"] body #trade .trade-list li .trade-item-remove svg {
width: 14px !important;
height: 14px !important;
}
/* part 369 - the art must sit exactly inside the square: no padding, no
content-box overflow; the X loses the leftover button padding too */
html body #trade .trade-list li .trade-item-img,
html[data-theme="light"] body #trade .trade-list li .trade-item-img,
html[data-theme="dark"] body #trade .trade-list li .trade-item-img {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
html body #trade .trade-list li .trade-item-remove,
html[data-theme="light"] body #trade .trade-list li .trade-item-remove,
html[data-theme="dark"] body #trade .trade-list li .trade-item-remove {
padding: 0 !important;
box-sizing: border-box !important;
}
/* part 370 - pin the art to the tile box so it can never be smaller or
spill over, whatever the grid does inside the tile */
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
position: relative !important;
}
html body #trade .trade-list li .trade-item-img,
html[data-theme="light"] body #trade .trade-list li .trade-item-img,
html[data-theme="dark"] body #trade .trade-list li .trade-item-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 5px !important;
box-sizing: border-box !important;
object-fit: contain !important;
z-index: 1 !important;
}
html body #trade .trade-list li .trade-item-remove {
z-index: 3 !important;
}
/* part 371 - remove the two connector threads and the dots under the swap
glyph (marked for removal by the user) */
html body #trade .trade-divider-line,
html[data-theme="light"] body #trade .trade-divider-line,
html[data-theme="dark"] body #trade .trade-divider-line {
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
}
html body #trade .trade-divider-line::before,
html body #trade .trade-divider-line::after {
content: none !important;
display: none !important;
}
html body #trade .swap-button::after,
html[data-theme="light"] body #trade .swap-button::after,
html[data-theme="dark"] body #trade .swap-button::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
}
/* part 372 - the trade search: bigger, calmer, clear focus ring, a readable
result list and a proper clear button. Accessible and comfortable. */
html body #trade .trade-search,
html[data-theme="light"] body #trade .trade-search,
html[data-theme="dark"] body #trade .trade-search {
margin-top: 18px !important;
position: relative !important;
}
html body #trade .search-field-small,
html[data-theme="light"] body #trade .search-field-small,
html[data-theme="dark"] body #trade .search-field-small {
height: 56px !important;
padding: 0 16px !important;
gap: 12px !important;
border: 0 !important;
border-radius: 15px !important;
background: #ffffff !important;
color: #3b47c9 !important;
box-shadow: inset 0 0 0 1.5px rgba(20, 22, 40, 0.13), 0 1px 2px rgba(20, 22, 40, 0.05) !important;
transition: box-shadow 0.18s ease, background-color 0.18s ease !important;
}
html body #trade .search-field-small:hover,
html[data-theme="light"] body #trade .search-field-small:hover,
html[data-theme="dark"] body #trade .search-field-small:hover {
box-shadow: inset 0 0 0 1.5px rgba(20, 22, 40, 0.26), 0 2px 8px rgba(20, 22, 40, 0.07) !important;
}
html body #trade .search-field-small:focus-within,
html[data-theme="light"] body #trade .search-field-small:focus-within,
html[data-theme="dark"] body #trade .search-field-small:focus-within {
background: #ffffff !important;
box-shadow: inset 0 0 0 2px #4b5bd6, 0 0 0 4px rgba(75, 91, 214, 0.16) !important;
}
html body #trade .search-field-small input,
html[data-theme="light"] body #trade .search-field-small input,
html[data-theme="dark"] body #trade .search-field-small input {
font-size: 16px !important;
font-weight: 500 !important;
color: #14162b !important;
padding-inline-end: 30px !important;
}
html body #trade .search-field-small input::placeholder,
html[data-theme="light"] body #trade .search-field-small input::placeholder,
html[data-theme="dark"] body #trade .search-field-small input::placeholder {
color: rgba(38, 42, 68, 0.48) !important;
font-weight: 400 !important;
}
html body #trade .search-field-small .icon,
html[data-theme="light"] body #trade .search-field-small .icon,
html[data-theme="dark"] body #trade .search-field-small .icon {
width: 21px !important;
height: 21px !important;
color: #4b5bd6 !important;
opacity: 0.85 !important;
flex: none !important;
}
html body #trade .search-field-small:focus-within .icon {
opacity: 1 !important;
}
/* clear button inside the well */
html body #trade .trade-search-clear,
html[data-theme="light"] body #trade .trade-search-clear,
html[data-theme="dark"] body #trade .trade-search-clear {
position: absolute !important;
inset-inline-end: 12px !important;
top: 28px !important;
transform: translateY(-50%) !important;
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
display: grid !important;
place-items: center !important;
background: rgba(20, 22, 40, 0.06) !important;
color: rgba(38, 42, 68, 0.62) !important;
cursor: pointer !important;
z-index: 2 !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
html body #trade .trade-search-clear:hover {
background: rgba(20, 22, 40, 0.12) !important;
color: #14162b !important;
}
html body #trade .trade-search-clear:focus-visible {
outline: 2px solid #4b5bd6 !important;
outline-offset: 2px !important;
}
html body #trade .trade-search-clear[hidden] {
display: none !important;
}
html body #trade .trade-search-clear svg {
width: 13px !important;
height: 13px !important;
}
/* results: a readable light sheet */
html body #trade .autocomplete,
html[data-theme="light"] body #trade .autocomplete,
html[data-theme="dark"] body #trade .autocomplete {
top: calc(100% + 8px) !important;
padding: 6px !important;
max-height: 330px !important;
border: 0 !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.10), 0 18px 40px -16px rgba(20, 22, 40, 0.38) !important;
}
html body #trade .autocomplete-option,
html[data-theme="light"] body #trade .autocomplete-option,
html[data-theme="dark"] body #trade .autocomplete-option {
min-height: 48px !important;
padding: 8px 10px !important;
gap: 10px !important;
border-radius: 10px !important;
background: transparent !important;
color: #1b1f38 !important;
}
html body #trade .autocomplete-option:hover,
html body #trade .autocomplete-option.is-highlighted,
html[data-theme="light"] body #trade .autocomplete-option:hover,
html[data-theme="light"] body #trade .autocomplete-option.is-highlighted,
html[data-theme="dark"] body #trade .autocomplete-option:hover,
html[data-theme="dark"] body #trade .autocomplete-option.is-highlighted {
background: rgba(75, 91, 214, 0.09) !important;
color: #14162b !important;
box-shadow: inset 0 0 0 1px rgba(75, 91, 214, 0.22) !important;
}
html body #trade .autocomplete-option:focus-visible {
outline: 2px solid #4b5bd6 !important;
outline-offset: -2px !important;
}
html body #trade .autocomplete-name,
html[data-theme="light"] body #trade .autocomplete-name,
html[data-theme="dark"] body #trade .autocomplete-name {
font-size: 15px !important;
font-weight: 600 !important;
color: #1b1f38 !important;
}
html body #trade .autocomplete-meta,
html[data-theme="light"] body #trade .autocomplete-meta,
html[data-theme="dark"] body #trade .autocomplete-meta {
font-size: 11.5px !important;
color: rgba(38, 42, 68, 0.52) !important;
}
html body #trade .autocomplete-thumb,
html[data-theme="light"] body #trade .autocomplete-thumb,
html[data-theme="dark"] body #trade .autocomplete-thumb {
width: 34px !important;
height: 34px !important;
border-radius: 9px !important;
border: 0 !important;
background: #f3f4f8 !important;
}
html body #trade .autocomplete-empty,
html[data-theme="light"] body #trade .autocomplete-empty,
html[data-theme="dark"] body #trade .autocomplete-empty {
padding: 16px 12px !important;
font-size: 14px !important;
color: rgba(38, 42, 68, 0.62) !important;
text-align: center !important;
}
/* part 373 - the trade board in the reference style: one continuous grid of
deep blue cells divided by thin light-blue lines, wrapped in a blue rim */
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
padding: 0 !important;
border-radius: 6px !important;
background: #4a7ea9 !important;
box-shadow:
0 0 0 3px #2e7cbb,
0 0 0 5px rgba(46, 124, 187, 0.32),
0 16px 36px -20px rgba(18, 42, 70, 0.6) !important;
overflow: hidden !important;
}
html body #trade .trade-slots,
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-slots,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-slots,
html[data-theme="dark"] body #trade .trade-list {
column-gap: 2px !important;
row-gap: 2px !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
background: #1d3a56 !important;
border-radius: 0 !important;
box-shadow:
inset 0 1px 0 rgba(190, 225, 255, 0.10),
inset 0 0 14px rgba(6, 20, 36, 0.18) !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background: #1d3a56 !important;
border-radius: 0 !important;
box-shadow:
inset 0 1px 0 rgba(190, 225, 255, 0.12),
inset 0 0 0 1px rgba(110, 165, 210, 0.18) !important;
}
/* part 374 - the board colour was flat and looked dead. Give it depth:
a lit top edge, a cool gradient per cell, luminous grid lines and a
layered azure rim with a soft ambient glow. */
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
background:
linear-gradient(180deg, #5b93c4 0%, #44779f 52%, #3a6a90 100%) !important;
box-shadow:
0 0 0 3px #2f81c6,
0 0 0 5px rgba(47, 129, 198, 0.28),
0 10px 22px -14px rgba(10, 30, 55, 0.65),
0 0 44px -14px rgba(56, 148, 222, 0.45) !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
background-color: #1c3f60 !important;
background-image:
radial-gradient(130% 110% at 0% 0%, rgba(126, 186, 240, 0.16), rgba(126, 186, 240, 0) 58%),
linear-gradient(158deg, #22486b 0%, #1b3b5a 46%, #16324d 100%) !important;
box-shadow:
inset 0 1px 0 rgba(190, 224, 252, 0.20),
inset 1px 0 0 rgba(190, 224, 252, 0.08),
inset 0 -1px 0 rgba(4, 16, 30, 0.38),
inset 0 0 20px rgba(6, 22, 40, 0.24) !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background-color: #1f4467 !important;
background-image:
radial-gradient(130% 110% at 0% 0%, rgba(140, 198, 250, 0.20), rgba(140, 198, 250, 0) 60%),
linear-gradient(158deg, #26537a 0%, #1d4262 50%, #173450 100%) !important;
box-shadow:
inset 0 1px 0 rgba(200, 230, 255, 0.22),
inset 0 0 0 1px rgba(120, 176, 224, 0.16),
inset 0 -1px 0 rgba(4, 16, 30, 0.40) !important;
}
/* part 375 - back to the white squares: no blue board, no frame, plain
white cells with a quiet hairline, like before */
html body #trade .trade-stage,
html[data-theme="light"] body #trade .trade-stage,
html[data-theme="dark"] body #trade .trade-stage {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
html body #trade .trade-slots,
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-slots,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-slots,
html[data-theme="dark"] body #trade .trade-list {
column-gap: 16px !important;
row-gap: 20px !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
background: transparent !important;
background-image: none !important;
border-radius: 4px !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.16) !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background: #ffffff !important;
background-image: none !important;
border-radius: 4px !important;
box-shadow: inset 0 0 0 1px rgba(20, 22, 40, 0.14) !important;
}
/* part 376 - the swap glyph, redrawn after the game icon: two thick neon
crescent arrows, one magenta and one cyan, glowing on the white ground */
html body #trade .swap-button,
html[data-theme="light"] body #trade .swap-button,
html[data-theme="dark"] body #trade .swap-button {
width: 232px !important;
height: 232px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: grid !important;
place-items: center !important;
cursor: pointer !important;
}
html body #trade .swap-button svg,
html[data-theme="light"] body #trade .swap-button svg,
html[data-theme="dark"] body #trade .swap-button svg {
width: 196px !important;
height: 196px !important;
overflow: visible !important;
transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}
html body #trade .swap-button svg path.swap-arc {
vector-effect: none !important;
fill: none !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #trade .swap-button svg path.swap-arc-mag {
filter: drop-shadow(0 0 4px rgba(255, 60, 240, 0.75)) drop-shadow(0 0 14px rgba(176, 30, 216, 0.45)) !important;
}
html body #trade .swap-button svg path.swap-arc-cyan {
filter: drop-shadow(0 0 4px rgba(108, 232, 255, 0.8)) drop-shadow(0 0 14px rgba(46, 201, 245, 0.45)) !important;
}
html body #trade .swap-button:hover svg,
html[data-theme="light"] body #trade .swap-button:hover svg,
html[data-theme="dark"] body #trade .swap-button:hover svg {
transform: scale(1.045) !important;
}
html body #trade .swap-button:hover svg path.swap-arc-mag {
filter: drop-shadow(0 0 6px rgba(255, 60, 240, 0.9)) drop-shadow(0 0 22px rgba(176, 30, 216, 0.6)) !important;
}
html body #trade .swap-button:hover svg path.swap-arc-cyan {
filter: drop-shadow(0 0 6px rgba(108, 232, 255, 0.95)) drop-shadow(0 0 22px rgba(46, 201, 245, 0.6)) !important;
}
html body #trade .swap-button:focus-visible {
outline: 2px solid #4b5bd6 !important;
outline-offset: 6px !important;
border-radius: 50% !important;
}
html body #trade .swap-button:active svg {
transform: scale(0.97) rotate(-8deg) !important;
}
/* part 377 - the item list kept the old 16px top margin and 2px padding, so
filled tiles sat lower and narrower than their empty cell. Reset them so a
filled tile lands exactly on its square. */
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-list {
margin: 0 !important;
padding: 0 !important;
inset: 0 !important;
}
/* part 378 - remove the centre swap glyph and the per-item X button */
html body #trade .trade-divider,
html[data-theme="light"] body #trade .trade-divider,
html[data-theme="dark"] body #trade .trade-divider {
display: none !important;
}
html body #trade .trade-item-remove,
html body #trade .trade-list li .trade-item-remove,
html[data-theme="light"] body #trade .trade-item-remove,
html[data-theme="light"] body #trade .trade-list li .trade-item-remove,
html[data-theme="dark"] body #trade .trade-item-remove,
html[data-theme="dark"] body #trade .trade-list li .trade-item-remove {
display: none !important;
}
/* part 379 - the trade section in the reference design language: a dark
exchange card, equal-sized sides, deep purple "receive" panel, soft glass
search wells, large rounded grid cells and a circular dark action button */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
background-color: #080a10 !important;
background-image:
radial-gradient(900px 420px at 80% 82%, rgba(24, 180, 170, 0.10), transparent 70%),
radial-gradient(760px 420px at 18% 12%, rgba(120, 60, 255, 0.10), transparent 72%) !important;
padding-block: 44px !important;
}
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
max-width: 900px !important;
margin-inline: auto !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 30px !important;
padding: 22px !important;
border-radius: 30px !important;
background-color: #0d1018 !important;
background-image:
radial-gradient(720px 360px at 88% 96%, rgba(20, 170, 165, 0.13), transparent 70%),
linear-gradient(180deg, #11141d 0%, #0b0e15 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
0 34px 70px -36px rgba(0, 0, 0, 0.85) !important;
}
/* the two sides are equal by construction */
html body #trade .trade-column,
html[data-theme="light"] body #trade .trade-column,
html[data-theme="dark"] body #trade .trade-column {
min-width: 0 !important;
width: 100% !important;
padding: 18px !important;
border-radius: 22px !important;
overflow: hidden !important;
}
html body #trade .trade-column[data-side="offer"],
html[data-theme="light"] body #trade .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-column[data-side="offer"] {
background-color: #14161f !important;
background-image: linear-gradient(180deg, #191c27 0%, #11141c 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.07),
0 18px 40px -30px rgba(0, 0, 0, 0.9) !important;
}
html body #trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-column[data-side="request"] {
background-color: #35146f !important;
background-image:
radial-gradient(520px 260px at 88% 104%, rgba(70, 220, 210, 0.12), transparent 68%),
linear-gradient(170deg, #4a1f9c 0%, #371379 58%, #2a0d63 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(196, 168, 255, 0.26),
0 22px 44px -30px rgba(90, 40, 210, 0.85) !important;
}
/* search wells: dark glass pills */
html body #trade .search-field-small,
html[data-theme="light"] body #trade .search-field-small,
html[data-theme="dark"] body #trade .search-field-small {
height: 58px !important;
border-radius: 16px !important;
background: #171a24 !important;
color: #a9b4ff !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}
html body #trade .trade-column[data-side="request"] .search-field-small,
html[data-theme="light"] body #trade .trade-column[data-side="request"] .search-field-small,
html[data-theme="dark"] body #trade .trade-column[data-side="request"] .search-field-small {
background: rgba(0, 0, 0, 0.26) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
html body #trade .search-field-small:hover,
html[data-theme="light"] body #trade .search-field-small:hover,
html[data-theme="dark"] body #trade .search-field-small:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20), 0 0 0 3px rgba(139, 92, 246, 0.10) !important;
}
html body #trade .search-field-small:focus-within,
html[data-theme="light"] body #trade .search-field-small:focus-within,
html[data-theme="dark"] body #trade .search-field-small:focus-within {
background: #171a24 !important;
box-shadow: inset 0 0 0 2px #8b5cf6, 0 0 0 4px rgba(139, 92, 246, 0.20) !important;
}
html body #trade .trade-column[data-side="request"] .search-field-small:focus-within {
background: rgba(0, 0, 0, 0.26) !important;
}
html body #trade .search-field-small input,
html[data-theme="light"] body #trade .search-field-small input,
html[data-theme="dark"] body #trade .search-field-small input {
color: #f3f5ff !important;
font-size: 16px !important;
}
html body #trade .search-field-small input::placeholder,
html[data-theme="light"] body #trade .search-field-small input::placeholder,
html[data-theme="dark"] body #trade .search-field-small input::placeholder {
color: rgba(215, 222, 255, 0.44) !important;
}
html body #trade .search-field-small .icon,
html[data-theme="light"] body #trade .search-field-small .icon,
html[data-theme="dark"] body #trade .search-field-small .icon {
color: #9d8bff !important;
opacity: 1 !important;
}
html body #trade .trade-column[data-side="request"] .search-field-small .icon {
color: #d9ccff !important;
}
html body #trade .trade-search-clear,
html[data-theme="light"] body #trade .trade-search-clear,
html[data-theme="dark"] body #trade .trade-search-clear {
background: rgba(255, 255, 255, 0.09) !important;
color: rgba(230, 234, 255, 0.78) !important;
}
html body #trade .trade-search-clear:hover {
background: rgba(255, 255, 255, 0.18) !important;
color: #ffffff !important;
}
/* the grid: equal cells, large rounded glass tiles */
html body #trade .trade-slots,
html body #trade .trade-list,
html[data-theme="light"] body #trade .trade-slots,
html[data-theme="light"] body #trade .trade-list,
html[data-theme="dark"] body #trade .trade-slots,
html[data-theme="dark"] body #trade .trade-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 14px !important;
row-gap: 14px !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
background: rgba(255, 255, 255, 0.035) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
border-radius: 14px !important;
}
html body #trade .trade-column[data-side="request"] .trade-slots span {
background: rgba(255, 255, 255, 0.07) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
background: #1a1e2a !important;
border-radius: 14px !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}
html body #trade .trade-column[data-side="request"] .trade-list li {
background: rgba(255, 255, 255, 0.10) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}
/* green "worth more" overlay tuned for the dark card */
html body #trade .trade-column.is-better::before,
html[data-theme="light"] body #trade .trade-column.is-better::before,
html[data-theme="dark"] body #trade .trade-column.is-better::before {
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.20)) !important;
box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.65), 0 0 30px rgba(34, 197, 94, 0.22) !important;
}
/* autocomplete in the dark card */
html body #trade .autocomplete,
html[data-theme="light"] body #trade .autocomplete,
html[data-theme="dark"] body #trade .autocomplete {
background: #171a25 !important;
border-radius: 16px !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
0 24px 50px -20px rgba(0, 0, 0, 0.9) !important;
}
html body #trade .autocomplete-option,
html[data-theme="light"] body #trade .autocomplete-option,
html[data-theme="dark"] body #trade .autocomplete-option {
color: #e6eaff !important;
}
html body #trade .autocomplete-option:hover,
html body #trade .autocomplete-option.is-highlighted,
html[data-theme="light"] body #trade .autocomplete-option:hover,
html[data-theme="light"] body #trade .autocomplete-option.is-highlighted,
html[data-theme="dark"] body #trade .autocomplete-option:hover,
html[data-theme="dark"] body #trade .autocomplete-option.is-highlighted {
background: rgba(139, 92, 246, 0.24) !important;
color: #ffffff !important;
box-shadow: inset 0 0 0 1px rgba(160, 130, 255, 0.35) !important;
}
html body #trade .autocomplete-name,
html[data-theme="light"] body #trade .autocomplete-name,
html[data-theme="dark"] body #trade .autocomplete-name {
color: #f1f3ff !important;
}
html body #trade .autocomplete-meta,
html[data-theme="light"] body #trade .autocomplete-meta,
html[data-theme="dark"] body #trade .autocomplete-meta {
color: rgba(215, 222, 255, 0.48) !important;
}
html body #trade .autocomplete-thumb,
html[data-theme="light"] body #trade .autocomplete-thumb,
html[data-theme="dark"] body #trade .autocomplete-thumb {
background: rgba(255, 255, 255, 0.07) !important;
}
html body #trade .autocomplete-empty,
html[data-theme="light"] body #trade .autocomplete-empty,
html[data-theme="dark"] body #trade .autocomplete-empty {
color: rgba(215, 222, 255, 0.62) !important;
}
/* the action button: circular dark glass, like the reference's pill */
html body #trade .trade-clear-button,
html[data-theme="light"] body #trade .trade-clear-button,
html[data-theme="dark"] body #trade .trade-clear-button {
width: 62px !important;
height: 62px !important;
border-radius: 50% !important;
background: #171a24 !important;
color: #cfd6ff !important;
border: 0 !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 16px 34px -16px rgba(0, 0, 0, 0.9) !important;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}
html body #trade .trade-clear-button svg {
width: 20px !important;
height: 20px !important;
}
html body #trade .trade-clear-button:hover,
html[data-theme="light"] body #trade .trade-clear-button:hover,
html[data-theme="dark"] body #trade .trade-clear-button:hover {
background: #4a1f9c !important;
color: #ffffff !important;
box-shadow:
inset 0 0 0 1px rgba(196, 168, 255, 0.35),
0 16px 34px -14px rgba(90, 40, 210, 0.8) !important;
filter: none !important;
}
html body #trade .trade-actions,
html[data-theme="light"] body #trade .trade-actions,
html[data-theme="dark"] body #trade .trade-actions {
margin-top: 22px !important;
padding-bottom: 4px !important;
}
/* part 380 - contrast pass on the dark exchange card: lift the slate panel,
make every cell edge readable, add a top highlight to the card and panels */
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
border-radius: 32px !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 34px 70px -36px rgba(0, 0, 0, 0.9) !important;
}
html body #trade .trade-column[data-side="offer"],
html[data-theme="light"] body #trade .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-column[data-side="offer"] {
background-image:
radial-gradient(420px 240px at 10% 0%, rgba(120, 140, 255, 0.10), transparent 70%),
linear-gradient(180deg, #1b1f2c 0%, #141722 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 18px 40px -30px rgba(0, 0, 0, 0.9) !important;
}
html body #trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-column[data-side="request"] {
box-shadow:
inset 0 0 0 1px rgba(200, 172, 255, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 22px 44px -28px rgba(90, 40, 210, 0.9) !important;
}
html body #trade .trade-slots span,
html[data-theme="light"] body #trade .trade-slots span,
html[data-theme="dark"] body #trade .trade-slots span {
background: rgba(255, 255, 255, 0.05) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html body #trade .trade-column[data-side="request"] .trade-slots span {
background: rgba(255, 255, 255, 0.09) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
html body #trade .trade-list li,
html[data-theme="light"] body #trade .trade-list li,
html[data-theme="dark"] body #trade .trade-list li {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
/* part 381 - the side panels kept a 4px radius from an older, more specific
rule; force the soft 22px corners on both sides */
html body #trade .trade-board .trade-column[data-side="offer"],
html body #trade .trade-board .trade-column[data-side="request"],
html[data-theme="light"] body #trade .trade-board .trade-column[data-side="offer"],
html[data-theme="light"] body #trade .trade-board .trade-column[data-side="request"],
html[data-theme="dark"] body #trade .trade-board .trade-column[data-side="offer"],
html[data-theme="dark"] body #trade .trade-board .trade-column[data-side="request"] {
border-radius: 22px !important;
overflow: hidden !important;
}
/* part 382 - on narrow screens the two exchange sides stack instead of
squeezing into half-width panels */
@media (max-width: 760px) {
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 20px !important;
padding: 16px !important;
border-radius: 24px !important;
}
html body #trade .trade-column {
padding: 14px !important;
border-radius: 18px !important;
}
html body #trade .trade-slots,
html body #trade .trade-list {
column-gap: 12px !important;
row-gap: 12px !important;
}
}
/* part 383 - a proper hero for the exchange: deep blue halo, rail lines, an
eyebrow pill, a large two-line title, a subtitle, side titles and a lit
blue edge on the card - matching the reference composition */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
position: relative !important;
overflow: hidden !important;
background-color: #05070d !important;
background-image:
radial-gradient(1150px 640px at 50% -12%, rgba(44, 110, 240, 0.52) 0%, rgba(30, 82, 200, 0.22) 38%, rgba(8, 18, 46, 0) 70%),
radial-gradient(820px 520px at 10% 22%, rgba(92, 44, 205, 0.20), transparent 70%),
radial-gradient(780px 480px at 92% 84%, rgba(20, 175, 165, 0.12), transparent 72%) !important;
padding-block: 64px 72px !important;
}
/* thin rails on both edges, like the reference frame */
html body #trade::before,
html body #trade::after,
html[data-theme="light"] body #trade::before,
html[data-theme="light"] body #trade::after,
html[data-theme="dark"] body #trade::before,
html[data-theme="dark"] body #trade::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
width: 1px !important;
background: linear-gradient(180deg, rgba(150, 180, 255, 0) 0%, rgba(150, 180, 255, 0.20) 22%, rgba(150, 180, 255, 0.10) 78%, rgba(150, 180, 255, 0) 100%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
html body #trade::before { inset-inline-start: max(24px, 6vw) !important; }
html body #trade::after { inset-inline-end: max(24px, 6vw) !important; }
html body #trade > .shell,
html[data-theme="light"] body #trade > .shell,
html[data-theme="dark"] body #trade > .shell {
position: relative !important;
z-index: 1 !important;
}
/* hero copy */
html body #trade .section-head,
html[data-theme="light"] body #trade .section-head,
html[data-theme="dark"] body #trade .section-head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
max-width: 820px !important;
margin: 0 auto 34px !important;
text-align: center !important;
}
html body #trade .trade-eyebrow,
html[data-theme="light"] body #trade .trade-eyebrow,
html[data-theme="dark"] body #trade .trade-eyebrow {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 15px !important;
border-radius: 999px !important;
border: 1px solid rgba(128, 165, 255, 0.26) !important;
background: rgba(26, 40, 82, 0.42) !important;
color: #b9c9ff !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
margin-bottom: 22px !important;
}
html body #trade .trade-eyebrow-dot,
html body #trade .trade-eyebrow-arrow {
display: inline-block !important;
}
html body #trade .trade-eyebrow-dot {
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #5b8dff !important;
box-shadow: 0 0 10px 2px rgba(91, 141, 255, 0.7) !important;
}
html body #trade .trade-eyebrow-arrow {
color: rgba(185, 201, 255, 0.55) !important;
font-size: 13px !important;
line-height: 1 !important;
}
html body #trade .section-head h2,
html[data-theme="light"] body #trade .section-head h2,
html[data-theme="dark"] body #trade .section-head h2 {
margin: 0 !important;
color: #f5f8ff !important;
font-size: clamp(34px, 4.6vw, 56px) !important;
font-weight: 700 !important;
line-height: 1.04 !important;
letter-spacing: -0.025em !important;
text-wrap: balance !important;
}
html body #trade .section-head h2 span {
display: block !important;
color: #ffffff !important;
}
html body #trade .section-head .section-lead,
html[data-theme="light"] body #trade .section-head .section-lead,
html[data-theme="dark"] body #trade .section-head .section-lead {
margin: 18px 0 0 !important;
max-width: 600px !important;
color: rgba(198, 212, 255, 0.62) !important;
font-size: 16.5px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
html body #trade .section-head .section-lead strong {
color: #dfe8ff !important;
font-weight: 600 !important;
}
/* the card gets a lit blue edge and a soft halo */
html body #trade .trade-board,
html[data-theme="light"] body #trade .trade-board,
html[data-theme="dark"] body #trade .trade-board {
position: relative !important;
margin-top: 0 !important;
box-shadow:
0 0 0 1px rgba(110, 155, 255, 0.16),
0 0 100px -34px rgba(60, 125, 255, 0.45),
0 38px 80px -40px rgba(0, 0, 0, 0.95) !important;
}
html body #trade .trade-board::before,
html[data-theme="light"] body #trade .trade-board::before,
html[data-theme="dark"] body #trade .trade-board::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: -1px !important;
inset-inline: 5% !important;
height: 2px !important;
border-radius: 2px !important;
background: linear-gradient(90deg, rgba(70, 140, 255, 0) 0%, rgba(96, 165, 255, 0.95) 26%, rgba(150, 200, 255, 1) 50%, rgba(96, 165, 255, 0.95) 74%, rgba(70, 140, 255, 0) 100%) !important;
box-shadow: 0 0 22px 5px rgba(60, 130, 255, 0.4) !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* side titles, small and quiet */
html body #trade .trade-column-head,
html[data-theme="light"] body #trade .trade-column-head,
html[data-theme="dark"] body #trade .trade-column-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin: 0 0 12px !important;
padding: 0 2px !important;
}
html body #trade .trade-column-head > div,
html[data-theme="light"] body #trade .trade-column-head > div,
html[data-theme="dark"] body #trade .trade-column-head > div {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
html body #trade .trade-column-head .micro-label {
display: none !important;
}
html body #trade .trade-column-head h3,
html[data-theme="light"] body #trade .trade-column-head h3,
html[data-theme="dark"] body #trade .trade-column-head h3 {
margin: 0 !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
color: #e9efff !important;
}
html body #trade .trade-column[data-side="request"] .trade-column-head h3 {
color: #f3ecff !important;
}
html body #trade .trade-column[data-side="offer"] .trade-column-head h3::before,
html body #trade .trade-column[data-side="request"] .trade-column-head h3::before {
content: "" !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
margin-inline-end: 8px !important;
vertical-align: 2px !important;
}
html body #trade .trade-column[data-side="offer"] .trade-column-head h3::before {
background: #6f9bff !important;
box-shadow: 0 0 10px rgba(111, 155, 255, 0.8) !important;
}
html body #trade .trade-column[data-side="request"] .trade-column-head h3::before {
background: #c9a6ff !important;
box-shadow: 0 0 10px rgba(201, 166, 255, 0.8) !important;
}
html body #trade .trade-score,
html[data-theme="light"] body #trade .trade-score,
html[data-theme="dark"] body #trade .trade-score {
display: none !important;
}
/* part 384 - two older rules outranked the hero: a global h2/p colour rule
(ID inside :not) painted the title navy on the dark band, and a two-ID rule
wiped the card shadow. Both are re-stated with three IDs + !important. */
html body #trade#trade .section-head h2,
html[data-theme="light"] body #trade#trade .section-head h2,
html[data-theme="dark"] body #trade#trade .section-head h2 {
color: #f5f8ff !important;
-webkit-text-fill-color: #f5f8ff !important;
text-shadow: 0 2px 24px rgba(10, 20, 50, 0.55) !important;
}
html body #trade#trade .section-head h2 span,
html[data-theme="light"] body #trade#trade .section-head h2 span,
html[data-theme="dark"] body #trade#trade .section-head h2 span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #trade#trade .section-head .section-lead,
html[data-theme="light"] body #trade#trade .section-head .section-lead,
html[data-theme="dark"] body #trade#trade .section-head .section-lead {
color: rgba(196, 210, 255, 0.66) !important;
-webkit-text-fill-color: rgba(196, 210, 255, 0.66) !important;
}
html body #trade#trade .section-head .section-lead strong,
html[data-theme="light"] body #trade#trade .section-head .section-lead strong,
html[data-theme="dark"] body #trade#trade .section-head .section-lead strong {
color: #e2ebff !important;
-webkit-text-fill-color: #e2ebff !important;
}
html body #trade#trade #trade-board.trade-board,
html[data-theme="light"] body #trade#trade #trade-board.trade-board,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board {
box-shadow:
inset 0 0 0 1px rgba(120, 160, 255, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 0 110px -34px rgba(60, 125, 255, 0.5),
0 38px 80px -40px rgba(0, 0, 0, 0.95) !important;
}
/* part 385 - full-bleed exchange band: the tail wrapper was 26px short on the
right (and carried 112px of white padding under the card), and the card was
capped at 900px. Now the band spans the whole viewport and the card fills it */
html body .site-rails.is-tail,
html[data-theme="light"] body .site-rails.is-tail,
html[data-theme="dark"] body .site-rails.is-tail {
width: 100% !important;
max-width: none !important;
margin: -64px 0 0 !important;
padding: 0 !important;
border-inline: 0 !important;
background: #05070d !important;
overflow: visible !important;
}
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
min-height: 100svh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-block: clamp(64px, 7vw, 112px) !important;
}
html body #trade#trade::before,
html body #trade#trade::after,
html[data-theme="light"] body #trade#trade::before,
html[data-theme="light"] body #trade#trade::after,
html[data-theme="dark"] body #trade#trade::before,
html[data-theme="dark"] body #trade#trade::after {
inset-inline-start: clamp(16px, 3.4vw, 56px) !important;
inset-inline-end: auto !important;
}
html body #trade#trade::after,
html[data-theme="light"] body #trade#trade::after,
html[data-theme="dark"] body #trade#trade::after {
inset-inline-start: auto !important;
inset-inline-end: clamp(16px, 3.4vw, 56px) !important;
}
html body #trade > .shell,
html[data-theme="light"] body #trade > .shell,
html[data-theme="dark"] body #trade > .shell {
width: 100% !important;
max-width: none !important;
padding-inline: clamp(20px, 4vw, 64px) !important;
margin: 0 auto !important;
}
/* the card now uses the room it has */
html body #trade#trade #trade-board.trade-board,
html[data-theme="light"] body #trade#trade #trade-board.trade-board,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board {
width: 100% !important;
max-width: min(1300px, 100%) !important;
padding: clamp(20px, 1.8vw, 32px) !important;
column-gap: clamp(18px, 2vw, 36px) !important;
border-radius: clamp(24px, 2.2vw, 36px) !important;
}
html body #trade#trade .trade-column,
html[data-theme="light"] body #trade#trade .trade-column,
html[data-theme="dark"] body #trade#trade .trade-column {
padding: clamp(16px, 1.5vw, 26px) !important;
border-radius: clamp(18px, 1.6vw, 26px) !important;
}
html body #trade#trade .trade-column.is-better::before,
html[data-theme="light"] body #trade#trade .trade-column.is-better::before,
html[data-theme="dark"] body #trade#trade .trade-column.is-better::before {
border-radius: clamp(18px, 1.6vw, 26px) !important;
}
html body #trade#trade .trade-slots,
html body #trade#trade .trade-list,
html[data-theme="light"] body #trade#trade .trade-slots,
html[data-theme="light"] body #trade#trade .trade-list,
html[data-theme="dark"] body #trade#trade .trade-slots,
html[data-theme="dark"] body #trade#trade .trade-list {
column-gap: clamp(10px, 1vw, 18px) !important;
row-gap: clamp(10px, 1vw, 18px) !important;
}
html body #trade#trade .trade-slots span,
html body #trade#trade .trade-list li,
html[data-theme="light"] body #trade#trade .trade-slots span,
html[data-theme="light"] body #trade#trade .trade-list li,
html[data-theme="dark"] body #trade#trade .trade-slots span,
html[data-theme="dark"] body #trade#trade .trade-list li {
border-radius: clamp(12px, 1.1vw, 20px) !important;
}
/* roomier hero on the full-bleed band */
html body #trade#trade .section-head,
html[data-theme="light"] body #trade#trade .section-head,
html[data-theme="dark"] body #trade#trade .section-head {
max-width: 900px !important;
margin-bottom: clamp(26px, 3vw, 48px) !important;
}
html body #trade#trade .section-head h2,
html[data-theme="light"] body #trade#trade .section-head h2,
html[data-theme="dark"] body #trade#trade .section-head h2 {
font-size: clamp(36px, 4.4vw, 66px) !important;
}
html body #trade#trade .section-head .section-lead,
html[data-theme="light"] body #trade#trade .section-head .section-lead,
html[data-theme="dark"] body #trade#trade .section-head .section-lead {
max-width: 640px !important;
font-size: clamp(16px, 1.25vw, 19px) !important;
}
/* below 860px the two sides stack again and the band releases its 100svh */
@media (max-width: 860px) {
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
min-height: 0 !important;
padding-block: 56px 64px !important;
}
html body #trade#trade #trade-board.trade-board,
html[data-theme="light"] body #trade#trade #trade-board.trade-board,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board {
max-width: 100% !important;
row-gap: 18px !important;
}
}
/* part 386 - let the card use even more room on wide screens and keep the
subtitle on two even lines instead of a one-word orphan */
html body #trade#trade #trade-board.trade-board,
html[data-theme="light"] body #trade#trade #trade-board.trade-board,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board {
max-width: min(1460px, 100%) !important;
}
html body #trade#trade .section-head .section-lead,
html[data-theme="light"] body #trade#trade .section-head .section-lead,
html[data-theme="dark"] body #trade#trade .section-head .section-lead {
max-width: 720px !important;
text-wrap: pretty !important;
}
/* part 387 - the side titles were still painted navy by the global h3 rule,
and the placeholders were too faint on the dark wells */
html body #trade#trade .trade-column-head h3,
html[data-theme="light"] body #trade#trade .trade-column-head h3,
html[data-theme="dark"] body #trade#trade .trade-column-head h3 {
color: #eef3ff !important;
-webkit-text-fill-color: #eef3ff !important;
font-size: clamp(14px, 1.05vw, 16px) !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
}
html body #trade#trade .trade-column[data-side="request"] .trade-column-head h3,
html[data-theme="light"] body #trade#trade .trade-column[data-side="request"] .trade-column-head h3,
html[data-theme="dark"] body #trade#trade .trade-column[data-side="request"] .trade-column-head h3 {
color: #f7f1ff !important;
-webkit-text-fill-color: #f7f1ff !important;
}
html body #trade#trade .search-field-small input::placeholder,
html[data-theme="light"] body #trade#trade .search-field-small input::placeholder,
html[data-theme="dark"] body #trade#trade .search-field-small input::placeholder {
color: rgba(222, 230, 255, 0.58) !important;
-webkit-text-fill-color: rgba(222, 230, 255, 0.58) !important;
}
/* deepen the violet a touch so both sides feel equally weighted */
html body #trade#trade .trade-column[data-side="request"],
html[data-theme="light"] body #trade#trade .trade-column[data-side="request"],
html[data-theme="dark"] body #trade#trade .trade-column[data-side="request"] {
background-image:
radial-gradient(560px 300px at 88% 104%, rgba(70, 220, 210, 0.10), transparent 68%),
linear-gradient(168deg, #431b8f 0%, #32116c 58%, #260b58 100%) !important;
}
/* part 388 - the tail wrapper overlaps the previous section by 64px, so the
band's top padding must add that back or the hero sits on the seam */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
padding-top: calc(64px + clamp(64px, 7vw, 112px)) !important;
padding-bottom: clamp(64px, 7vw, 112px) !important;
}
@media (max-width: 860px) {
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
padding-top: calc(64px + 56px) !important;
padding-bottom: 64px !important;
}
}
/* part 389 - full-bleed band that swallows the previous section's rounded
corners, a wider stage, dynamic green/gray comparison glass, a dark footer
and no clear (trash) control */
html body .site-rails.is-tail,
html[data-theme="light"] body .site-rails.is-tail,
html[data-theme="dark"] body .site-rails.is-tail {
margin-top: -176px !important;
}
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
padding-top: calc(176px + clamp(56px, 6vw, 104px)) !important;
}
html body #trade > .shell,
html[data-theme="light"] body #trade > .shell,
html[data-theme="dark"] body #trade > .shell {
padding-inline: clamp(14px, 2.6vw, 48px) !important;
}
html body #trade#trade #trade-board.trade-board,
html[data-theme="light"] body #trade#trade #trade-board.trade-board,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board {
max-width: min(1640px, 100%) !important;
}
/* the cleared control is gone from the markup; keep the block hidden for safety */
html body #trade .trade-actions,
html body #trade #trade-actions,
html body .trade-actions {
display: none !important;
}
/* ---- dynamic comparison: winning side = green glass ------------------- */
html body #trade#trade #trade-board.trade-board .trade-column.is-better,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-better,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-better {
background-color: rgba(16, 42, 33, 0.78) !important;
background-image:
radial-gradient(560px 340px at 18% 0%, rgba(74, 222, 128, 0.22), transparent 68%),
radial-gradient(520px 380px at 88% 108%, rgba(16, 185, 129, 0.18), transparent 70%),
linear-gradient(158deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.05) 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(94, 234, 148, 0.52),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 26px 60px -26px rgba(34, 197, 94, 0.55) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-better::before,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-better::before,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-better::before {
border-radius: clamp(18px, 1.6vw, 26px) !important;
background:
linear-gradient(180deg, rgba(34, 197, 94, 0.16) 0%, rgba(34, 197, 94, 0.06) 46%, rgba(34, 197, 94, 0.20) 100%) !important;
box-shadow:
inset 0 0 0 2px rgba(74, 222, 128, 0.65),
inset 0 0 44px rgba(34, 197, 94, 0.20),
0 0 34px rgba(34, 197, 94, 0.18) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-slots span,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-slots span,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-slots span {
background: rgba(74, 222, 128, 0.07) !important;
box-shadow:
inset 0 0 0 1px rgba(110, 240, 165, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-list li,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-list li,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-list li {
background: rgba(20, 60, 44, 0.72) !important;
box-shadow:
inset 0 0 0 1px rgba(110, 240, 165, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-column-head h3,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-column-head h3,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-better .trade-column-head h3 {
color: #dcffe9 !important;
-webkit-text-fill-color: #dcffe9 !important;
}
/* ---- dynamic comparison: the other side = muted gray glass ------------ */
html body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better),
html[data-theme="light"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better),
html[data-theme="dark"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) {
background-color: #14161d !important;
background-image:
radial-gradient(520px 300px at 12% 0%, rgba(148, 163, 184, 0.08), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better)::before,
html[data-theme="light"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better)::before,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better)::before {
border-radius: clamp(18px, 1.6vw, 26px) !important;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.07) 0%, rgba(100, 116, 139, 0.12) 100%) !important;
box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.14) !important;
}
html body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) .trade-slots span,
html[data-theme="light"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) .trade-slots span,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) .trade-slots span {
background: rgba(255, 255, 255, 0.03) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}
html body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) .trade-column-head h3,
html[data-theme="light"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) .trade-column-head h3,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better) .trade-column-head h3 {
color: rgba(206, 216, 233, 0.72) !important;
-webkit-text-fill-color: rgba(206, 216, 233, 0.72) !important;
}
/* ---- the footer joins the dark band ---------------------------------- */
html body .site-footer,
html[data-theme="light"] body .site-footer,
html[data-theme="dark"] body .site-footer {
width: 100% !important;
border-radius: 0 !important;
background-color: #05070d !important;
background-image:
radial-gradient(1100px 520px at 50% 120%, rgba(30, 82, 200, 0.18), transparent 70%),
linear-gradient(180deg, #05070d 0%, #070a12 100%) !important;
border-inline: 0 !important;
border-top: 1px solid rgba(120, 160, 255, 0.14) !important;
color: rgba(196, 210, 235, 0.70) !important;
margin-top: 0 !important;
}
html body .site-footer .footer-cols,
html body .site-footer .footer-bottom,
html body .site-footer .footer-col {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
html body .site-footer h4,
html body .site-footer .footer-brand strong,
html body .site-footer .brand-text strong {
color: #f2f6ff !important;
-webkit-text-fill-color: #f2f6ff !important;
}
html body .site-footer a,
html body .site-footer button {
color: #b7caf0 !important;
}
html body .site-footer a:hover,
html body .site-footer button:hover {
color: #ffffff !important;
}
html body .site-footer .footer-brand p,
html body .site-footer .footer-col span,
html body .site-footer .footer-bottom,
html body .site-footer .footer-bottom span {
color: rgba(178, 196, 226, 0.62) !important;
}
html body .site-footer .mono,
html body .site-footer .footer-bottom .mono {
color: #9fc0ff !important;
}
html body .site-footer .footer-flare i::before,
html body .site-footer .footer-flare i::after,
html[data-theme="light"] body .site-footer .footer-flare i::before,
html[data-theme="light"] body .site-footer .footer-flare i::after,
html[data-theme="dark"] body .site-footer .footer-flare i::before,
html[data-theme="dark"] body .site-footer .footer-flare i::after {
background: #05070d !important;
}
html body .site-footer .site-wave .wave-back {
opacity: 0.07 !important;
}
html body .site-footer .site-wave .wave-front {
opacity: 0.1 !important;
}
/* part 390 - the global "any link" rule (two IDs inside :not) outranked the
footer link colour; match it with the footer's own id */
html body #site-footer#site-footer a,
html body #site-footer#site-footer button,
html[data-theme="light"] body #site-footer#site-footer a,
html[data-theme="light"] body #site-footer#site-footer button,
html[data-theme="dark"] body #site-footer#site-footer a,
html[data-theme="dark"] body #site-footer#site-footer button {
color: #b7caf0 !important;
-webkit-text-fill-color: #b7caf0 !important;
}
html body #site-footer#site-footer a:hover,
html body #site-footer#site-footer button:hover,
html[data-theme="light"] body #site-footer#site-footer a:hover,
html[data-theme="light"] body #site-footer#site-footer button:hover,
html[data-theme="dark"] body #site-footer#site-footer a:hover,
html[data-theme="dark"] body #site-footer#site-footer button:hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #site-footer#site-footer .footer-bottom a,
html body #site-footer#site-footer .brand,
html[data-theme="light"] body #site-footer#site-footer .footer-bottom a,
html[data-theme="dark"] body #site-footer#site-footer .footer-bottom a {
color: #cfdcf6 !important;
-webkit-text-fill-color: #cfdcf6 !important;
}
/* part 391 - compact pass: 3x2 stage, tighter hero and band, no side titles,
click-to-remove tiles and a proper glass autocomplete */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
min-height: 0 !important;
padding-top: calc(176px + clamp(44px, 4.4vw, 76px)) !important;
padding-bottom: clamp(44px, 4.4vw, 76px) !important;
}
html body #trade > .shell,
html[data-theme="light"] body #trade > .shell,
html[data-theme="dark"] body #trade > .shell {
padding-inline: clamp(14px, 2.4vw, 40px) !important;
}
html body #trade#trade #trade-board.trade-board,
html[data-theme="light"] body #trade#trade #trade-board.trade-board,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board {
max-width: min(1240px, 100%) !important;
padding: clamp(14px, 1.4vw, 24px) !important;
column-gap: clamp(14px, 1.6vw, 26px) !important;
}
html body #trade#trade .trade-column,
html[data-theme="light"] body #trade#trade .trade-column,
html[data-theme="dark"] body #trade#trade .trade-column {
padding: clamp(12px, 1.05vw, 18px) !important;
overflow: visible !important;
}
/* the stage clips its own tiles, the column must not clip the autocomplete */
html body #trade#trade .trade-stage,
html[data-theme="light"] body #trade#trade .trade-stage,
html[data-theme="dark"] body #trade#trade .trade-stage {
overflow: hidden !important;
border-radius: clamp(12px, 1vw, 16px) !important;
}
html body #trade#trade .trade-slots,
html body #trade#trade .trade-list,
html[data-theme="light"] body #trade#trade .trade-slots,
html[data-theme="light"] body #trade#trade .trade-list,
html[data-theme="dark"] body #trade#trade .trade-slots,
html[data-theme="dark"] body #trade#trade .trade-list {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: clamp(7px, 0.7vw, 12px) !important;
row-gap: clamp(7px, 0.7vw, 12px) !important;
}
html body #trade#trade .trade-slots span,
html body #trade#trade .trade-list li,
html[data-theme="light"] body #trade#trade .trade-slots span,
html[data-theme="light"] body #trade#trade .trade-list li,
html[data-theme="dark"] body #trade#trade .trade-slots span,
html[data-theme="dark"] body #trade#trade .trade-list li {
border-radius: clamp(10px, 0.85vw, 15px) !important;
}
/* hero tightened so the band reads shorter */
html body #trade#trade .section-head,
html[data-theme="light"] body #trade#trade .section-head,
html[data-theme="dark"] body #trade#trade .section-head {
max-width: 860px !important;
margin-bottom: clamp(18px, 1.9vw, 30px) !important;
}
html body #trade#trade .section-head h2,
html[data-theme="light"] body #trade#trade .section-head h2,
html[data-theme="dark"] body #trade#trade .section-head h2 {
font-size: clamp(30px, 3.4vw, 50px) !important;
}
html body #trade#trade .section-head .section-lead,
html[data-theme="light"] body #trade#trade .section-head .section-lead,
html[data-theme="dark"] body #trade#trade .section-head .section-lead {
max-width: 660px !important;
font-size: clamp(15px, 1.05vw, 17px) !important;
margin-top: 14px !important;
}
html body #trade .trade-eyebrow {
margin-bottom: 16px !important;
}
/* clicking a tile removes it */
html body #trade#trade .trade-list li,
html[data-theme="light"] body #trade#trade .trade-list li,
html[data-theme="dark"] body #trade#trade .trade-list li {
cursor: pointer !important;
transition: box-shadow 0.16s ease, background-color 0.16s ease !important;
}
html body #trade#trade .trade-list li:hover,
html[data-theme="light"] body #trade#trade .trade-list li:hover,
html[data-theme="dark"] body #trade#trade .trade-list li:hover {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 10px 24px -14px rgba(0, 0, 0, 0.8) !important;
}
html body #trade#trade .trade-list li:focus-visible,
html[data-theme="light"] body #trade#trade .trade-list li:focus-visible,
html[data-theme="dark"] body #trade#trade .trade-list li:focus-visible {
outline: 2px solid #8b5cf6 !important;
outline-offset: 2px !important;
}
/* ---- glass autocomplete ---------------------------------------------- */
html body #trade#trade .trade-search,
html[data-theme="light"] body #trade#trade .trade-search,
html[data-theme="dark"] body #trade#trade .trade-search {
position: relative !important;
z-index: 45 !important;
}
html body #trade#trade .autocomplete,
html[data-theme="light"] body #trade#trade .autocomplete,
html[data-theme="dark"] body #trade#trade .autocomplete {
z-index: 90 !important;
margin-top: 8px !important;
padding: 8px !important;
max-height: min(48vh, 372px) !important;
border: 1px solid rgba(150, 172, 255, 0.22) !important;
border-radius: 18px !important;
background-color: rgba(17, 20, 30, 0.97) !important;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 46%, rgba(120, 90, 255, 0.06) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 30px 70px -26px rgba(0, 0, 0, 0.98),
0 0 44px -16px rgba(96, 120, 255, 0.35) !important;
overscroll-behavior: contain !important;
}
html body #trade#trade .autocomplete-option,
html[data-theme="light"] body #trade#trade .autocomplete-option,
html[data-theme="dark"] body #trade#trade .autocomplete-option {
gap: 11px !important;
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background: transparent !important;
color: #eef2ff !important;
-webkit-text-fill-color: #eef2ff !important;
cursor: pointer !important;
transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease !important;
}
html body #trade#trade .autocomplete-option + .autocomplete-option,
html[data-theme="light"] body #trade#trade .autocomplete-option + .autocomplete-option,
html[data-theme="dark"] body #trade#trade .autocomplete-option + .autocomplete-option {
margin-top: 2px !important;
}
html body #trade#trade .autocomplete-option:hover,
html body #trade#trade .autocomplete-option.is-highlighted,
html[data-theme="light"] body #trade#trade .autocomplete-option:hover,
html[data-theme="light"] body #trade#trade .autocomplete-option.is-highlighted,
html[data-theme="dark"] body #trade#trade .autocomplete-option:hover,
html[data-theme="dark"] body #trade#trade .autocomplete-option.is-highlighted {
background: linear-gradient(90deg, rgba(139, 92, 246, 0.34) 0%, rgba(56, 189, 248, 0.16) 100%) !important;
border-color: rgba(170, 150, 255, 0.42) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
0 8px 22px -14px rgba(80, 60, 220, 0.8) !important;
}
html body #trade#trade .autocomplete-option:focus-visible,
html[data-theme="light"] body #trade#trade .autocomplete-option:focus-visible,
html[data-theme="dark"] body #trade#trade .autocomplete-option:focus-visible {
outline: 2px solid #8b5cf6 !important;
outline-offset: 1px !important;
}
html body #trade#trade .autocomplete-name,
html[data-theme="light"] body #trade#trade .autocomplete-name,
html[data-theme="dark"] body #trade#trade .autocomplete-name {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #f4f7ff !important;
-webkit-text-fill-color: #f4f7ff !important;
}
html body #trade#trade .autocomplete-meta,
html[data-theme="light"] body #trade#trade .autocomplete-meta,
html[data-theme="dark"] body #trade#trade .autocomplete-meta {
font-size: 10px !important;
color: rgba(198, 210, 250, 0.60) !important;
-webkit-text-fill-color: rgba(198, 210, 250, 0.60) !important;
}
html body #trade#trade .autocomplete-thumb,
html[data-theme="light"] body #trade#trade .autocomplete-thumb,
html[data-theme="dark"] body #trade#trade .autocomplete-thumb {
width: 34px !important;
height: 34px !important;
border-radius: 9px !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
html body #trade#trade .autocomplete-dot,
html[data-theme="light"] body #trade#trade .autocomplete-dot,
html[data-theme="dark"] body #trade#trade .autocomplete-dot {
width: 4px !important;
height: 26px !important;
border-radius: 4px !important;
opacity: 1 !important;
}
html body #trade#trade .autocomplete-empty,
html[data-theme="light"] body #trade#trade .autocomplete-empty,
html[data-theme="dark"] body #trade#trade .autocomplete-empty {
padding: 18px 12px !important;
color: rgba(214, 224, 250, 0.72) !important;
-webkit-text-fill-color: rgba(214, 224, 250, 0.72) !important;
font-size: 13px !important;
}
@media (max-width: 860px) {
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
/* the band still overlaps the section above by 176px, so add it back */
padding-top: calc(176px + 44px) !important;
padding-bottom: 52px !important;
}
html body #trade#trade .trade-slots,
html body #trade#trade .trade-list,
html[data-theme="light"] body #trade#trade .trade-slots,
html[data-theme="light"] body #trade#trade .trade-list,
html[data-theme="dark"] body #trade#trade .trade-slots,
html[data-theme="dark"] body #trade#trade .trade-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* part 392 - when both sides score the same the exchange says so in amber:
both panels turn to warm glass with a gold ring instead of staying neutral */
html body #trade#trade #trade-board.trade-board .trade-column.is-equal,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal {
background-color: rgba(48, 34, 13, 0.80) !important;
background-image:
radial-gradient(560px 340px at 18% 0%, rgba(251, 191, 36, 0.20), transparent 68%),
radial-gradient(520px 380px at 88% 108%, rgba(245, 158, 11, 0.16), transparent 70%),
linear-gradient(158deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 44%, rgba(255, 255, 255, 0.045) 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(252, 211, 77, 0.52),
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 26px 60px -26px rgba(245, 158, 11, 0.50) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-equal::before,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal::before,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal::before {
border-radius: clamp(18px, 1.6vw, 26px) !important;
background:
linear-gradient(180deg, rgba(251, 191, 36, 0.14) 0%, rgba(245, 158, 11, 0.05) 46%, rgba(251, 191, 36, 0.18) 100%) !important;
box-shadow:
inset 0 0 0 2px rgba(252, 211, 77, 0.60),
inset 0 0 42px rgba(245, 158, 11, 0.18),
0 0 32px rgba(245, 158, 11, 0.16) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-equal .trade-slots span,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .trade-slots span,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .trade-slots span {
background: rgba(251, 191, 36, 0.07) !important;
box-shadow:
inset 0 0 0 1px rgba(252, 211, 77, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-equal .trade-list li,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .trade-list li,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .trade-list li {
background: rgba(66, 48, 16, 0.72) !important;
box-shadow:
inset 0 0 0 1px rgba(252, 211, 77, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-equal .search-field-small,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .search-field-small,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .search-field-small {
background: rgba(20, 16, 8, 0.32) !important;
box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.26) !important;
}
html body #trade#trade #trade-board.trade-board .trade-column.is-equal .search-field-small .icon,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .search-field-small .icon,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal .search-field-small .icon {
color: #f7cf6a !important;
}
/* part 393 - the comparison overlay must be ONE continuous sheet over the
whole panel. The base neon-floor ::before is only 130px tall and anchored
to the bottom, so the winner/tie/loser overlays were painting a lone band
around the search row. Resetting height/inset makes the ring and the tint
wrap search + board together. */
html body #trade#trade #trade-board.trade-board .trade-column.is-better::before,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-better::before,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-better::before,
html body #trade#trade #trade-board.trade-board .trade-column.is-equal::before,
html[data-theme="light"] body #trade#trade #trade-board.trade-board .trade-column.is-equal::before,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board .trade-column.is-equal::before,
html body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better)::before,
html[data-theme="light"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better)::before,
html[data-theme="dark"] body #trade#trade #trade-board.trade-board:has(.trade-column.is-better) .trade-column:not(.is-better)::before {
top: -2px !important;
bottom: -2px !important;
inset-inline: -2px !important;
height: auto !important;
width: auto !important;
}
/* part 394 - desktop side-by-side: the rounded comparison screen and a short
"how it works" card. On narrow screens the two stack. */
html body #trade#trade .trade-layout {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.6vw, 26px);
}
html body #trade#trade .trade-layout > .trade-info,
html[data-theme="light"] body #trade#trade .trade-layout > .trade-info,
html[data-theme="dark"] body #trade#trade .trade-layout > .trade-info {
order: 0;
max-width: none !important;
}
html body #trade#trade .trade-layout > .trade-screen {
order: 1;
width: 100%;
min-width: 0;
align-self: center;
}
@media (min-width: 1000px) {
html body #trade#trade .trade-layout {
display: grid;
grid-template-columns: clamp(268px, 26vw, 390px) minmax(0, 1fr);
align-items: stretch;
gap: clamp(18px, 1.8vw, 30px);
}
}
/* ---- the explainer card ------------------------------------------------- */
html body #trade#trade .trade-info,
html[data-theme="light"] body #trade#trade .trade-info,
html[data-theme="dark"] body #trade#trade .trade-info {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: clamp(18px, 1.5vw, 26px) !important;
border-radius: clamp(20px, 1.8vw, 28px) !important;
text-align: start !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
overflow: hidden !important;
background-color: rgba(12, 15, 26, 0.94) !important;
background-image:
radial-gradient(420px 260px at 88% -10%, rgba(126, 87, 255, 0.28), transparent 70%),
radial-gradient(320px 220px at 0% 110%, rgba(46, 160, 255, 0.16), transparent 72%),
linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 46%, rgba(255, 255, 255, 0.03) 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(150, 172, 255, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 34px 80px -44px rgba(0, 0, 0, 0.95) !important;
}
html body #trade#trade .trade-info::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, 0.35), transparent 60%),
radial-gradient(1px 1px at 74% 12%, rgba(180, 190, 255, 0.28), transparent 60%),
radial-gradient(1px 1px at 62% 78%, rgba(160, 220, 255, 0.22), transparent 60%) !important;
opacity: 0.85 !important;
}
html body #trade#trade .trade-info > * {
position: relative !important;
z-index: 1 !important;
}
html body #trade#trade .trade-info-label {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
margin-bottom: clamp(12px, 1.2vw, 16px) !important;
font-family: "Assistant", "Heebo", sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.16em !important;
line-height: 1 !important;
color: #a9c0f5 !important;
-webkit-text-fill-color: #a9c0f5 !important;
}
html body #trade#trade .trade-info-label::before {
content: "" !important;
width: 22px !important;
height: 2px !important;
border-radius: 2px !important;
background: linear-gradient(90deg, #8b5cf6, #38bdf8) !important;
}
html body #trade#trade .trade-info h2 {
max-width: 330px !important;
margin: 0 !important;
font-size: clamp(22px, 1.8vw, 28px) !important;
line-height: 1.18 !important;
letter-spacing: -0.01em !important;
color: #ffffff !important;
}
html body #trade#trade .trade-info .section-lead {
max-width: 340px !important;
margin: clamp(8px, 0.8vw, 12px) 0 0 !important;
font-size: clamp(12.5px, 0.9vw, 14px) !important;
line-height: 1.65 !important;
color: rgba(206, 216, 240, 0.72) !important;
}
html body #trade#trade .trade-info .section-lead strong {
color: #dbe6ff !important;
}
html body #trade#trade .trade-steps {
list-style: none !important;
margin: clamp(12px, 1.2vw, 18px) 0 0 !important;
padding: 0 !important;
display: grid !important;
gap: 0 !important;
}
html body #trade#trade .trade-steps li {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr) !important;
align-items: start !important;
gap: 12px !important;
padding: clamp(8px, 0.85vw, 12px) 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body #trade#trade .trade-steps li + li {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body #trade#trade .trade-step-num {
display: grid !important;
place-items: center !important;
width: 30px !important;
height: 30px !important;
border-radius: 10px !important;
font-family: "IBM Plex Mono", monospace !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #e4ebff !important;
-webkit-text-fill-color: #e4ebff !important;
background: linear-gradient(150deg, rgba(139, 92, 246, 0.45), rgba(56, 189, 248, 0.20)) !important;
box-shadow:
inset 0 0 0 1px rgba(180, 190, 255, 0.30),
0 6px 16px -10px rgba(90, 70, 230, 0.9) !important;
}
html body #trade#trade .trade-step-copy {
display: grid !important;
gap: 3px !important;
min-width: 0 !important;
}
html body #trade#trade .trade-step-copy strong {
font-size: clamp(12.5px, 0.9vw, 13.5px) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #f2f5ff !important;
-webkit-text-fill-color: #f2f5ff !important;
}
html body #trade#trade .trade-info h2,
html body #trade#trade .trade-info .section-lead,
html body #trade#trade .trade-step-copy,
html[data-theme="light"] body #trade#trade .trade-info h2,
html[data-theme="light"] body #trade#trade .trade-info .section-lead,
html[data-theme="light"] body #trade#trade .trade-step-copy,
html[data-theme="dark"] body #trade#trade .trade-info h2,
html[data-theme="dark"] body #trade#trade .trade-info .section-lead,
html[data-theme="dark"] body #trade#trade .trade-step-copy {
text-align: start !important;
}
html body #trade#trade .trade-step-copy > span {
font-size: clamp(11.5px, 0.82vw, 12.5px) !important;
line-height: 1.55 !important;
color: rgba(196, 210, 238, 0.62) !important;
-webkit-text-fill-color: rgba(196, 210, 238, 0.62) !important;
}
/* ---- the rounded comparison screen -------------------------------------- */
html body #trade#trade .trade-layout > .trade-screen {
justify-self: center !important;
}
/* ---- trim the band height ---------------------------------------------- */
html body #trade,
html[data-theme="light"] body #trade,
html[data-theme="dark"] body #trade {
padding-top: calc(176px + clamp(36px, 3.3vw, 56px)) !important;
padding-bottom: clamp(34px, 3vw, 54px) !important;
}
@media (min-width: 1000px) and (max-width: 1199px) {
/* keep the card from towering over the screen on 1024-1180 laptops */
html body #trade#trade .trade-step-copy > span {
display: none !important;
}
html body #trade#trade .trade-steps li {
grid-template-columns: 26px minmax(0, 1fr) !important;
padding: clamp(7px, 0.8vw, 10px) 0 !important;
}
html body #trade#trade .trade-step-num {
width: 26px !important;
height: 26px !important;
border-radius: 9px !important;
}
}
@media (max-width: 999px) {
html body #trade#trade .trade-layout {
display: flex !important;
flex-direction: column !important;
}
html body #trade#trade .trade-info {
padding: 22px !important;
}
html body #trade#trade .trade-info h2 {
font-size: clamp(24px, 5vw, 30px) !important;
}
}
@media (max-width: 640px) {
html body #trade#trade .trade-steps li {
grid-template-columns: 26px minmax(0, 1fr) !important;
gap: 10px !important;
}
html body #trade#trade .trade-step-num {
width: 26px !important;
height: 26px !important;
border-radius: 9px !important;
}
}
/* part 395 - the comparison board now sits inside a curved-glass monitor
frame: a thick rounded bezel, a specular top edge, side falloff that reads
as curvature, and a soft halo under the screen. */
html body #trade#trade .trade-screen {
position: relative !important;
width: 100% !important;
max-width: min(1060px, 100%) !important;
min-width: 0 !important;
padding: clamp(9px, 0.9vw, 15px) !important;
border-radius: clamp(30px, 3.2vw, 52px) !important;
background:
linear-gradient(152deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.05) 17%,
rgba(128, 156, 255, 0.10) 52%,
rgba(6, 8, 16, 0.60) 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(190, 210, 255, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.48),
inset 2px 0 0 rgba(255, 255, 255, 0.06),
inset -2px 0 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 0 rgba(0, 0, 0, 0.60),
0 50px 110px -55px rgba(0, 0, 0, 0.95),
0 0 110px -38px rgba(96, 120, 255, 0.45),
0 22px 70px -40px rgba(140, 80, 255, 0.38) !important;
isolation: isolate !important;
}
/* specular highlight along the top edge + curved side falloff */
html body #trade#trade .trade-screen::before {
content: "" !important;
position: absolute !important;
inset: 2px !important;
z-index: 3 !important;
pointer-events: none !important;
border-radius: inherit !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 11%),
linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, transparent 6%, transparent 94%, rgba(0, 0, 0, 0.30) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
/* soft halo that lifts the monitor off the page */
html body #trade#trade .trade-screen::after {
content: "" !important;
position: absolute !important;
left: 7% !important;
right: 7% !important;
bottom: -26px !important;
height: 54px !important;
z-index: -1 !important;
pointer-events: none !important;
border-radius: 50% !important;
background: radial-gradient(50% 100% at 50% 0%, rgba(110, 140, 255, 0.55) 0%, rgba(110, 140, 255, 0) 72%) !important;
filter: blur(16px) !important;
opacity: 0.85 !important;
}
html body #trade#trade .trade-screen > #trade-board.trade-board {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: clamp(22px, 2.4vw, 40px) !important;
box-shadow:
inset 0 0 0 1px rgba(158, 178, 255, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
@media (min-width: 1000px) {
html body #trade#trade .trade-screen {
transform: perspective(2200px) rotateX(1.7deg) !important;
transform-origin: 50% 88% !important;
}
}
@media (max-width: 999px) {
html body #trade#trade .trade-screen {
padding: 7px !important;
border-radius: clamp(24px, 7vw, 38px) !important;
transform: none !important;
}
html body #trade#trade .trade-screen > #trade-board.trade-board {
border-radius: clamp(19px, 5.4vw, 32px) !important;
}
}
/* part 396 - go further on the curved-monitor look: a thick bevelled glass
bezel, a stronger tilt, a recessed display panel, an in-glass glare and a
wide elliptical halo so the screen floats above the section. */
html body #trade#trade .trade-screen {
padding: clamp(11px, 1.1vw, 19px) !important;
border-radius: clamp(38px, 4vw, 70px) !important;
background:
linear-gradient(178deg,
rgba(255, 255, 255, 0.30) 0%,
rgba(214, 226, 255, 0.10) 5%,
rgba(120, 148, 240, 0.10) 24%,
rgba(22, 28, 48, 0.55) 62%,
rgba(6, 9, 18, 0.92) 100%),
#0a0e1a !important;
box-shadow:
inset 0 0 0 1px rgba(198, 214, 255, 0.34),
inset 0 2px 1px rgba(255, 255, 255, 0.55),
inset 0 -3px 2px rgba(0, 0, 0, 0.72),
inset 8px 0 16px -12px rgba(255, 255, 255, 0.40),
inset -8px 0 16px -12px rgba(255, 255, 255, 0.40),
0 2px 0 rgba(255, 255, 255, 0.05),
0 34px 54px -26px rgba(0, 0, 0, 0.92),
0 66px 130px -58px rgba(34, 44, 108, 0.95),
0 0 120px -26px rgba(108, 126, 255, 0.50),
0 8px 190px -40px rgba(158, 88, 255, 0.42) !important;
}
/* the display is recessed into the bezel */
html body #trade#trade .trade-screen > #trade-board.trade-board {
border-radius: clamp(30px, 3.2vw, 56px) !important;
box-shadow:
inset 0 0 0 1px rgba(188, 204, 255, 0.22),
inset 0 3px 12px rgba(0, 0, 0, 0.62),
inset 0 -8px 22px -8px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(2, 4, 10, 0.85) !important;
}
/* glare + curvature falloff painted over the glass */
html body #trade#trade .trade-screen::before {
inset: 3px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 8%),
linear-gradient(118deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 16%, rgba(255, 255, 255, 0) 34%),
linear-gradient(90deg,
rgba(2, 5, 14, 0.42) 0%,
rgba(2, 5, 14, 0.10) 7%,
rgba(255, 255, 255, 0.03) 46%,
rgba(2, 5, 14, 0.10) 93%,
rgba(2, 5, 14, 0.42) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}
/* elliptical halo underneath, like light spilling from the panel */
html body #trade#trade .trade-screen::after {
left: 4% !important;
right: 4% !important;
bottom: -34px !important;
height: 72px !important;
border-radius: 50% !important;
background:
radial-gradient(46% 100% at 50% 6%, rgba(126, 150, 255, 0.60) 0%, rgba(126, 150, 255, 0) 70%),
radial-gradient(70% 100% at 50% 30%, rgba(150, 92, 255, 0.35) 0%, rgba(150, 92, 255, 0) 74%) !important;
filter: blur(20px) !important;
opacity: 0.72 !important;
}
@media (min-width: 1000px) {
html body #trade#trade .trade-screen {
transform: perspective(1900px) rotateX(2.15deg) !important;
transform-origin: 50% 86% !important;
}
}
@media (max-width: 999px) {
html body #trade#trade .trade-screen {
padding: 9px !important;
border-radius: clamp(28px, 8vw, 44px) !important;
}
html body #trade#trade .trade-screen > #trade-board.trade-board {
border-radius: clamp(21px, 6vw, 36px) !important;
}
html body #trade#trade .trade-screen::before {
inset: 2px !important;
}
}
/* part 397 - guided explainer tour: the card narrates the board. One step
lights up at a time, the line under the headline types itself, and a thin
callout curve runs from the active step to the matching part of the screen. */
html body #trade#trade .trade-layout {
position: relative !important;
}
/* ---- the typing narration ---------------------------------------------- */
html body #trade#trade .trade-tour,
html[data-theme="light"] body #trade#trade .trade-tour,
html[data-theme="dark"] body #trade#trade .trade-tour {
min-height: 3.4em !important;
display: flex !important;
align-items: flex-start !important;
flex-wrap: wrap !important;
color: #d5e3ff !important;
-webkit-text-fill-color: #d5e3ff !important;
}
html body #trade#trade .trade-tour-text {
color: #d5e3ff !important;
-webkit-text-fill-color: #d5e3ff !important;
}
html body #trade#trade .trade-tour-caret {
display: inline-block !important;
width: 2px !important;
height: 1.05em !important;
margin-inline-start: 3px !important;
margin-top: 0.32em !important;
border-radius: 2px !important;
background: linear-gradient(180deg, #7dd3fc, #a78bfa) !important;
animation: tradeCaret 1.05s steps(1) infinite !important;
}
@keyframes tradeCaret {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
html body #trade#trade[data-tour-phase="3"] .trade-tour-text {
color: #c9f7e4 !important;
-webkit-text-fill-color: #c9f7e4 !important;
}
/* ---- steps: one active, past steps stay lit ---------------------------- */
html body #trade#trade .trade-steps li {
position: relative !important;
transition: opacity 0.45s ease, background-color 0.45s ease !important;
}
html body #trade#trade.is-touring .trade-steps li {
opacity: 0.52 !important;
}
html body #trade#trade.is-touring .trade-steps li.is-done {
opacity: 0.86 !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active {
opacity: 1 !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-num {
transform: scale(1.08) !important;
box-shadow:
inset 0 0 0 1px rgba(210, 225, 255, 0.55),
0 0 0 4px rgba(124, 120, 255, 0.12),
0 10px 26px -12px rgba(120, 110, 255, 0.95) !important;
}
html body #trade#trade .trade-step-num {
transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-copy strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: -10px !important;
width: 7px !important;
height: 7px !important;
margin-top: -3.5px !important;
border-radius: 50% !important;
background: #7dd3fc !important;
box-shadow: 0 0 10px 2px rgba(125, 211, 252, 0.7) !important;
}
/* ---- callout curve from the card to the screen ------------------------- */
html body #trade#trade .trade-callout {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
pointer-events: none !important;
z-index: 6 !important;
opacity: 0 !important;
transition: opacity 0.5s ease !important;
}
html body #trade#trade.is-touring:not(.is-tour-paused) .trade-callout {
opacity: 1 !important;
}
html body #trade#trade .trade-callout.is-hidden {
opacity: 0 !important;
}
html body #trade#trade .trade-callout-path {
stroke: url(#trade-callout-grad) !important;
stroke-width: 1.5 !important;
stroke-linecap: round !important;
filter: drop-shadow(0 0 5px rgba(130, 160, 255, 0.55)) !important;
}
html body #trade#trade .trade-callout-end {
fill: #7dd3fc !important;
filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.9)) !important;
}
html body #trade#trade .trade-callout-dot {
fill: #f4f8ff !important;
filter: drop-shadow(0 0 6px #7dd3fc) !important;
}
html body #trade#trade .trade-callout-check {
opacity: 0 !important;
pointer-events: none !important;
transform-box: fill-box !important;
}
html body #trade#trade .trade-callout-check circle {
fill: rgba(16, 185, 129, 0.92) !important;
stroke: rgba(190, 255, 230, 0.85) !important;
stroke-width: 1 !important;
filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.9)) !important;
}
html body #trade#trade .trade-callout-check path {
fill: none !important;
stroke: #eafff6 !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #trade#trade.is-touring[data-tour-phase="3"] .trade-callout-check {
opacity: 1 !important;
animation: tradeCheckPop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both !important;
}
@keyframes tradeCheckPop {
0% { opacity: 0; }
60% { opacity: 1; }
100% { opacity: 1; }
}
html body #trade#trade[data-tour-phase="3"] .trade-callout-end {
fill: #34d399 !important;
filter: drop-shadow(0 0 7px rgba(52, 211, 153, 0.95)) !important;
}
/* ---- what each phase highlights on the screen -------------------------- */
html body #trade#trade .trade-tour-glow {
position: absolute !important;
inset: clamp(11px, 1.1vw, 19px) !important;
border-radius: clamp(30px, 3.2vw, 56px) !important;
pointer-events: none !important;
opacity: 0 !important;
z-index: 2 !important;
transition: opacity 0.55s ease !important;
}
html body #trade#trade.is-touring[data-tour-phase="1"] .trade-column[data-side="offer"] .trade-search {
animation: tradeTourRing 2.3s ease-in-out infinite !important;
}
html body #trade#trade.is-touring[data-tour-phase="2"] .trade-column .trade-stage {
animation: tradeTourRing2 2.3s ease-in-out infinite !important;
}
html body #trade#trade.is-touring[data-tour-phase="3"] .trade-tour-glow {
opacity: 1 !important;
background: radial-gradient(130% 90% at 50% 108%, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0) 64%) !important;
box-shadow:
inset 0 0 0 2px rgba(52, 211, 153, 0.55),
inset 0 0 64px rgba(16, 185, 129, 0.14) !important;
animation: tradeWinPulse 2s ease-in-out infinite !important;
}
@keyframes tradeTourRing {
0%, 100% { outline: 1px solid rgba(125, 211, 252, 0.35); outline-offset: 0px; }
50% { outline: 2px solid rgba(125, 211, 252, 0.95); outline-offset: 5px; }
}
@keyframes tradeTourRing2 {
0%, 100% { outline: 1px solid rgba(167, 139, 250, 0.30); outline-offset: 0px; }
50% { outline: 2px solid rgba(167, 139, 250, 0.85); outline-offset: 4px; }
}
@keyframes tradeWinPulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
/* while the visitor is actually using the board, keep the card readable */
html body #trade#trade.is-tour-paused .trade-steps li {
opacity: 1 !important;
}
html body #trade#trade.is-tour-paused .trade-tour-glow {
opacity: 0 !important;
animation: none !important;
}
html body #trade#trade.is-tour-paused .trade-column .trade-search,
html body #trade#trade.is-tour-paused .trade-column .trade-stage {
animation: none !important;
outline: none !important;
}
html body #trade#trade.is-tour-paused .trade-callout {
opacity: 0 !important;
}
html body #trade#trade.is-tour-paused .trade-steps li.is-active::after {
display: none !important;
}
@media (max-width: 999px) {
html body #trade#trade .trade-tour-glow {
inset: 9px !important;
border-radius: clamp(21px, 6vw, 36px) !important;
}
html body #trade#trade .trade-callout {
display: none !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active::after {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body #trade#trade .trade-callout,
html body #trade#trade .trade-tour-glow {
display: none !important;
}
html body #trade#trade .trade-tour-caret,
html body #trade#trade .trade-column .trade-stage,
html body #trade#trade .trade-column .trade-search {
animation: none !important;
}
html body #trade#trade .trade-steps li {
opacity: 1 !important;
}
}
/* part 398 - the guided explainer, redesigned: a compact live status pill
plus a vertical timeline. No long wire across the board, and inactive
steps stay readable instead of fading out. */
html body #trade#trade .trade-callout {
display: none !important;
}
html body #trade#trade .trade-steps li.is-active::after {
display: none !important;
}
/* ---- live status pill --------------------------------------------------- */
html body #trade#trade .trade-tour,
html[data-theme="light"] body #trade#trade .trade-tour,
html[data-theme="dark"] body #trade#trade .trade-tour {
display: flex !important;
align-items: flex-start !important;
gap: 9px !important;
margin: clamp(10px, 1vw, 14px) 0 0 !important;
padding: 10px 13px !important;
min-height: calc(1.62em * 2 + 20px) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow:
inset 0 0 0 1px rgba(170, 192, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
font-family: "Assistant", "Heebo", sans-serif !important;
font-size: clamp(12px, 0.9vw, 13.2px) !important;
line-height: 1.62 !important;
color: rgba(208, 222, 248, 0.82) !important;
transition: background-color 0.5s ease, box-shadow 0.5s ease !important;
}
html body #trade#trade .trade-tour-dot {
flex: 0 0 auto !important;
width: 7px !important;
height: 7px !important;
margin-top: 0.56em !important;
border-radius: 50% !important;
background: #7dd3fc !important;
box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.55), 0 0 9px rgba(125, 211, 252, 0.9) !important;
animation: tradeTourDot 1.9s ease-out infinite !important;
}
@keyframes tradeTourDot {
0% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.45), 0 0 9px rgba(125, 211, 252, 0.85); }
70% { box-shadow: 0 0 0 7px rgba(125, 211, 252, 0), 0 0 9px rgba(125, 211, 252, 0.5); }
100% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0), 0 0 9px rgba(125, 211, 252, 0.85); }
}
html body #trade#trade .trade-tour-text {
flex: 1 1 auto !important;
min-width: 0 !important;
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
}
html body #trade#trade .trade-tour-caret {
flex: 0 0 auto !important;
width: 2px !important;
height: 1.05em !important;
margin-top: 0.34em !important;
border-radius: 2px !important;
background: linear-gradient(180deg, #7dd3fc, #a78bfa) !important;
animation: tradeCaret 1.05s steps(1) infinite !important;
}
html body #trade#trade .trade-tour-check {
display: none !important;
flex: 0 0 auto !important;
margin-top: 0.1em !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
color: #34d399 !important;
-webkit-text-fill-color: #34d399 !important;
}
html body #trade#trade[data-tour-phase="2"] .trade-tour-dot {
background: #a78bfa !important;
}
html body #trade#trade[data-tour-phase="3"] .trade-tour {
background: rgba(16, 185, 129, 0.10) !important;
box-shadow:
inset 0 0 0 1px rgba(52, 211, 153, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
color: rgba(214, 255, 240, 0.92) !important;
}
html body #trade#trade[data-tour-phase="3"] .trade-tour-dot {
display: none !important;
}
html body #trade#trade[data-tour-phase="3"] .trade-tour-check {
display: inline-block !important;
animation: tradeCheckIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both !important;
}
@keyframes tradeCheckIn {
0% { opacity: 0; transform: scale(0.5) rotate(-12deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* ---- timeline ----------------------------------------------------------- */
html body #trade#trade .trade-steps {
position: relative !important;
margin-top: clamp(14px, 1.3vw, 20px) !important;
}
html body #trade#trade .trade-steps::before {
content: "" !important;
position: absolute !important;
inset-inline-start: 15px !important;
top: 26px !important;
bottom: 26px !important;
width: 1px !important;
background: linear-gradient(180deg,
rgba(167, 139, 250, 0.55) 0%,
rgba(125, 211, 252, 0.30) 55%,
rgba(125, 211, 252, 0.08) 100%) !important;
}
html body #trade#trade .trade-steps li {
position: relative !important;
z-index: 1 !important;
border-top: 0 !important;
padding: clamp(7px, 0.72vw, 11px) 0 !important;
background: transparent !important;
opacity: 0.92 !important;
transition: opacity 0.4s ease !important;
}
html body #trade#trade .trade-steps li + li {
border-top: 0 !important;
}
html body #trade#trade .trade-step-num {
background-color: #121829 !important;
}
html body #trade#trade .trade-step-copy strong {
color: #e8eeff !important;
-webkit-text-fill-color: #e8eeff !important;
transition: color 0.4s ease !important;
}
html body #trade#trade .trade-step-copy > span {
color: rgba(190, 206, 236, 0.62) !important;
-webkit-text-fill-color: rgba(190, 206, 236, 0.62) !important;
}
html body #trade#trade.is-touring .trade-steps li {
opacity: 0.66 !important;
}
html body #trade#trade.is-touring .trade-steps li.is-done {
opacity: 0.9 !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active {
opacity: 1 !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-copy > span {
color: rgba(206, 220, 246, 0.78) !important;
-webkit-text-fill-color: rgba(206, 220, 246, 0.78) !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-num {
animation: tradeStepGlow 2.6s ease-in-out infinite !important;
}
@keyframes tradeStepGlow {
0%, 100% {
box-shadow:
inset 0 0 0 1px rgba(200, 216, 255, 0.42),
0 0 0 3px rgba(124, 120, 255, 0.10),
0 8px 20px -12px rgba(120, 110, 255, 0.9);
}
50% {
box-shadow:
inset 0 0 0 1px rgba(220, 232, 255, 0.65),
0 0 0 5px rgba(124, 120, 255, 0.14),
0 10px 26px -10px rgba(126, 118, 255, 0.95);
}
}
@media (max-width: 999px) {
html body #trade#trade .trade-steps::before {
inset-inline-start: 13px !important;
}
html body #trade#trade .trade-tour {
min-height: calc(1.62em * 2 + 18px) !important;
}
}
/* part 399 - card balance: a slightly calmer headline, a tighter rhythm
between the status pill and the timeline. */
html body #trade#trade .trade-info h2,
html[data-theme="light"] body #trade#trade .trade-info h2,
html[data-theme="dark"] body #trade#trade .trade-info h2 {
font-size: clamp(21px, 1.65vw, 26px) !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
}
html body #trade#trade .trade-tour {
margin-top: clamp(9px, 0.85vw, 12px) !important;
padding: 9px 12px !important;
border-radius: 13px !important;
}
html body #trade#trade .trade-steps {
margin-top: clamp(10px, 0.95vw, 15px) !important;
}
@media (min-width: 1000px) and (max-width: 1199px) {
html body #trade#trade .trade-info h2 {
font-size: clamp(20px, 2vw, 25px) !important;
}
}
/* part 400 - make the active step unmistakable: a filled node and a soft
highlight behind the row, without touching the readable base state. */
html body #trade#trade.is-touring .trade-steps li.is-active {
background: linear-gradient(90deg,
rgba(124, 92, 255, 0.16) 0%,
rgba(56, 189, 248, 0.05) 55%,
rgba(56, 189, 248, 0) 100%) !important;
border-radius: 12px !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-num {
background-image: linear-gradient(150deg, rgba(151, 105, 255, 0.98), rgba(66, 196, 255, 0.85)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-copy strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #trade#trade.is-touring .trade-steps li.is-active .trade-step-copy > span {
color: rgba(214, 228, 250, 0.85) !important;
-webkit-text-fill-color: rgba(214, 228, 250, 0.85) !important;
}
/* part 401 - paused state must win over the touring dimming (same
specificity, appended last) */
html body #trade#trade.is-tour-paused .trade-steps li {
opacity: 0.95 !important;
}
html body #trade#trade.is-tour-paused .trade-steps li.is-active {
opacity: 1 !important;
}
html body #trade#trade.is-tour-paused .trade-tour-dot {
animation: none !important;
}
/* part 402 - the "how it works" card is gone. The curved screen now owns the
whole band, centred, and each side holds a 3x3 board of square slots. */
html body #trade#trade .trade-layout {
display: block !important;
}
html body #trade#trade .trade-layout > .trade-screen {
max-width: min(1120px, 100%) !important;
margin-inline: auto !important;
}
/* three square rows on both desktop and mobile */
html body #trade#trade .trade-stage,
html[data-theme="light"] body #trade#trade .trade-stage,
html[data-theme="dark"] body #trade#trade .trade-stage {
aspect-ratio: 1 / 1 !important;
}
html body #trade#trade .trade-slots,
html body #trade#trade .trade-list,
html[data-theme="light"] body #trade#trade .trade-slots,
html[data-theme="light"] body #trade#trade .trade-list,
html[data-theme="dark"] body #trade#trade .trade-slots,
html[data-theme="dark"] body #trade#trade .trade-list {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* the empty board can breathe at full width on phones too */
@media (max-width: 860px) {
html body #trade#trade .trade-layout > .trade-screen {
max-width: 100% !important;
}
}
/* part 404 - the mascot FAQ: a large character on one side and a dark glass
"selected questions" card on the other. Each question opens its answer in
place with a height animation (grid-template-rows 0fr -> 1fr). */
html body #trade#trade .trade-faq,
html[data-theme="light"] body #trade#trade .trade-faq,
html[data-theme="dark"] body #trade#trade .trade-faq {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(10px, 2vw, 32px) !important;
width: min(1120px, 100%) !important;
margin: clamp(10px, 1.5vw, 22px) auto clamp(10px, 1.4vw, 18px) !important;
padding-inline: clamp(10px, 1.2vw, 18px) !important;
direction: rtl !important;
}
/* ---- the questions card: a real monitor housing, matching the 3x3 screen
The card itself is the thick metal bezel (padding = bezel thickness, the
same clamp the main screen uses). ::before is the recessed glass surface,
::after is the top sheen and the curved side falloff. Content sits above
both.
--faq-bz bezel thickness
--faq-r outer housing radius (matches .trade-screen)
--faq-ri inner glass radius (matches the board inside the screen)
---------------------------------------------------------------------- */
html body #trade#trade .trade-faq-card,
html[data-theme="light"] body #trade#trade .trade-faq-card,
html[data-theme="dark"] body #trade#trade .trade-faq-card {
--faq-bz: clamp(9px, 0.95vw, 15px);
--faq-r: clamp(30px, 3.2vw, 52px);
--faq-ri: clamp(22px, 2.4vw, 40px);
position: relative !important;
flex: 1 1 420px !important;
min-width: 0 !important;
max-width: 620px !important;
padding: var(--faq-bz) !important;
border: 0 !important;
outline: 0 !important;
border-radius: var(--faq-r) !important;
background-color: #151824 !important;
background-image:
linear-gradient(152deg,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.05) 16%,
rgba(128, 156, 255, 0.10) 50%,
rgba(6, 8, 16, 0.72) 100%) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
box-shadow:
inset 0 0 0 1px rgba(190, 210, 255, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.48),
inset 2px 0 0 rgba(255, 255, 255, 0.06),
inset -2px 0 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 0 rgba(0, 0, 0, 0.60),
0 34px 64px -34px rgba(0, 0, 0, 0.95),
0 0 52px -14px rgba(120, 90, 255, 0.40) !important;
animation: tradeFaqFloat 6s ease-in-out infinite !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
/* recessed dark glass surface inside the housing */
html body #trade#trade .trade-faq-card::before {
content: "" !important;
position: absolute !important;
inset: var(--faq-bz) !important;
z-index: -1 !important;
pointer-events: none !important;
border-radius: var(--faq-ri) !important;
background-color: #080a12 !important;
background-image:
radial-gradient(520px 280px at 86% -12%, rgba(126, 87, 255, 0.26), transparent 70%),
radial-gradient(380px 230px at 0% 112%, rgba(46, 160, 255, 0.10), transparent 74%),
linear-gradient(135deg, rgba(20, 15, 35, 0.96), rgba(8, 7, 14, 0.99)) !important;
box-shadow:
inset 0 0 0 1px rgba(158, 178, 255, 0.18),
inset 0 8px 18px -10px rgba(0, 0, 0, 0.90),
inset 0 -10px 22px -14px rgba(0, 0, 0, 0.85),
0 0 24px -6px rgba(0, 0, 0, 0.85) !important;
}
/* glass sheen over the top edge + curved side falloff */
html body #trade#trade .trade-faq-card::after {
content: "" !important;
position: absolute !important;
inset: var(--faq-bz) !important;
z-index: 2 !important;
pointer-events: none !important;
border-radius: var(--faq-ri) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 13%),
linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.26) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
@keyframes tradeFaqFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-3px) rotate(-0.2deg); }
}
html body #trade#trade .trade-faq-card:hover {
box-shadow:
inset 0 0 0 1px rgba(190, 210, 255, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.52),
inset 2px 0 0 rgba(255, 255, 255, 0.08),
inset -2px 0 0 rgba(255, 255, 255, 0.08),
inset 0 -2px 0 rgba(0, 0, 0, 0.62),
0 40px 72px -34px rgba(0, 0, 0, 0.98),
0 0 66px -12px rgba(120, 90, 255, 0.50) !important;
}
html body #trade#trade .trade-faq-head {
position: relative !important;
z-index: 1 !important;
padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.7vw, 24px) clamp(11px, 1.1vw, 16px) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--faq-ri) var(--faq-ri) 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
html body #trade#trade .trade-faq-kicker {
display: block !important;
margin-bottom: 5px !important;
font-size: clamp(9.5px, 0.72vw, 10.5px) !important;
font-weight: 800 !important;
letter-spacing: 0.16em !important;
line-height: 1.2 !important;
color: #a9c0f5 !important;
-webkit-text-fill-color: #a9c0f5 !important;
}
html body #trade#trade .trade-faq-head h3 {
margin: 0 !important;
font-family: "Assistant", "Heebo", sans-serif !important;
font-size: clamp(19px, 1.75vw, 24px) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* ---- the rows ---------------------------------------------------------- */
html body #trade#trade .trade-faq-list {
display: block !important;
padding: clamp(2px, 0.4vw, 6px) clamp(9px, 1.1vw, 15px) clamp(7px, 0.9vw, 12px) !important;
}
html body #trade#trade .trade-faq-item {
border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
}
html body #trade#trade .trade-faq-item:first-child {
border-top: 0 !important;
}
html body #trade#trade .trade-faq-q {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 20px !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: clamp(10px, 1.05vw, 14px) clamp(2px, 0.3vw, 5px) !important;
border: 0 !important;
border-radius: 12px !important;
background: none !important;
color: inherit !important;
font-family: "Assistant", "Heebo", sans-serif !important;
text-align: start !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
transition: color 0.2s ease, background-color 0.2s ease !important;
}
html body #trade#trade .trade-faq-q-text {
font-size: clamp(13px, 1vw, 14.5px) !important;
font-weight: 700 !important;
line-height: 1.45 !important;
color: rgba(230, 238, 255, 0.92) !important;
-webkit-text-fill-color: rgba(230, 238, 255, 0.92) !important;
transition: color 0.2s ease !important;
}
html body #trade#trade .trade-faq-q:hover {
background: rgba(255, 255, 255, 0.035) !important;
}
html body #trade#trade .trade-faq-q:hover .trade-faq-q-text,
html body #trade#trade .trade-faq-item.is-open .trade-faq-q-text {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #trade#trade .trade-faq-q:focus-visible {
outline: 2px solid rgba(125, 211, 252, 0.85) !important;
outline-offset: 1px !important;
}
html body #trade#trade .trade-faq-chevron {
position: relative !important;
display: block !important;
justify-self: end !important;
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: inset 0 0 0 1px rgba(170, 190, 255, 0.16) !important;
transition: background-color 0.22s ease, box-shadow 0.22s ease !important;
}
html body #trade#trade .trade-faq-chevron::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 6px !important;
height: 6px !important;
margin: -4.5px 0 0 -3px !important;
border-right: 1.6px solid rgba(214, 226, 255, 0.85) !important;
border-bottom: 1.6px solid rgba(214, 226, 255, 0.85) !important;
transform: rotate(45deg) !important;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
html body #trade#trade .trade-faq-item.is-open .trade-faq-chevron {
background: rgba(139, 92, 246, 0.22) !important;
box-shadow: inset 0 0 0 1px rgba(186, 204, 255, 0.30) !important;
}
html body #trade#trade .trade-faq-item.is-open .trade-faq-chevron::after {
transform: rotate(-135deg) translate(-1px, -1px) !important;
border-color: rgba(255, 255, 255, 0.92) !important;
}
/* ---- the animated answer ----------------------------------------------- */
html body #trade#trade .trade-faq-a {
display: grid !important;
grid-template-rows: 0fr !important;
transition: grid-template-rows 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
html body #trade#trade .trade-faq-a-inner {
overflow: hidden !important;
min-height: 0 !important;
opacity: 0 !important;
transform: translateY(-4px) !important;
transition: opacity 0.28s ease 0.04s, transform 0.32s ease 0.04s !important;
}
html body #trade#trade .trade-faq-a-inner p {
margin: 0 !important;
padding: 0 clamp(2px, 0.3vw, 5px) clamp(12px, 1.2vw, 16px) !important;
font-size: clamp(12px, 0.92vw, 13.5px) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
color: rgba(190, 204, 232, 0.78) !important;
-webkit-text-fill-color: rgba(190, 204, 232, 0.78) !important;
}
html body #trade#trade .trade-faq-item.is-open .trade-faq-a {
grid-template-rows: 1fr !important;
}
html body #trade#trade .trade-faq-item.is-open .trade-faq-a-inner {
opacity: 1 !important;
transform: none !important;
}
/* ---- the big mascot ---------------------------------------------------- */
html body #trade#trade .trade-faq-art,
html[data-theme="light"] body #trade#trade .trade-faq-art,
html[data-theme="dark"] body #trade#trade .trade-faq-art {
position: relative !important;
flex: 0 0 auto !important;
width: clamp(200px, 27vw, 392px) !important;
margin: 0 0 -4px !important;
transform: translateX(clamp(8px, 1.6vw, 28px)) !important;
pointer-events: none !important;
user-select: none !important;
}
html body #trade#trade .trade-faq-glow {
position: absolute !important;
inset: 8% -14% 2% -14% !important;
border-radius: 50% !important;
background:
radial-gradient(closest-side, rgba(139, 92, 246, 0.30), rgba(139, 92, 246, 0.10) 58%, rgba(10, 14, 26, 0) 78%),
radial-gradient(closest-side at 62% 76%, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0) 72%) !important;
filter: blur(6px) !important;
pointer-events: none !important;
}
html body #trade#trade .trade-faq-art img {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.55)) !important;
}
/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
html body #trade#trade .trade-faq,
html[data-theme] body #trade#trade .trade-faq {
gap: clamp(2px, 1vw, 14px) !important;
}
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
width: clamp(150px, 24vw, 260px) !important;
transform: translateX(10px) !important;
}
}
@media (max-width: 768px) {
html body #trade#trade .trade-faq,
html[data-theme] body #trade#trade .trade-faq {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 0 !important;
padding-inline: clamp(10px, 3vw, 16px) !important;
}
html body #trade#trade .trade-faq-card,
html[data-theme] body #trade#trade .trade-faq-card {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
animation: none !important;
}
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
align-self: center !important;
width: clamp(150px, 46vw, 240px) !important;
margin-top: -4px !important;
transform: none !important;
}
html body #trade#trade .trade-faq-glow {
inset: 12% 2% 0 2% !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body #trade#trade .trade-faq-card {
animation: none !important;
}
html body #trade#trade .trade-faq-a,
html body #trade#trade .trade-faq-a-inner,
html body #trade#trade .trade-faq-chevron::after {
transition: none !important;
}
}
/* part 405 - VR visor.
The mascot, the 3x3 board and the questions card now sit in a single row
inside one curved headset housing, closed by a bright neon rim and a wide
purple bloom. The old monitor bezel is dissolved so the board panels float
directly in the visor glass. */
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
position: relative !important;
display: grid !important;
direction: ltr !important;
grid-template-columns: clamp(160px, 15vw, 240px) minmax(0, 1fr) clamp(280px, 23vw, 344px) !important;
grid-template-areas: "mascot board card" !important;
align-items: stretch !important;
column-gap: clamp(10px, 1vw, 16px) !important;
row-gap: clamp(12px, 1.4vw, 22px) !important;
width: min(1320px, 100%) !important;
margin-inline: auto !important;
padding: clamp(14px, 1.6vw, 26px) !important;
border-radius: clamp(46px, 5.2vw, 88px) / clamp(40px, 4.6vw, 76px) !important;
background-color: #0b0912 !important;
background-image:
radial-gradient(52% 78% at 12% 56%, rgba(126, 86, 255, 0.22), transparent 72%),
radial-gradient(120% 150% at 50% -32%, rgba(126, 86, 255, 0.24), transparent 62%),
linear-gradient(170deg, rgba(36, 29, 55, 0.96) 0%, rgba(15, 13, 24, 0.98) 46%, rgba(6, 6, 12, 1) 100%) !important;
box-shadow:
inset 0 0 0 2px rgba(190, 140, 255, 0.62),
inset 0 0 0 4px rgba(90, 52, 160, 0.22),
inset 0 3px 0 rgba(255, 255, 255, 0.30),
inset 0 -30px 64px -26px rgba(0, 0, 0, 0.88),
0 0 0 1px rgba(198, 162, 255, 0.30),
0 0 52px -4px rgba(160, 96, 255, 0.60),
0 0 130px -20px rgba(120, 60, 255, 0.45),
0 50px 90px -50px rgba(0, 0, 0, 0.95) !important;
overflow: visible !important;
}
/* glass sheen along the top of the visor */
html body #trade#trade .trade-layout::before,
html[data-theme] body #trade#trade .trade-layout::before {
content: "" !important;
position: absolute !important;
inset: 2px !important;
z-index: 3 !important;
pointer-events: none !important;
border-radius: inherit !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 16%),
radial-gradient(120% 80% at 50% 120%, rgba(120, 80, 255, 0.10), transparent 60%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
/* the bloom that lifts the visor off the band */
html body #trade#trade .trade-layout::after,
html[data-theme] body #trade#trade .trade-layout::after {
content: "" !important;
position: absolute !important;
left: 6% !important;
right: 6% !important;
bottom: -34px !important;
height: 70px !important;
z-index: -1 !important;
pointer-events: none !important;
border-radius: 50% !important;
background: radial-gradient(50% 100% at 50% 0%, rgba(140, 86, 255, 0.55) 0%, rgba(140, 86, 255, 0) 72%) !important;
filter: blur(20px) !important;
}
/* the faq wrapper becomes invisible so card + mascot join the visor grid */
html body #trade#trade .trade-faq,
html[data-theme] body #trade#trade .trade-faq {
display: contents !important;
}
/* dissolve the old monitor housing - the board panels sit in the visor now */
html body #trade#trade .trade-layout > .trade-screen,
html[data-theme] body #trade#trade .trade-layout > .trade-screen {
grid-area: board !important;
direction: rtl !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
isolation: auto !important;
overflow: visible !important;
}
html body #trade#trade .trade-layout > .trade-screen::before,
html body #trade#trade .trade-layout > .trade-screen::after {
display: none !important;
}
html body #trade#trade .trade-layout > .trade-screen > #trade-board.trade-board,
html[data-theme] body #trade#trade .trade-layout > .trade-screen > #trade-board.trade-board {
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* the card: a curved glass panel that belongs to the visor */
html body #trade#trade .trade-faq-card,
html[data-theme] body #trade#trade .trade-faq-card {
grid-area: card !important;
direction: rtl !important;
display: flex !important;
flex-direction: column !important;
align-self: stretch !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: clamp(12px, 1.4vw, 20px) 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: clamp(22px, 2.4vw, 40px) !important;
background-color: #141722 !important;
background-image:
radial-gradient(420px 240px at 88% -12%, rgba(126, 87, 255, 0.20), transparent 70%),
radial-gradient(300px 180px at 0% 108%, rgba(46, 160, 255, 0.07), transparent 74%),
linear-gradient(180deg, #1b1f2c 0%, #141722 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.07),
inset 0 -22px 44px -30px rgba(0, 0, 0, 0.75),
0 18px 40px -30px rgba(0, 0, 0, 0.9) !important;
animation: none !important;
overflow: hidden !important;
}
html body #trade#trade .trade-faq-card::before {
display: none !important;
}
html body #trade#trade .trade-faq-card::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
border-radius: inherit !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 12%),
linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0.24) 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html body #trade#trade .trade-faq-head {
flex: 0 0 auto !important;
border-radius: clamp(22px, 2.4vw, 40px) clamp(22px, 2.4vw, 40px) 0 0 !important;
background: linear-gradient(180deg, rgba(126, 87, 255, 0.10), rgba(255, 255, 255, 0.015)) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html body #trade#trade .trade-faq-list {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-evenly !important;
padding: clamp(4px, 0.6vw, 9px) clamp(9px, 1.1vw, 15px) clamp(6px, 0.8vw, 11px) !important;
}
html body #trade#trade .trade-faq-item {
flex: 0 0 auto !important;
}
/* the mascot stands at the left end of the visor */
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
grid-area: mascot !important;
direction: rtl !important;
justify-self: center !important;
align-self: center !important;
width: 100% !important;
max-width: 235px !important;
margin: 0 !important;
transform: none !important;
filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(146, 96, 255, 0.24)) !important;
}
html body #trade#trade .trade-faq-glow,
html[data-theme] body #trade#trade .trade-faq-glow {
inset: 14% 0 0 0 !important;
}
/* ---- narrower screens: stack the visor contents -------------------- */
@media (max-width: 1180px) {
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: "board" "card" "mascot" !important;
direction: rtl !important;
gap: clamp(10px, 1.6vw, 18px) !important;
padding: clamp(12px, 2vw, 22px) !important;
border-radius: clamp(38px, 6vw, 64px) !important;
}
html body #trade#trade .trade-faq-card,
html[data-theme] body #trade#trade .trade-faq-card {
align-self: stretch !important;
margin: 0 !important;
}
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
max-width: 260px !important;
margin-top: 2px !important;
}
}
@media (max-width: 620px) {
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
max-width: 210px !important;
}
}
/* part 406 - the 3x3 board gets its own rounded VR housing back (the thick
dark bezel with the neon rim and the wide glow). The questions card keeps
exactly the design it has now; only the board is re-housed. */
html body #trade#trade .trade-layout > .trade-screen,
html[data-theme] body #trade#trade .trade-layout > .trade-screen {
padding: clamp(9px, 0.9vw, 15px) !important;
border: 0 !important;
border-radius: clamp(28px, 3vw, 48px) !important;
background-color: #101219 !important;
background-image:
linear-gradient(152deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.05) 17%,
rgba(128, 156, 255, 0.10) 52%,
rgba(6, 8, 16, 0.70) 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(190, 210, 255, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.40),
inset 2px 0 0 rgba(255, 255, 255, 0.05),
inset -2px 0 0 rgba(255, 255, 255, 0.05),
inset 0 -2px 0 rgba(0, 0, 0, 0.60),
0 0 44px -8px rgba(140, 90, 255, 0.46),
0 26px 60px -34px rgba(0, 0, 0, 0.95) !important;
transform: none !important;
overflow: hidden !important;
}
/* recessed display surface inside the housing */
html body #trade#trade .trade-layout > .trade-screen > #trade-board.trade-board,
html[data-theme] body #trade#trade .trade-layout > .trade-screen > #trade-board.trade-board {
background-color: #0b0d14 !important;
background-image:
radial-gradient(560px 300px at 84% -14%, rgba(126, 87, 255, 0.14), transparent 72%),
linear-gradient(180deg, rgba(20, 24, 38, 0.85) 0%, rgba(8, 10, 16, 0.95) 100%) !important;
border-radius: clamp(20px, 2.2vw, 38px) !important;
box-shadow:
inset 0 0 0 1px rgba(160, 180, 255, 0.14),
inset 0 10px 24px -14px rgba(0, 0, 0, 0.90),
inset 0 -12px 26px -18px rgba(0, 0, 0, 0.85) !important;
overflow: hidden !important;
}
/* the card lines up with the outer housing of the board */
html body #trade#trade .trade-faq-card,
html[data-theme] body #trade#trade .trade-faq-card {
margin-block: 0 !important;
}
@media (max-width: 1180px) {
html body #trade#trade .trade-layout > .trade-screen,
html[data-theme] body #trade#trade .trade-layout > .trade-screen {
border-radius: clamp(24px, 5vw, 40px) !important;
}
html body #trade#trade .trade-layout > .trade-screen > #trade-board.trade-board,
html[data-theme] body #trade#trade .trade-layout > .trade-screen > #trade-board.trade-board {
border-radius: clamp(17px, 4vw, 30px) !important;
}
html body #trade#trade .trade-faq-card,
html[data-theme] body #trade#trade .trade-faq-card {
margin-block: 0 !important;
}
}
/* part 407 - drop the outer visor entirely. The board keeps its own rounded
VR housing, and the mascot + questions now live inside one shared panel.
The two search wells become side-menu slabs, Minecraft style. */
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
display: grid !important;
direction: ltr !important;
grid-template-columns: minmax(0, 1fr) clamp(400px, 38%, 500px) !important;
grid-template-areas: "board faq" !important;
align-items: stretch !important;
column-gap: clamp(16px, 1.8vw, 30px) !important;
row-gap: clamp(14px, 1.8vw, 24px) !important;
width: min(1240px, 100%) !important;
margin-inline: auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
overflow: visible !important;
}
html body #trade#trade .trade-layout::before,
html body #trade#trade .trade-layout::after {
display: none !important;
}
/* ---- the mascot + questions card: one connected unit ------------------ */
html body #trade#trade .trade-faq,
html[data-theme] body #trade#trade .trade-faq {
grid-area: faq !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: stretch !important;
gap: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
direction: rtl !important;
border-radius: clamp(22px, 2.4vw, 36px) !important;
background-color: #141722 !important;
background-image:
radial-gradient(380px 300px at 10% 86%, rgba(126, 87, 255, 0.20), transparent 72%),
linear-gradient(180deg, #1b1f2c 0%, #141722 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 18px 40px -30px rgba(0, 0, 0, 0.90) !important;
overflow: hidden !important;
}
html body #trade#trade .trade-faq-card,
html[data-theme] body #trade#trade .trade-faq-card {
order: 0 !important;
flex: 1 1 auto !important;
align-self: stretch !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
animation: none !important;
overflow: visible !important;
}
html body #trade#trade .trade-faq-card::before,
html body #trade#trade .trade-faq-card::after {
display: none !important;
}
html body #trade#trade .trade-faq-head {
border-radius: 0 !important;
}
html body #trade#trade .trade-faq-list {
padding: clamp(4px, 0.6vw, 9px) clamp(10px, 1.1vw, 16px) clamp(8px, 0.9vw, 12px) !important;
}
/* the mascot sits at the left end of the same panel, on a soft glow */
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
order: 1 !important;
position: relative !important;
flex: 0 0 clamp(118px, 13vw, 190px) !important;
align-self: stretch !important;
width: clamp(118px, 13vw, 190px) !important;
max-width: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 4px 10px !important;
transform: none !important;
background:
radial-gradient(64% 50% at 50% 60%, rgba(126, 87, 255, 0.14), transparent 76%) !important;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06) !important;
filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(146, 96, 255, 0.22)) !important;
}
html body #trade#trade .trade-faq-art img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
html body #trade#trade .trade-faq-glow {
inset: 10% 0 0 0 !important;
}
/* ---- the search wells: beveled side-menu slabs ------------------------ */
html body #trade#trade .search-field-small,
html[data-theme] body #trade#trade .search-field-small {
height: 58px !important;
border: 0 !important;
background-color: #2b2b31 !important;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(0, 0, 0, 0.26) 100%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 3px, rgba(0, 0, 0, 0.022) 3px 6px) !important;
color: #e9e9f2 !important;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.20),
inset -3px -3px 0 rgba(0, 0, 0, 0.66),
0 0 0 2px rgba(8, 8, 12, 0.92),
0 0 0 3px rgba(255, 255, 255, 0.06),
0 12px 24px -18px rgba(0, 0, 0, 0.95) !important;
}
html body #trade#trade .search-field-small input {
color: #f4f5fb !important;
font-size: 15px !important;
}
html body #trade#trade .search-field-small input::placeholder {
color: rgba(226, 228, 240, 0.46) !important;
}
html body #trade#trade .search-field-small .icon {
color: #b9b9c9 !important;
}
/* the well hugs the outer side of its board panel */
html body #trade#trade .trade-column[data-side="offer"] .trade-search {
margin-inline-start: -18px !important;
margin-inline-end: 0 !important;
}
html body #trade#trade .trade-column[data-side="request"] .trade-search {
margin-inline-end: -18px !important;
margin-inline-start: 0 !important;
}
html body #trade#trade .trade-column[data-side="offer"] .search-field-small {
border-radius: 4px 16px 16px 4px !important;
background-color: #2b2b31 !important;
}
html body #trade#trade .trade-column[data-side="request"] .search-field-small {
border-radius: 16px 4px 4px 16px !important;
background-color: #3a2b57 !important;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(0, 0, 0, 0.24) 100%) !important;
}
html body #trade#trade .trade-column[data-side="request"] .search-field-small input,
html body #trade#trade .trade-column[data-side="request"] .search-field-small .icon {
color: #efe9ff !important;
}
html body #trade#trade .search-field-small:hover {
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.26),
inset -3px -3px 0 rgba(0, 0, 0, 0.66),
0 0 0 2px rgba(8, 8, 12, 0.92),
0 0 0 3px rgba(255, 255, 255, 0.10),
0 12px 24px -18px rgba(0, 0, 0, 0.95) !important;
}
html body #trade#trade .search-field-small:focus-within {
background-color: #2f2f36 !important;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.28),
inset -3px -3px 0 rgba(0, 0, 0, 0.66),
0 0 0 2px rgba(8, 8, 12, 0.94),
0 0 0 4px rgba(150, 110, 255, 0.42) !important;
}
html body #trade#trade .trade-column[data-side="request"] .search-field-small:focus-within {
background-color: #40305f !important;
}
/* ---- narrower screens -------------------------------------------------- */
@media (max-width: 1180px) {
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: "board" "faq" !important;
}
}
@media (max-width: 620px) {
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
flex-basis: 104px !important;
width: 104px !important;
padding: 6px 2px 8px !important;
}
}
/* part 408 - layout fixes: the search wells sit inside their panel again
(full width, flush with the top of the panel, no overhang), the characters
get their own inset block next to the questions, and the search corner
rounding is smoothed on the outer sides. */
html body #trade#trade .trade-column[data-side="offer"] .trade-search,
html body #trade#trade .trade-column[data-side="request"] .trade-search,
html[data-theme] body #trade#trade .trade-column[data-side="offer"] .trade-search,
html[data-theme] body #trade#trade .trade-column[data-side="request"] .trade-search {
margin-inline: 0 !important;
margin-block: 0 10px !important;
width: 100% !important;
}
html body #trade#trade .trade-column .search-field-small,
html[data-theme] body #trade#trade .trade-column .search-field-small {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
html body #trade#trade .trade-column[data-side="offer"] .search-field-small {
border-radius: 10px 18px 18px 10px !important;
}
html body #trade#trade .trade-column[data-side="request"] .search-field-small {
border-radius: 18px 10px 10px 18px !important;
}
/* the characters: an inset block of their own, attached to the questions */
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
flex: 0 0 clamp(150px, 14vw, 200px) !important;
width: clamp(150px, 14vw, 200px) !important;
margin: 0 !important;
padding: 10px 6px 14px !important;
border-radius: 0 !important;
background:
radial-gradient(64% 50% at 50% 60%, rgba(126, 87, 255, 0.13), transparent 76%) !important;
background-color: transparent !important;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.055) !important;
filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5)) !important;
}
/* keep the question text away from the mascot block */
html body #trade#trade .trade-faq-list,
html[data-theme] body #trade#trade .trade-faq-list {
padding-inline-end: clamp(16px, 1.5vw, 22px) !important;
}
@media (max-width: 620px) {
html body #trade#trade .trade-faq-art,
html[data-theme] body #trade#trade .trade-faq-art {
flex-basis: 118px !important;
width: 118px !important;
margin: 7px !important;
padding: 8px 6px 10px !important;
}
}
/* part 409 - the guide/questions card and its characters are gone. Only the
trade board remains, centered and sized so the 3x3 sides keep breathing. */
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: "board" !important;
justify-items: center !important;
width: min(1040px, 100%) !important;
}
html body #trade#trade .trade-screen,
html[data-theme] body #trade#trade .trade-screen {
grid-area: board !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: auto !important;
}
@media (max-width: 760px) {
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
width: 100% !important;
}
}
/* stacked board (<=980px): keep the single card from stretching into a
giant square once the two sides sit on top of each other. */
@media (max-width: 980px) {
html body #trade#trade .trade-layout > .trade-screen,
html[data-theme] body #trade#trade .trade-layout > .trade-screen {
width: 100% !important;
max-width: min(580px, 100%) !important;
margin-inline: auto !important;
}
html body #trade#trade .trade-screen > #trade-board.trade-board,
html[data-theme] body #trade#trade .trade-screen > #trade-board.trade-board {
width: 100% !important;
max-width: min(560px, 100%) !important;
margin-inline: auto !important;
}
}
/* part 410 - the items showcase is gone. In its place: a Mikmak-style
community message board, with an endless vertical scroll. */
html body #showcase .mk-board,
html[data-theme] body #showcase .mk-board {
--mk-card: #ffffff;
--mk-card-hi: #eef6ff;
--mk-border: #c3daf0;
--mk-border-hi: #93c0e8;
--mk-ink: #16324f;
--mk-ink-2: #35526f;
--mk-muted: #7d94ab;
--mk-blue: #3d80c9;
display: grid !important;
grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr) !important;
align-items: center !important;
gap: clamp(28px, 4vw, 62px) !important;
padding-block: clamp(32px, 4vw, 60px) !important;
direction: rtl !important;
}
html[data-theme="dark"] body #showcase .mk-board {
--mk-card: #151d2b;
--mk-card-hi: #1a2740;
--mk-border: #2f4a68;
--mk-border-hi: #3f6b96;
--mk-ink: #e8f1fb;
--mk-ink-2: #b9cbdd;
--mk-muted: #7e94aa;
--mk-blue: #7bb4ec;
}
html body #showcase .mk-board-intro,
html[data-theme] body #showcase .mk-board-intro {
max-width: 440px;
}
html body #showcase .mk-kicker,
html[data-theme] body #showcase .mk-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 13px;
border-radius: 999px;
border: 1px solid #cfe4f8;
background: #eaf3fd;
color: var(--mk-blue);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.03em;
}
html[data-theme="dark"] body #showcase .mk-kicker {
border-color: #2f4a68;
background: #172235;
}
html body #showcase .mk-board-title,
html[data-theme] body #showcase .mk-board-title {
margin: 16px 0 12px;
font-size: clamp(2rem, 3.3vw, 2.9rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--mk-ink);
}
html body #showcase .mk-board-title em,
html[data-theme] body #showcase .mk-board-title em {
font-style: normal;
color: var(--mk-blue);
}
html body #showcase .mk-board-sub,
html[data-theme] body #showcase .mk-board-sub {
margin: 0 0 22px;
max-width: 40ch;
color: var(--mk-ink-2);
font-size: 15px;
line-height: 1.8;
}
html body #showcase .mk-board-meta,
html[data-theme] body #showcase .mk-board-meta {
display: flex;
align-items: center;
gap: 10px;
color: var(--mk-muted);
font-size: 13px;
font-weight: 600;
}
html body #showcase .mk-live-dot,
html[data-theme] body #showcase .mk-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #39b97a;
box-shadow: 0 0 0 4px rgba(57, 185, 122, 0.16);
animation: mk-live-pulse 2.4s ease-in-out infinite;
}
@keyframes mk-live-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(57, 185, 122, 0.16); }
50% { box-shadow: 0 0 0 7px rgba(57, 185, 122, 0.05); }
}
/* the endless feed window */
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
position: relative;
height: clamp(420px, 52vh, 600px);
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%);
}
html body #showcase .mk-feed-track,
html[data-theme] body #showcase .mk-feed-track {
display: flex;
flex-direction: column;
will-change: transform;
animation: mk-feed-scroll 58s linear infinite;
}
html body #showcase .mk-feed:hover .mk-feed-track,
html body #showcase .mk-feed:focus-within .mk-feed-track {
animation-play-state: paused;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
display: flex;
flex-direction: column;
}
@keyframes mk-feed-scroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
/* one message card */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
margin: 0 0 14px;
padding: 14px 16px 15px;
border: 1px solid var(--mk-border);
border-radius: 12px;
background: var(--mk-card);
box-shadow:
0 1px 0 rgba(22, 50, 79, 0.04),
0 8px 18px -16px rgba(22, 50, 79, 0.55);
}
html body #showcase .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-msg.is-pinned {
background: var(--mk-card-hi);
border-color: var(--mk-border-hi);
box-shadow:
0 0 0 1px rgba(147, 192, 232, 0.32),
0 12px 26px -22px rgba(22, 50, 79, 0.7);
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
background: #e8f1fa;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px var(--mk-border), 0 6px 12px -8px rgba(22, 50, 79, 0.55);
}
html[data-theme="dark"] body #showcase .mk-msg-avatar {
border-color: #1d2a3d;
}
html body #showcase .mk-msg-main,
html[data-theme] body #showcase .mk-msg-main {
min-width: 0;
}
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
html body #showcase .mk-msg-name,
html[data-theme] body #showcase .mk-msg-name {
font-size: 14.5px;
font-weight: 800;
color: var(--mk-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
display: inline-flex;
align-items: center;
gap: 5px;
margin-inline-start: auto;
font-size: 11.5px;
font-weight: 600;
color: var(--mk-muted);
white-space: nowrap;
direction: ltr;
}
html body #showcase .mk-msg-date svg,
html[data-theme] body #showcase .mk-msg-date svg {
width: 13px;
height: 13px;
flex: none;
opacity: 0.75;
}
html body #showcase .mk-msg-score,
html[data-theme] body #showcase .mk-msg-score {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-weight: 800;
color: var(--mk-muted);
white-space: nowrap;
direction: ltr;
}
html body #showcase .mk-msg-score svg,
html[data-theme] body #showcase .mk-msg-score svg {
width: 15px;
height: 15px;
flex: none;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.65;
color: var(--mk-ink-2);
}
@media (max-width: 1080px) {
html body #showcase .mk-board,
html[data-theme] body #showcase .mk-board {
grid-template-columns: minmax(0, 1fr) !important;
gap: 26px !important;
}
html body #showcase .mk-board-intro,
html[data-theme] body #showcase .mk-board-intro {
max-width: 640px;
}
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
height: clamp(400px, 54vh, 520px);
}
}
@media (max-width: 620px) {
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
padding: 12px 12px 13px;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 42px;
height: 42px;
}
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
gap: 7px;
flex-wrap: wrap;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
order: 3;
width: 100%;
margin-inline-start: 0;
justify-content: flex-end;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
font-size: 13.5px;
}
}
@media (prefers-reduced-motion: reduce) {
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
overflow-y: auto;
-webkit-mask-image: none;
mask-image: none;
}
html body #showcase .mk-feed-track,
html[data-theme] body #showcase .mk-feed-track {
animation: none !important;
}
}
/* part 411 - the message wall leaves its box. No headings, no inner panel:
it fills the whole showcase band edge to edge and slides underneath the
hero above and the catalog below. */
html body #showcase {
position: relative !important;
z-index: 0 !important;
overflow: visible !important;
padding: 0 !important;
}
html body #showcase > .shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
html body #showcase .mk-board,
html[data-theme] body #showcase .mk-board {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
height: clamp(620px, 92vh, 980px) !important;
margin-block: -54px !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
padding: 0 clamp(18px, 2.6vw, 44px) !important;
align-content: start !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
margin: 0 !important;
height: 100% !important;
}
/* the neighbouring bands sit on top, so the messages scroll under them */
html body .hero-band,
html body #catalog {
position: relative !important;
z-index: 2 !important;
}
@media (max-width: 1080px) {
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 680px) {
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
grid-template-columns: minmax(0, 1fr) !important;
}
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
height: clamp(560px, 84vh, 760px) !important;
}
}
/* three copies of the wall, so the loop slides by exactly one copy */
@keyframes mk-feed-scroll {
from { transform: translateY(0); }
to { transform: translateY(-33.3333%); }
}
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
height: clamp(560px, 84vh, 880px) !important;
}
@media (max-width: 680px) {
html body #showcase .mk-feed,
html[data-theme] body #showcase .mk-feed {
height: clamp(520px, 78vh, 700px) !important;
}
}
/* part 412 - one single column of message cards, styled exactly like the
Mikmak messages board: white card, light blue frame, name + score on the
right, date on the left, message underneath. */
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
grid-template-columns: minmax(0, 1fr) !important;
gap: 9px !important;
padding: 0 clamp(14px, 2vw, 28px) !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
display: block !important;
height: auto !important;
margin: 0 !important;
padding: 11px 15px 12px !important;
border: 1px solid #b7d3ec !important;
border-radius: 9px !important;
background: #fbfdff !important;
background-image: none !important;
box-shadow: none !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
display: none !important;
}
html body #showcase .mk-msg-main,
html[data-theme] body #showcase .mk-msg-main {
display: block !important;
}
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
html body #showcase .mk-msg-name,
html[data-theme] body #showcase .mk-msg-name {
order: 1 !important;
font-size: 14px !important;
font-weight: 800 !important;
color: #1c3a5b !important;
}
html body #showcase .mk-msg-score,
html[data-theme] body #showcase .mk-msg-score {
order: 2 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #8095aa !important;
direction: rtl !important;
}
html body #showcase .mk-msg-score svg,
html[data-theme] body #showcase .mk-msg-score svg {
width: 15px !important;
height: 15px !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
order: 3 !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
margin-inline-start: auto !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #8ea4b9 !important;
direction: ltr !important;
white-space: nowrap !important;
}
html body #showcase .mk-msg-date svg,
html[data-theme] body #showcase .mk-msg-date svg {
width: 13px !important;
height: 13px !important;
opacity: 0.8 !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
margin: 4px 0 0 !important;
font-size: 13.8px !important;
line-height: 1.7 !important;
color: #1f3c58 !important;
}
@media (max-width: 680px) {
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
flex-wrap: nowrap !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
order: 3 !important;
width: auto !important;
margin-inline-start: auto !important;
justify-content: flex-start !important;
}
}
/* keep the single column readable on very wide screens */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
width: 100% !important;
max-width: 1080px !important;
margin-inline: auto !important;
}
/* part 413 - message card exactly like the Mikmak reference: clean white
rectangle, thin blue-grey frame, name top-right, date top-left, text under
it, and the round avatar with its counter attached to the right edge. */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
position: relative !important;
padding: 10px 16px 12px !important;
border: 1px solid #c0d3e4 !important;
border-radius: 10px !important;
background: #ffffff !important;
background-image: none !important;
box-shadow: none !important;
overflow: visible !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
position: absolute !important;
top: 50% !important;
inset-inline-end: -14px !important;
transform: translateY(-50%) !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
direction: ltr !important;
margin: 0 !important;
}
html body #showcase .mk-msg-likes,
html[data-theme] body #showcase .mk-msg-likes {
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1 !important;
color: #57a6d6 !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
display: block !important;
width: 46px !important;
height: 46px !important;
border-radius: 50% !important;
object-fit: cover !important;
background: #eaf3fb !important;
border: 2px solid #ffffff !important;
box-shadow: 0 0 0 1px #c6d9e9, 0 4px 10px -6px rgba(20, 50, 80, 0.45) !important;
}
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
padding-inline-end: 0 !important;
}
html body #showcase .mk-msg-name,
html[data-theme] body #showcase .mk-msg-name {
font-size: 14.5px !important;
font-weight: 700 !important;
color: #17324d !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
font-size: 12px !important;
font-weight: 500 !important;
color: #9aacbc !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-end: 54px !important;
margin: 3px 0 0 !important;
font-size: 13.8px !important;
line-height: 1.7 !important;
color: #1c3550 !important;
}
@media (max-width: 680px) {
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
padding: 9px 12px 11px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
inset-inline-end: -8px !important;
gap: 6px !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 38px !important;
height: 38px !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-end: 44px !important;
}
}
/* part 414 - the header row keeps clear of the avatar: date on the far left,
name on the right, avatar straddling the right frame edge. */
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
justify-content: space-between !important;
padding-inline-end: 60px !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
margin: 0 !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
inset-inline-end: -23px !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-end: 60px !important;
}
@media (max-width: 680px) {
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
padding-inline-end: 48px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
inset-inline-end: -19px !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-end: 48px !important;
}
}
/* part 415 - RTL fix: the avatar hugs the inline-start (right) edge, so the
text and header need their clear space on the start side. */
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
padding-inline-start: 60px !important;
padding-inline-end: 0 !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-start: 60px !important;
padding-inline-end: 0 !important;
}
@media (max-width: 680px) {
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
padding-inline-start: 48px !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-start: 48px !important;
}
}
/* part 416 - on narrow screens the avatar must not push past the viewport. */
@media (max-width: 680px) {
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
inset-inline-end: -8px !important;
}
}
/* part 417 - remove the leftover panel ring/tint from the showcase shell, so
nothing reads as an inner rectangle around the message wall. */
html body #showcase > .shell,
html[data-theme] body #showcase > .shell {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
z-index: auto !important;
}
/* part 418 - keep room at the sides for the avatar that hangs over the frame,
so it never runs past the viewport. */
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 clamp(30px, 3vw, 48px) !important;
}
@media (max-width: 680px) {
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 14px !important;
}
}
/* part 419 - the real Mikmak board design: grey gradient card with a blue
frame, name + likes at the top right, time + relative day at the top left,
message under it, and the big rounded avatar sitting outside the right
frame. */
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
gap: 30px !important;
padding: 0 clamp(66px, 6vw, 100px) !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
position: relative !important;
padding: 16px 26px 18px !important;
border: 2px solid #7ba5d3 !important;
border-radius: 11px !important;
background: linear-gradient(180deg, #efefef 0%, #dcdcdc 100%) !important;
background-color: #e6e6e6 !important;
box-shadow: none !important;
overflow: visible !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
position: absolute !important;
top: 6px !important;
inset-inline-end: -60px !important;
transform: none !important;
display: block !important;
direction: ltr !important;
margin: 0 !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
display: block !important;
width: 78px !important;
height: 78px !important;
border: 0 !important;
border-radius: 14px !important;
box-shadow: none !important;
background: transparent !important;
object-fit: contain !important;
}
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 0 !important;
flex-wrap: nowrap !important;
}
html body #showcase .mk-msg-likes,
html[data-theme] body #showcase .mk-msg-likes {
order: 1 !important;
font-size: 19px !important;
font-weight: 500 !important;
line-height: 1 !important;
color: #bdbdbd !important;
direction: ltr !important;
}
html body #showcase .mk-msg-name,
html[data-theme] body #showcase .mk-msg-name {
order: 2 !important;
margin-inline-end: auto !important;
font-size: 17px !important;
font-weight: 800 !important;
color: #121212 !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
order: 3 !important;
display: inline-flex !important;
align-items: baseline !important;
gap: 9px !important;
margin: 0 !important;
width: auto !important;
direction: ltr !important;
white-space: nowrap !important;
}
html body #showcase .mk-msg-date time,
html[data-theme] body #showcase .mk-msg-date time {
font-size: 16px !important;
font-weight: 700 !important;
color: #5c5c5c !important;
}
html body #showcase .mk-msg-rel,
html[data-theme] body #showcase .mk-msg-rel {
font-size: 15px !important;
font-weight: 500 !important;
color: #9d9d9d !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding: 0 !important;
margin: 9px 0 0 !important;
font-size: 18px !important;
line-height: 1.55 !important;
color: #1a1a1a !important;
}
@media (max-width: 680px) {
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
gap: 18px !important;
padding: 0 30px !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
padding: 12px 16px 14px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
top: 4px !important;
inset-inline-end: -24px !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 54px !important;
height: 54px !important;
border-radius: 11px !important;
}
html body #showcase .mk-msg-name,
html[data-theme] body #showcase .mk-msg-name {
font-size: 15px !important;
}
html body #showcase .mk-msg-likes,
html[data-theme] body #showcase .mk-msg-likes {
font-size: 16px !important;
}
html body #showcase .mk-msg-date time,
html[data-theme] body #showcase .mk-msg-date time {
font-size: 13.5px !important;
}
html body #showcase .mk-msg-rel,
html[data-theme] body #showcase .mk-msg-rel {
font-size: 12.5px !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
font-size: 15px !important;
}
}
/* part 420 - breathing room at the sides and the exact grey of the board. */
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 clamp(76px, 7vw, 110px) !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
background: linear-gradient(180deg, #ebebeb 0%, #d8d8d8 100%) !important;
}
@media (max-width: 680px) {
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 34px !important;
}
}
/* part 421 - spacing between name/likes and between time/day, plus a mobile
avatar that never covers the name or the count. */
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
gap: 16px !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
gap: 14px !important;
}
@media (max-width: 680px) {
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 44px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
inset-inline-end: -34px !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 48px !important;
height: 48px !important;
}
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top {
gap: 10px !important;
}
html body #showcase .mk-msg-date,
html[data-theme] body #showcase .mk-msg-date {
gap: 8px !important;
}
}
/* part 422 - mobile: a small inset so the count never slips under the avatar. */
@media (max-width: 680px) {
html body #showcase .mk-msg-top,
html[data-theme] body #showcase .mk-msg-top,
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
padding-inline-start: 12px !important;
}
}
/* part 423 - the wall stops looking like a long bar: shorter, taller cards
centred on the page, and a background that flows from the sky above into
the blue catalog below. */
html body #showcase,
html[data-theme] body #showcase {
background: linear-gradient(180deg,
#b9cfd9 0%,
#c4d9e3 24%,
#b6d1e0 50%,
#8fb5e0 70%,
#5482dc 86%,
#2563eb 100%) !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
width: 100% !important;
max-width: 880px !important;
min-height: 128px !important;
padding: 18px 28px 20px !important;
border: 2px solid #86a9c6 !important;
border-radius: 12px !important;
background: linear-gradient(180deg, #f5f8fa 0%, #e7edf2 100%) !important;
box-shadow: 0 10px 24px -20px rgba(12, 40, 74, 0.75) !important;
}
html body #showcase .mk-msg-name,
html[data-theme] body #showcase .mk-msg-name {
font-size: 17.5px !important;
color: #14304a !important;
}
html body #showcase .mk-msg-likes,
html[data-theme] body #showcase .mk-msg-likes {
font-size: 19px !important;
color: #aebdcb !important;
}
html body #showcase .mk-msg-date time,
html[data-theme] body #showcase .mk-msg-date time {
color: #4f6478 !important;
}
html body #showcase .mk-msg-rel,
html[data-theme] body #showcase .mk-msg-rel {
color: #90a2b2 !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
margin-top: 10px !important;
font-size: 17.5px !important;
line-height: 1.62 !important;
color: #17324a !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 84px !important;
height: 84px !important;
padding: 3px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 2px 10px -2px rgba(16, 44, 78, 0.35) !important;
object-fit: contain !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
top: 8px !important;
inset-inline-end: -64px !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
gap: 26px !important;
padding: 0 clamp(84px, 8vw, 150px) !important;
}
@media (max-width: 900px) {
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
max-width: 100% !important;
}
}
@media (max-width: 680px) {
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
min-height: 0 !important;
padding: 13px 16px 15px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
top: 4px !important;
inset-inline-end: -30px !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 52px !important;
height: 52px !important;
padding: 2px !important;
border-radius: 12px !important;
}
html body #showcase .mk-msg-text,
html[data-theme] body #showcase .mk-msg-text {
margin-top: 6px !important;
font-size: 15px !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 40px !important;
}
}
/* part 424 - a softer start at the sky edge, shorter card length and a
slightly taller bubble so the proportions sit like the reference. */
html body #showcase,
html[data-theme] body #showcase {
background: linear-gradient(180deg,
#d8e7ed 0%,
#d0e2ea 22%,
#b8d3e3 48%,
#8fb5e0 68%,
#5482dc 85%,
#2563eb 100%) !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
max-width: 820px !important;
min-height: 140px !important;
padding: 20px 28px 22px !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
gap: 28px !important;
padding: 0 clamp(84px, 9vw, 180px) !important;
}
@media (max-width: 680px) {
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
min-height: 0 !important;
padding: 13px 16px 15px !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 40px !important;
}
}
/* part 425 - start the showcase exactly on the pale blue of the band above,
then run smoothly into the catalog blue. */
html body #showcase,
html[data-theme] body #showcase {
background: linear-gradient(180deg,
#c9dce4 0%,
#cfe1e9 22%,
#b6d2e3 48%,
#8fb5e0 68%,
#5482dc 85%,
#2563eb 100%) !important;
}
/* part 426 - reach the catalog blue before the catalog starts, so the seam
between the two sections disappears completely. */
html body #showcase,
html[data-theme] body #showcase {
background: linear-gradient(180deg,
#c9dce4 0%,
#cfe1e9 20%,
#bcd6e6 45%,
#93b8e1 65%,
#5c88dd 80%,
#2563eb 88%,
#2563eb 100%) !important;
}
/* part 427 - back to the plain white section, and the avatar now sits INSIDE
the card at the top-right corner (white circle), exactly like the reference:
avatar on the far right, count + name to its left on the same top line, the
time + relative day pushed to the far left, and the message right aligned
under them without ever running under the avatar. */
html body #showcase,
html[data-theme] body #showcase {
background: #ffffff !important;
background-image: none !important;
}
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
padding: 16px 20px 18px !important;
overflow: visible !important;
}
html body #showcase .mk-msg-main,
html[data-theme] body #showcase .mk-msg-main {
padding-inline-start: 88px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
position: absolute !important;
top: 14px !important;
inset-inline-end: 16px !important;
inset-inline-start: auto !important;
display: block !important;
direction: ltr !important;
margin: 0 !important;
transform: none !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
display: block !important;
width: 72px !important;
height: 72px !important;
padding: 2px !important;
box-sizing: border-box !important;
border: 0 !important;
border-radius: 50% !important;
background: #ffffff !important;
box-shadow: 0 2px 8px -2px rgba(20, 48, 74, 0.35), 0 0 0 1px rgba(120, 165, 211, 0.35) !important;
object-fit: contain !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
gap: 26px !important;
padding: 0 clamp(48px, 6vw, 120px) !important;
}
@media (max-width: 900px) {
html body #showcase .mk-msg-main,
html[data-theme] body #showcase .mk-msg-main {
padding-inline-start: 84px !important;
}
}
@media (max-width: 680px) {
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
padding: 12px 14px 14px !important;
}
html body #showcase .mk-msg-main,
html[data-theme] body #showcase .mk-msg-main {
padding-inline-start: 68px !important;
}
html body #showcase .mk-msg-aside,
html[data-theme] body #showcase .mk-msg-aside {
top: 10px !important;
inset-inline-end: 12px !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
width: 56px !important;
height: 56px !important;
}
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding: 0 24px !important;
}
}
/* part 428 - trim the empty space on one-line cards and give the mobile
avatar a little breathing room from the text. */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg {
min-height: 118px !important;
}
@media (max-width: 680px) {
html body #showcase .mk-msg-main,
html[data-theme] body #showcase .mk-msg-main {
padding-inline-start: 72px !important;
}
}
/* part 429 - visitor reviews panel (blue, like the reference) and no shadows
anywhere on the message wall / avatars. */
html body #reviews,
html[data-theme] body #reviews {
position: relative;
z-index: 1;
background: #ffffff !important;
border: 0 !important;
padding-block: clamp(30px, 4vw, 56px) clamp(36px, 4.6vw, 66px) !important;
}
html body #reviews .shell,
html[data-theme] body #reviews .shell {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body .mk-review,
html[data-theme] body .mk-review {
width: min(700px, calc(100% - 32px));
margin-inline: auto;
direction: rtl;
background: #59a8e2;
border: 0;
border-radius: 10px;
overflow: hidden;
box-shadow: none !important;
}
html body .mk-review-head,
html[data-theme] body .mk-review-head {
background: #4f9edb;
padding: 12px 20px;
}
html body .mk-review-title,
html[data-theme] body .mk-review-title {
margin: 0;
color: #ffffff;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
text-align: right;
}
html body .mk-review-body,
html[data-theme] body .mk-review-body {
display: grid;
gap: 14px;
padding: 18px 20px 24px;
}
html body .mk-review-row,
html[data-theme] body .mk-review-row {
display: flex;
align-items: center;
gap: 16px;
}
html body .mk-review-row-area,
html[data-theme] body .mk-review-row-area {
align-items: flex-start;
}
html body .mk-review-label,
html[data-theme] body .mk-review-label {
flex: 0 0 auto;
min-width: 76px;
color: #ffffff;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
text-align: right;
}
html body .mk-review-input,
html[data-theme] body .mk-review-input,
html body .mk-review-textarea,
html[data-theme] body .mk-review-textarea {
flex: 1 1 auto;
min-width: 0;
width: 100%;
background: #ffffff;
color: #12324a;
border: 1px solid #3b8bc7;
border-radius: 3px;
padding: 8px 10px;
font: inherit;
font-size: 15px;
box-shadow: none;
}
html body .mk-review-input,
html[data-theme] body .mk-review-input {
height: 38px;
}
html body .mk-review-textarea,
html[data-theme] body .mk-review-textarea {
min-height: 132px;
resize: vertical;
line-height: 1.5;
}
html body .mk-review-input:focus,
html[data-theme] body .mk-review-input:focus,
html body .mk-review-textarea:focus,
html[data-theme] body .mk-review-textarea:focus {
outline: 2px solid #1e5f95;
outline-offset: 1px;
}
html body .mk-review-note,
html[data-theme] body .mk-review-note {
margin: 0;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}
html body .mk-review-note:empty,
html[data-theme] body .mk-review-note:empty {
display: none;
}
html body .mk-review-note:not(:empty),
html[data-theme] body .mk-review-note:not(:empty) {
justify-self: center;
padding: 7px 16px;
border-radius: 999px;
background: #ffffff;
}
html body .mk-review-note.is-error,
html[data-theme] body .mk-review-note.is-error {
color: #b3261e;
}
html body .mk-review-note.is-ok,
html[data-theme] body .mk-review-note.is-ok {
color: #146c37;
}
html body .mk-review-actions,
html[data-theme] body .mk-review-actions {
display: flex;
justify-content: center;
}
html body .mk-review-send,
html[data-theme] body .mk-review-send {
min-width: 104px;
padding: 9px 28px;
border: 1px solid #2c76af;
border-radius: 5px;
background: linear-gradient(180deg, #83c8f6 0%, #2f8fd6 100%);
color: #ffffff;
font: inherit;
font-size: 15px;
font-weight: 800;
cursor: pointer;
box-shadow: none;
}
html body .mk-review-send:hover,
html[data-theme] body .mk-review-send:hover {
filter: brightness(1.06);
}
html body .mk-review-send:active,
html[data-theme] body .mk-review-send:active {
transform: translateY(1px);
}
/* no shadows on the wall cards and their avatars */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg,
html body #showcase .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-msg.is-pinned {
box-shadow: none !important;
}
html body #showcase .mk-msg-avatar,
html[data-theme] body #showcase .mk-msg-avatar {
box-shadow: none !important;
}
@media (max-width: 560px) {
html body .mk-review-body,
html[data-theme] body .mk-review-body {
gap: 12px;
padding: 14px;
}
html body .mk-review-row,
html[data-theme] body .mk-review-row {
gap: 10px;
}
html body .mk-review-label,
html[data-theme] body .mk-review-label {
min-width: 62px;
font-size: 14px;
}
html body .mk-review-title,
html[data-theme] body .mk-review-title {
font-size: 16px;
}
html body .mk-review-textarea,
html[data-theme] body .mk-review-textarea {
min-height: 110px;
}
}
/* part 430 - the catalog slab had a 140px radius on the top corners and a
96px radius on the bottom ones, so it read as a card that is only rounded
upwards. All four corners now use the same radius. */
html body section#catalog,
html body #catalog,
html body section#catalog .shell,
html body #catalog .shell,
html[data-theme="light"] body #catalog .shell,
html[data-theme="dark"] body #catalog .shell {
border-radius: 140px !important;
}
/* the blue cap keeps its top-only curve: its bottom edge is hidden
underneath the slab, so rounding it down would cut white notches. */
/* part 430b - longhand enforcement: the catalog plate keeps the same 140px
curve on both bottom corners as the top ones. */
html[data-theme] body section#catalog > .shell,
html body section#catalog > .shell {
border-bottom-left-radius: 140px !important;
border-bottom-right-radius: 140px !important;
}
html[data-theme] body section#catalog,
html body section#catalog {
border-bottom-left-radius: 140px !important;
border-bottom-right-radius: 140px !important;
}
/* part 431 - match the reference message bubble: the two top corners are
rounded like a card while the bottom corners stay square, and the soft
neutral-grey "marker" fill covers the card all the way to the frame so
there is no unpainted white stripe left inside it. */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg,
html body #showcase .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-msg.is-pinned {
border-radius: 15px 15px 0 0 !important;
background: linear-gradient(180deg, #efefeb 0%, #e2e2da 100%) !important;
background-color: #e8e8e2 !important;
background-clip: border-box !important;
border-color: #86a9c6 !important;
}
/* part 432 - the reference asks for the exact fill colour of the Mikmak
message bubble (#E8E8E2, i.e. rgb(232,232,226)) and for the bubble to
spread across the whole section instead of sitting in a narrow column.
The side padding of the feed stays, so it fills the section proportionally
without stretching or distorting the content. */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg,
html body #showcase .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-msg.is-pinned {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
background: #e8e8e2 !important;
background-image: none !important;
}
/* part 433 - two small refinements requested on the message wall:
1. the bubbles stretched edge to edge on very wide screens, so they now
stop at a comfortable 1500px and stay centred (a gentle trim, not a
narrow column);
2. the section is no longer plain white: a soft sky-blue wash, a faint
dotted texture and two slow drifting glows give the wall depth while
still fading to white where it meets the hero and the reviews panel. */
html body #showcase,
html[data-theme] body #showcase {
background:
radial-gradient(120% 85% at 50% -12%, rgba(122, 186, 235, 0.30) 0%, rgba(122, 186, 235, 0) 62%),
radial-gradient(72% 62% at 4% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(78% 68% at 97% 74%, rgba(138, 196, 238, 0.30) 0%, rgba(138, 196, 238, 0) 72%),
linear-gradient(180deg, #ffffff 0%, #f2f9ff 14%, #e8f3fc 48%, #f3f9fe 82%, #ffffff 100%) !important;
background-color: #eef6fd !important;
background-image:
radial-gradient(120% 85% at 50% -12%, rgba(122, 186, 235, 0.30) 0%, rgba(122, 186, 235, 0) 62%),
radial-gradient(72% 62% at 4% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(78% 68% at 97% 74%, rgba(138, 196, 238, 0.30) 0%, rgba(138, 196, 238, 0) 72%),
linear-gradient(180deg, #ffffff 0%, #f2f9ff 14%, #e8f3fc 48%, #f3f9fe 82%, #ffffff 100%) !important;
}
/* faint dot grid, faded at the edges so it never reads as a hard pattern */
html body #showcase::before,
html[data-theme] body #showcase::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background-image:
radial-gradient(rgba(92, 148, 198, 0.26) 1px, rgba(92, 148, 198, 0) 1.5px),
linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) 86%, rgba(255, 255, 255, 0.92) 100%) !important;
background-size: 22px 22px, auto !important;
background-position: center top, center !important;
-webkit-mask-image: radial-gradient(135% 105% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 94%) !important;
mask-image: radial-gradient(135% 105% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 94%) !important;
opacity: 0.7 !important;
}
/* two very soft blue glows that breathe slowly behind the cards
(opacity only, so the effect stays on the compositor and never repaints
the whole section) */
html body #showcase::after,
html[data-theme] body #showcase::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background-image:
radial-gradient(42% 48% at 26% 34%, rgba(132, 196, 246, 0.38) 0%, rgba(132, 196, 246, 0) 72%),
radial-gradient(38% 44% at 76% 66%, rgba(168, 214, 247, 0.34) 0%, rgba(168, 214, 247, 0) 72%) !important;
background-size: 150% 150%, 140% 140% !important;
background-position: 30% 20%, 72% 78% !important;
background-repeat: no-repeat !important;
opacity: 0.8 !important;
will-change: opacity !important;
animation: mk-showcase-glow 20s ease-in-out infinite alternate !important;
}
@keyframes mk-showcase-glow {
from { opacity: 0.55; }
to { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
html body #showcase::after,
html[data-theme] body #showcase::after {
animation: none !important;
}
}
/* the gentle width trim: cards keep filling the feed on small screens but
stop just short of the edges on very wide ones, then centre themselves */
html body #showcase .mk-msg,
html[data-theme] body #showcase .mk-msg,
html body #showcase .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-msg.is-pinned {
width: 100% !important;
max-width: 1500px !important;
justify-self: center !important;
}
/* part 434 - "add a review" used to sit in its own white band under the
wall, which read as a separate strip at the bottom of the page. The panel
now lives inside #showcase, on the very same sky wash, dot texture and
glow, so the message wall and the review form read as one surface.
The 54px top margin exactly cancels the feed's -54px bottom margin, so the
form starts where the wall actually ends instead of slipping under it. */
html body #showcase #reviews,
html[data-theme] body #showcase #reviews,
html body #reviews,
html[data-theme] body #reviews {
position: relative !important;
z-index: 1 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
margin-top: 54px !important;
margin-bottom: 0 !important;
padding-block: clamp(18px, 2.2vw, 30px) clamp(40px, 5vw, 72px) !important;
}
html body #showcase #reviews .shell,
html[data-theme] body #showcase #reviews .shell,
html body #reviews .shell,
html[data-theme] body #reviews .shell {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* part 435 - back to the reference proportions: the message cards return to
their original ~860px width in a left-hand column, and the review form is
lifted out of the bottom of the page into the empty right-hand column
beside the wall. Both columns still sit on the wall's own background. */
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
display: grid !important;
grid-template-columns: minmax(320px, 430px) minmax(0, 900px) !important;
grid-template-areas: "form wall" !important; /* rtl: form on the right */
justify-content: space-between !important;
align-items: start !important;
gap: clamp(40px, 4vw, 84px) !important;
width: 100% !important;
max-width: 1600px !important;
margin-inline: auto !important;
padding: 0 clamp(16px, 2vw, 32px) 80px !important;
box-sizing: border-box !important;
}
html body #showcase .mk-wall-layout > .shell,
html[data-theme] body #showcase .mk-wall-layout > .shell {
grid-area: wall !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
html body #showcase .mk-wall-layout .mk-feed-group,
html[data-theme] body #showcase .mk-wall-layout .mk-feed-group {
padding-inline: 0 !important;
}
html body #showcase .mk-wall-layout .mk-msg,
html[data-theme] body #showcase .mk-wall-layout .mk-msg,
html body #showcase .mk-wall-layout .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-wall-layout .mk-msg.is-pinned {
max-width: 860px !important;
}
html body #showcase .mk-wall-layout #reviews,
html[data-theme] body #showcase .mk-wall-layout #reviews {
grid-area: form !important;
align-self: start !important;
margin: 0 !important;
padding: 0 !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
}
/* below tablet width the form goes back under the wall, centred */
@media (max-width: 1024px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: "wall" "form" !important;
justify-content: stretch !important;
gap: 0 !important;
max-width: 960px !important;
}
html body #showcase .mk-wall-layout #reviews,
html[data-theme] body #showcase .mk-wall-layout #reviews {
margin-top: 54px !important;
padding: 0 !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
width: min(700px, 100% - 32px) !important;
margin-inline: auto !important;
}
}
/* part 439 - the milk-artwork experiment is reverted. The wall goes back to
a clean white ground: no picture, no dot grid and no glows.
part 474 - the blue experiment is reverted too. The section is white again,
with the server map (the same island artwork used above) as one very large,
very faint watermark behind the content. The white veil on top of it keeps
the opacity low, so cards, form and questions stay perfectly readable. */
html body #showcase,
html[data-theme] body #showcase {
background-color: #ffffff !important;
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.87) 0%, rgba(255, 255, 255, 0.87) 100%),
url("images/island-map.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: auto, min(1700px, 128%) auto !important;
}
html body #showcase::before,
html[data-theme] body #showcase::before,
html body #showcase::after,
html[data-theme] body #showcase::after {
content: none !important;
display: none !important;
}
html body #showcase > .mk-showcase-glow,
html[data-theme] body #showcase > .mk-showcase-glow {
display: none !important;
}
/* part 440 - the review form keeps its original all-blue design, colours and
glossy button exactly as before; only its place changes. It now sits
centred directly above the wall at the same 860px width as a message
card, so it is the first thing visitors can reach and use. */
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: minmax(0, 860px) !important;
grid-template-areas: "form" "wall" !important;
justify-content: center !important;
align-items: start !important;
gap: clamp(22px, 2.8vw, 34px) !important;
padding: clamp(44px, 5vw, 68px) clamp(14px, 2vw, 24px) clamp(56px, 7vw, 90px) !important;
}
html body #showcase .mk-wall-layout #reviews,
html[data-theme] body #showcase .mk-wall-layout #reviews {
grid-area: form !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
html body #showcase .mk-wall-layout #reviews > .shell,
html[data-theme] body #showcase .mk-wall-layout #reviews > .shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
width: 100% !important;
max-width: 860px !important;
margin-inline: auto !important;
}
/* keep the wall's bottom trim only: its old -54px top pull would now slide
it under the form */
html body #showcase .mk-wall-layout .mk-feed,
html[data-theme] body #showcase .mk-wall-layout .mk-feed {
margin-block: 0 -54px !important;
}
@media (max-width: 680px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
padding-top: 40px !important;
}
}
/* part 441 - the form becomes an iOS-style frosted-glass panel: a soft
coloured light sits behind it, and the card, its header and its fields
are translucent with a backdrop blur, so the blue melts into the white
page like an iPhone sheet instead of a flat painted box. */
html body #showcase .mk-wall-layout #reviews,
html[data-theme] body #showcase .mk-wall-layout #reviews {
position: relative !important;
isolation: isolate !important;
}
/* the glow the glass refracts */
html body #showcase .mk-wall-layout #reviews::before,
html[data-theme] body #showcase .mk-wall-layout #reviews::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: -28px -18px -34px -18px !important;
z-index: -1 !important;
pointer-events: none !important;
border-radius: 44px !important;
background-image:
radial-gradient(58% 68% at 16% 16%, rgba(116, 194, 244, 0.95) 0%, rgba(116, 194, 244, 0) 70%),
radial-gradient(52% 66% at 86% 26%, rgba(86, 171, 234, 0.90) 0%, rgba(86, 171, 234, 0) 72%),
radial-gradient(72% 62% at 58% 100%, rgba(158, 220, 250, 0.95) 0%, rgba(158, 220, 250, 0) 76%) !important;
filter: blur(46px) saturate(1.15) !important;
opacity: 0.9 !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
background: rgba(83, 163, 222, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
border-radius: 20px !important;
-webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
backdrop-filter: blur(22px) saturate(1.6) !important;
box-shadow:
0 26px 60px -30px rgba(14, 66, 110, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
overflow: hidden !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-head,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-head {
background: rgba(66, 148, 210, 0.48) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
backdrop-filter: blur(10px) saturate(1.4) !important;
padding: 13px 22px !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-title,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-title {
color: #ffffff !important;
font-size: 17px !important;
text-shadow: 0 1px 2px rgba(0, 42, 74, 0.35) !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-label,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-label {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 42, 74, 0.28) !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-input,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-input,
html body #showcase .mk-wall-layout #reviews .mk-review-textarea,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-textarea {
background: rgba(255, 255, 255, 0.66) !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
border-radius: 10px !important;
-webkit-backdrop-filter: blur(8px) saturate(1.3) !important;
backdrop-filter: blur(8px) saturate(1.3) !important;
box-shadow: inset 0 1px 2px rgba(20, 60, 95, 0.10) !important;
color: #123b5c !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-input::placeholder,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-input::placeholder,
html body #showcase .mk-wall-layout #reviews .mk-review-textarea::placeholder,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-textarea::placeholder {
color: rgba(35, 80, 115, 0.55) !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-input:focus,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-input:focus,
html body #showcase .mk-wall-layout #reviews .mk-review-textarea:focus,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-textarea:focus {
outline: none !important;
border-color: rgba(255, 255, 255, 0.95) !important;
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.38),
inset 0 1px 2px rgba(20, 60, 95, 0.10) !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review-send,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review-send {
border: 1px solid rgba(255, 255, 255, 0.45) !important;
border-radius: 10px !important;
box-shadow:
0 10px 22px -12px rgba(8, 52, 90, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
/* part 442 - no more white gap under the form: the marquee is tucked up
behind the frosted panel, so cards slide up and dissolve under the glass
(blurred by it) instead of being cut off in a strip of white. */
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
gap: 0 !important;
}
html body #showcase .mk-wall-layout > .shell,
html[data-theme] body #showcase .mk-wall-layout > .shell {
position: relative !important;
z-index: 0 !important;
margin-top: -72px !important;
}
/* part 443 - the review form shifts to the right and a dark FAQ column,
styled after the reference (near-black panel, dotted rules, white open
question and a plus/minus toggle), takes the left side. The message wall
stays directly under the form so cards still slide under the glass. */
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: minmax(0, 860px) minmax(280px, 400px) !important;
grid-template-areas:
"form faq"
"wall faq" !important;
justify-content: center !important;
align-items: start !important;
column-gap: clamp(24px, 2.6vw, 40px) !important;
row-gap: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
grid-area: faq !important;
align-self: start !important;
width: 100% !important;
margin: 0 !important;
padding: 4px 22px 10px !important;
box-sizing: border-box !important;
background: #0b0c10 !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 20px !important;
box-shadow: 0 30px 60px -36px rgba(6, 12, 22, 0.75) !important;
color: #c7c9cf !important;
direction: rtl !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-title,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-title {
margin: 16px 0 4px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-align: right !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item {
border-top: 1px dotted rgba(255, 255, 255, 0.24) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type {
border-top: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 14px 0 !important;
margin: 0 !important;
cursor: pointer !important;
list-style: none !important;
color: #c4c6cc !important;
font-family: inherit !important;
font-size: 14.5px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
text-align: right !important;
transition: color 0.2s ease !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary::-webkit-details-marker,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary::-webkit-details-marker {
display: none !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary:hover,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary:hover,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] summary {
color: #ffffff !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary:focus-visible,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary:focus-visible {
outline: 2px solid rgba(127, 183, 224, 0.9) !important;
outline-offset: 3px !important;
border-radius: 6px !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon {
position: relative !important;
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
margin-inline-start: auto !important;
color: currentColor !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::before,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::before,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::after,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 14px !important;
height: 1.5px !important;
border-radius: 2px !important;
background: currentColor !important;
transform: translate(-50%, -50%) !important;
transition: transform 0.25s ease, opacity 0.25s ease !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::after,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::after {
transform: translate(-50%, -50%) rotate(90deg) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] .mk-faq-icon::after,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] .mk-faq-icon::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
opacity: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p {
margin: 0 !important;
padding: 0 0 16px !important;
color: #a5a8af !important;
font-size: 13.5px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
text-align: right !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] p,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] p {
animation: mk-faq-in 0.25s ease both;
}
@keyframes mk-faq-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] p,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] p {
animation: none !important;
}
}
/* below the two-column threshold the FAQ drops under the wall, still dark
and still centred on the form's 860px axis */
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: minmax(0, 860px) !important;
grid-template-areas: "form" "wall" "faq" !important;
column-gap: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
max-width: 860px !important;
margin-inline: auto !important;
margin-top: 34px !important;
}
}
/* part 444 - the form now starts flush with the section above (no white
strip under the sky frame), and the FAQ becomes a wide, white column that
fills the whole left side. It uses the reference row rhythm: full-width
rows, 16px plus/minus, 22px row padding and 17-18px type, but recoloured
for the white page (dark questions, dotted rules) and with the heading
centred. */
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
padding-top: 0 !important;
grid-template-columns: minmax(0, 860px) minmax(300px, 720px) !important;
column-gap: clamp(28px, 3vw, 56px) !important;
}
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 10px 0 4px !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #121212 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-title,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-title {
margin: 0 0 14px !important;
padding: 0 !important;
color: #121212 !important;
font-size: clamp(18px, 1.4vw, 22px) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-align: center !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-list,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-list {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 10px !important;
min-height: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item {
background: transparent !important;
border: 0 !important;
border-top: 1px dotted rgba(18, 18, 18, 0.18) !important;
border-radius: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type {
border-top: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary {
gap: 24px !important;
justify-content: space-between !important;
padding: 16px 4px !important;
color: #5c626c !important;
font-size: clamp(15px, 1.15vw, 18px) !important;
font-weight: 400 !important;
line-height: 1.25 !important;
text-align: right !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary:hover,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary:hover,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] summary {
color: #0c0c0c !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon {
width: 16px !important;
height: 16px !important;
color: currentColor !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p {
padding: 0 4px 16px !important;
color: #4a505a !important;
font-size: clamp(13px, 0.95vw, 14.5px) !important;
line-height: 1.7 !important;
text-align: right !important;
}
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
align-self: start !important;
max-width: 860px !important;
margin: 34px auto 0 !important;
padding: 0 22px !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-list,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-list {
flex: 0 0 auto !important;
justify-content: flex-start !important;
gap: 0 !important;
}
}
@media (max-width: 680px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
padding-top: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
padding: 0 8px !important;
}
}
/* part 445 - the FAQ rows share the full column height instead of floating
apart with big white holes: every closed question takes an equal slice,
with the dotted rule as its top edge, and an open answer simply takes the
space it needs while the rest rebalance. */
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-list,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-list {
justify-content: stretch !important;
gap: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item {
flex: 1 1 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open],
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] {
flex: 0 0 auto !important;
justify-content: flex-start !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary {
padding: 22px 4px !important;
}
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open],
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] {
flex: 0 0 auto !important;
justify-content: flex-start !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary {
padding: 16px 4px !important;
}
}
/* part 446 - lock the form at its 860px card width: the FAQ gives up width
first, the form never shrinks. Below 1280px the grid returns to one column
so the FAQ drops under the wall as intended. */
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: 860px minmax(300px, 720px) !important;
}
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: minmax(0, 860px) !important;
grid-template-areas: "form" "wall" "faq" !important;
column-gap: 0 !important;
}
}
@media (max-width: 920px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* part 447 - when the FAQ drops under the wall, clear the wall's 54px
bottom trim as well as the usual 34px breathing room, so the centred
heading never sits on top of the last faded card. */
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
margin-top: 88px !important;
}
}
/* part 448 - the FAQ loses its heading and becomes the compact reference
list again: rows keep their natural height and sit at the top of the
column, separated by the dotted rules, instead of being stretched with
big holes between them. */
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
align-self: start !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-title,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-title {
display: none !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-list,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-list {
flex: 0 0 auto !important;
justify-content: flex-start !important;
gap: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open],
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] {
flex: 0 0 auto !important;
justify-content: flex-start !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type {
border-top: 1px dotted rgba(18, 18, 18, 0.18) !important;
}
/* part 449 - the form's top edge is welded to the section above: remove the
light 1px glass rim and its inner highlight so no white strip remains
between the sky frame and the blue header. */
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
border-top-width: 0 !important;
box-shadow: 0 26px 60px -30px rgba(14, 66, 110, 0.55) !important;
}
/* part 450 - the glass sheet is flush with the sky above: square off its
top corners so no white sliver is left at either side of the seam. The
lower corners keep their 20px radius. */
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
/* part 451 - the FAQ uses the exact supplied plus and minus SVGs: the plus
is shown by default and swaps to the minus while the question is open. */
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::before,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::before,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::after,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon::after {
content: none !important;
display: none !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon svg,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon svg {
display: block !important;
width: 16px !important;
height: 16px !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon .mk-faq-minus,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon .mk-faq-minus {
display: none !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] .mk-faq-icon .mk-faq-plus,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] .mk-faq-icon .mk-faq-plus {
display: none !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] .mk-faq-icon .mk-faq-minus,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] .mk-faq-icon .mk-faq-minus {
display: block !important;
}
/* part 452 - the marquee is three identical groups; without a trailing gap
the last card of one group touched the first card of the next at the loop
seam. Give every group the same 26px tail it has between its cards, so no
two messages ever look joined. */
html body #showcase .mk-feed-group,
html[data-theme] body #showcase .mk-feed-group {
padding-bottom: 26px !important;
}
/* part 453 - the community name sits as a huge, faint watermark in the
middle of the FAQ column. It is a pseudo-element behind the rows, so the
questions stay perfectly readable, and the logo keeps its own transparent
PNG edges. */
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
position: relative !important;
isolation: isolate !important;
}
html body #showcase .mk-wall-layout > .mk-faq::before,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: min(96%, 620px) !important;
aspect-ratio: 559 / 447 !important;
transform: translate(-50%, -50%) !important;
background-image: url("images/topmik-logo.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
opacity: 0.1 !important;
pointer-events: none !important;
user-select: none !important;
z-index: 0 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-list,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-list {
position: relative !important;
z-index: 1 !important;
}
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout > .mk-faq::before,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq::before {
width: min(88%, 520px) !important;
}
}
/* part 454 - the FAQ column becomes one big iPhone-style slab of dark glass:
a black, blurred, rounded panel with a luminous rim and a soft outer glow,
exactly over the area marked on the page. The typography flips to light so
the questions stay readable, and the TOPMIK watermark turns into a faint
white neon mark inside the glass. */
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
align-self: stretch !important;
padding: 30px 30px 28px !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 46px !important;
background:
radial-gradient(120% 80% at 18% 0%, rgba(70, 86, 110, 0.45) 0%, rgba(24, 28, 38, 0.28) 42%, rgba(8, 10, 14, 0) 70%),
linear-gradient(160deg, rgba(30, 34, 44, 0.92) 0%, rgba(12, 14, 19, 0.94) 46%, rgba(5, 6, 9, 0.96) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
inset 0 -80px 120px -80px rgba(96, 140, 255, 0.35),
0 24px 70px -18px rgba(0, 0, 0, 0.55),
0 0 46px -6px rgba(130, 170, 255, 0.30),
0 0 120px -24px rgba(70, 120, 255, 0.30) !important;
-webkit-backdrop-filter: blur(26px) saturate(150%) !important;
backdrop-filter: blur(26px) saturate(150%) !important;
overflow: hidden !important;
color: rgba(255, 255, 255, 0.86) !important;
}
html body #showcase .mk-wall-layout > .mk-faq::after,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
padding: 1px !important;
border-radius: inherit !important;
background: linear-gradient(150deg,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.10) 22%,
rgba(120, 160, 255, 0.08) 48%,
rgba(150, 190, 255, 0.45) 78%,
rgba(255, 255, 255, 0.22) 100%) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 3 !important;
}
html body #showcase .mk-wall-layout > .mk-faq::before,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq::before {
opacity: 0.15 !important;
filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(160, 195, 255, 0.55)) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item {
border-top-color: rgba(255, 255, 255, 0.13) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item:first-of-type {
border-top-color: rgba(255, 255, 255, 0.13) !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary {
color: rgba(255, 255, 255, 0.72) !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary:hover,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary:hover,
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item[open] summary {
color: #ffffff !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p {
color: rgba(255, 255, 255, 0.58) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon svg path,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon svg path {
fill: currentColor !important;
}
@media (max-width: 1279px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
align-self: start !important;
padding: 26px 22px 24px !important;
border-radius: 38px !important;
}
}
@media (max-width: 680px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
padding: 20px 14px 18px !important;
border-radius: 30px !important;
}
}
/* part 455 - the FAQ glass gets the exact silhouette that was drawn: one big
rounded slab filling the whole left side of the section, from the viewport
edge to the left edge of the form (top to the blue catalog line), with the
triangular notch cut into its right side. The shape is an SVG clipPath in
objectBoundingBox units, so the notch scales with the slab. */
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass {
display: none !important;
}
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
--mk-faq-shift: min(0px, calc((1600px - 100vw) / 2));
margin-left: calc(var(--mk-faq-shift) - 24px) !important;
margin-right: calc(-1 * clamp(28px, 3vw, 56px)) !important;
padding: 30px clamp(110px, 10vw, 195px) 28px calc(54px - var(--mk-faq-shift)) !important;
min-width: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
overflow: visible !important;
}
html body #showcase .mk-wall-layout > .mk-faq::after,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq::after {
display: none !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass {
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
background:
radial-gradient(120% 80% at 18% 0%, rgba(70, 86, 110, 0.45) 0%, rgba(24, 28, 38, 0.28) 42%, rgba(8, 10, 14, 0) 70%),
linear-gradient(160deg, rgba(30, 34, 44, 0.92) 0%, rgba(12, 14, 19, 0.94) 46%, rgba(5, 6, 9, 0.96) 100%) !important;
clip-path: url(#mk-faq-shape) !important;
-webkit-backdrop-filter: blur(26px) saturate(150%) !important;
backdrop-filter: blur(26px) saturate(150%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
inset 0 -80px 120px -80px rgba(96, 140, 255, 0.35) !important;
filter:
drop-shadow(0 0 38px rgba(130, 170, 255, 0.32))
drop-shadow(0 0 110px rgba(70, 120, 255, 0.25)) !important;
}
html body #showcase .mk-wall-layout > .mk-faq::before,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq::before {
z-index: 1 !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-list,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-list {
z-index: 2 !important;
}
}
/* part 456 - the slab must actually grow into the negative margins: without
an explicit width the grid item kept its 637px track width and only slid
sideways. It also reaches the blue catalog line at the bottom, like the
drawing, by eating the layout's 90px bottom trim. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
width: auto !important;
max-width: none !important;
justify-self: stretch !important;
margin-bottom: -90px !important;
padding-bottom: 118px !important;
}
}
/* part 457 - the slab must not be rounded at all. The FAQ rectangle now uses
square outer corners (the SVG path was flattened) and, because the blue
catalog below has a 140px rounded top corner, the slab gets a solid dark
bleed that runs underneath it. The catalog paints on top (z-index 2), so
the bleed is invisible everywhere except exactly inside that rounded
corner: the white sliver that used to sit between the black panel and the
blue band is now black, and the panel visually continues into the catalog.
The bleed is limited to the panel width, so nothing shows on the sides. */
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed {
display: none !important;
}
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed {
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -200px !important;
height: 200px !important;
z-index: 0 !important;
pointer-events: none !important;
background: #05060a !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass {
border-radius: 0 !important;
}
}
/* part 458 - two finishing touches on the square slab:
1. at widths wider than the 1600px container the slab used to start ~3px
inside the viewport, leaving a thin white line down the whole left edge.
Pulling it 4px further left covers that line without moving the text
(the left padding grows by the same 4px).
2. the dark bleed that fills the catalog corner starts in the exact tone
the glass ends with, so the join is a smooth fade instead of a hard
horizontal seam. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
margin-left: calc(var(--mk-faq-shift) - 28px) !important;
padding-left: calc(58px - var(--mk-faq-shift)) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed {
background: linear-gradient(180deg,
#1e2840 0px,
#121a29 26px,
#0a0e15 62px,
#05060a 130px) !important;
}
}
/* part 459 - the section above ends in a 28px rounded corner (.sky-canvas).
With the slab now perfectly square, that round corner of the section above
leaves a small white wedge at the very top-left, right above the black
panel. This paints exactly the outside of that 28px arc in the same near
black, so the black visually continues into the corner above. The gradient
is transparent inside the arc, so no part of the blue section is covered. */
@media (min-width: 1280px) {
html body .sky-frame::after,
html[data-theme] body .sky-frame::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 30px !important;
height: 30px !important;
z-index: 6 !important;
pointer-events: none !important;
background: radial-gradient(circle 30px at 30px 0px,
transparent 0 29px,
#0b0f16 30px) !important;
}
}
/* part 460 - the separate bleed used to start exactly at the glass bottom, so
the glass's bottom rim glow + blue inset glow ended in a visible stripe.
Now the bleed overlaps the last 70px of the slab and fades in from fully
transparent to solid black right at the slab edge. It therefore erases the
rim gradually instead of butting against it, and the slab flows into the
catalog corner with no dividing line. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed {
bottom: -230px !important;
height: 300px !important;
background: linear-gradient(180deg,
rgba(5, 6, 10, 0) 0px,
rgba(5, 6, 10, 0) 12px,
rgba(5, 6, 10, 0.55) 42px,
#05060a 70px,
#05060a 100%) !important;
}
}
/* part 461 - the same soft join, now upward. The top edge used to be a hard
light-blue -> black step. A thin overlay sits above the slab, exactly as
wide as the slab, filled with the very colours the glass shows in its top
row and masked to fade to fully transparent upward. So the black melts
into the section above instead of cutting it, with no seam line. It is
only over the slab width, so the form on the right keeps its flush edge.
The corner filler now uses the slab's top tone as well, so it merges with
the fade instead of reading as a black blot. */
@media (min-width: 1280px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: calc(100vw - 884px) !important;
height: 48px !important;
z-index: 5 !important;
pointer-events: none !important;
background: linear-gradient(90deg,
#333c4c 0%,
#343d4e 24%,
#2f3644 34%,
#2b3140 45%,
#262b36 58%,
#222630 72%,
#232731 86%,
#2f3f53 96%,
#31445a 100%) !important;
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.16) 26%,
rgba(0, 0, 0, 0.55) 56%,
rgba(0, 0, 0, 0.9) 82%,
#000 100%) !important;
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.16) 26%,
rgba(0, 0, 0, 0.55) 56%,
rgba(0, 0, 0, 0.9) 82%,
#000 100%) !important;
}
html body .sky-frame::after,
html[data-theme] body .sky-frame::after {
background: radial-gradient(circle 30px at 30px 0px,
transparent 0 29px,
#333c4c 30px) !important;
}
}
@media (min-width: 1600px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
width: calc((100vw + 1600px) / 2 - 884px) !important;
}
}
/* part 462 - with the top now fading smoothly into the section above, the
glass's 1px white top rim (a hard highlight line) was the only thing left
marking the join. Drop just that highlight; the faint inner outline and
the bottom blue glow stay, so the glass still has its iPhone body. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
inset 0 -80px 120px -80px rgba(96, 140, 255, 0.35) !important;
}
}
/* part 463 - after the rim highlight was gone, the last trace of a line at the
top was the 1px inner outline itself. Drop that outline on the slab as well;
the glass keeps its body from the gradient, blur and outer glow, and the top
join is now pixel-continuous with the fade above it. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-glass {
box-shadow: inset 0 -80px 120px -80px rgba(96, 140, 255, 0.35) !important;
}
}
/* part 464 - the top fade used to stop dead at the form's left edge, which
left a short vertical cut in the sky above the form. It now runs 130px
past the slab and dissolves horizontally over that tail, so the sky above
the form has no step; the whole top edge of the slab stays fully faded. */
@media (min-width: 1280px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
width: calc(100vw - 754px) !important;
-webkit-mask-image:
linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.16) 26%,
rgba(0, 0, 0, 0.55) 56%,
rgba(0, 0, 0, 0.9) 82%,
#000 100%),
linear-gradient(90deg,
#000 0%,
#000 calc(100% - 130px),
rgba(0, 0, 0, 0) 100%) !important;
-webkit-mask-composite: source-in !important;
mask-image:
linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.16) 26%,
rgba(0, 0, 0, 0.55) 56%,
rgba(0, 0, 0, 0.9) 82%,
#000 100%),
linear-gradient(90deg,
#000 0%,
#000 calc(100% - 130px),
rgba(0, 0, 0, 0) 100%) !important;
mask-composite: intersect !important;
}
}
@media (min-width: 1600px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
width: calc((100vw + 1600px) / 2 - 754px) !important;
}
}
/* part 465 - correction: the black must not be painted OVER the light-blue
section. The soft fade tinted the sky, which is wrong. Instead the slab is
now tucked UNDER the section above: a black layer sits behind the sky
canvas at the bottom-left, so the sky keeps its exact colour and only the
rounded corner gap shows the black underneath. Along the straight edge the
sky's own bottom edge sits on top of the black, exactly like the catalog
sits on top of the bottom bleed. */
@media (min-width: 1280px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: calc(100vw - 884px) !important;
height: 44px !important;
z-index: 0 !important;
pointer-events: none !important;
background: #0b0e15 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
-webkit-mask-composite: initial !important;
mask-composite: initial !important;
}
html body .sky-frame::after,
html[data-theme] body .sky-frame::after {
display: none !important;
content: none !important;
}
}
@media (min-width: 1600px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
width: calc((100vw + 1600px) / 2 - 884px) !important;
}
}
/* part 466 - the layer behind the sky finishes in the same dark glass tone the
slab shows just below it, instead of pure black. The rounded corner of the
section above therefore reveals a continuation of the slab, not a dark
notch, while the sky itself still keeps its exact colour. */
@media (min-width: 1280px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
background: #333c4c !important;
}
}
/* part 468 - the showcase (message wall + FAQ slab + review form) now sits
after the catalog, and the trade cards moved up under the hero. The dark
layer that used to sit behind the sky's bottom-left corner existed only to
hand the black slab over from the section above; the section below the sky
is now the dark trade panel, so that layer is no longer needed and would
paint a lighter wedge over the trade's own corner. It is switched off, so
both bottom corners of the sky reveal the same trade background. */
@media (min-width: 1280px) {
html body .sky-frame::before,
html[data-theme] body .sky-frame::before {
display: none !important;
content: none !important;
}
}
/* part 469 - the shop order is now hero -> trade -> catalog -> showcase, so the
section above the black slab is the catalog, not the sky. The catalog still
has its 140px rounded bottom-left corner, and because the slab is flush with
the viewport edge, that arc used to reveal a white crescent right on top of
the slab. This layer sits UNDER the catalog (the catalog paints above the
whole showcase stacking context) and only becomes visible in the few pixels
outside its rounded corner, where it continues the slab's top glass tone.
It is exactly as wide as the slab, so it never touches the form or the white
page margin on the right. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-topbleed,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-topbleed {
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: -180px !important;
height: 208px !important;
z-index: 0 !important;
pointer-events: none !important;
background: linear-gradient(180deg,
#333c4e 0px,
#333c4e 180px,
rgba(51, 60, 78, 0) 208px) !important;
}
}
/* part 470 - the bottom of the relocated showcase now meets the footer, which
is the same near-black family as the slab. The old bleed stopped fading at
#05060a and left a faint blue-black step against the footer's #05070d. The
bleed now finishes in the footer's exact colour and reaches it a little
earlier, so the slab flows into the footer with no line of its own. The
footer itself stays on top (it is a later positioned sibling), so nothing is
painted over it. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-bleed {
bottom: -240px !important;
height: 320px !important;
background: linear-gradient(180deg,
rgba(5, 7, 13, 0) 0px,
rgba(5, 7, 13, 0) 12px,
rgba(5, 7, 13, 0.55) 46px,
#05070d 80px,
#05070d 100%) !important;
}
}
/* part 471 / 473 / 474 - the showcase is white again, so the thin layer above
the section only exists to keep the catalog's rounded bottom-right corner
white instead of letting the page's cream show through. The FAQ's dark top
bleed paints over its left end, so the left corner stays slab-dark while the
right corner stays white. The catalog itself is a higher layer, so nothing
is painted over it. */
@media (min-width: 1280px) {
html body #showcase > .mk-showcase-side,
html[data-theme] body #showcase > .mk-showcase-side {
display: block !important;
position: absolute !important;
top: -180px !important;
bottom: auto !important;
left: -8px !important;
right: -8px !important;
width: auto !important;
height: 180px !important;
z-index: 0 !important;
pointer-events: none !important;
border: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
}
}
/* part 472 - the trade band now sits between the sky and the catalog. Its own
dark ground has to catch both neighbours, but strictly from underneath:
1) the sky frame is made transparent, so the trade's background (which is
already tucked 176px under the hero) shows through the sky's rounded
bottom corners instead of the frame's white;
2) a dark skirt is added below the trade wrapper, underneath the catalog's
rounded top corners. The catalog paints above it (z-index 2), and the
skirt is only visible in the two corner notches, never over the catalog
or the hero. */
@media (min-width: 1280px) {
html body .sky-frame,
html[data-theme] body .sky-frame {
background: transparent !important;
background-color: transparent !important;
}
html body .site-rails.is-tail,
html[data-theme] body .site-rails.is-tail {
position: relative !important;
}
html body .site-rails.is-tail::after,
html[data-theme] body .site-rails.is-tail::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: -8px !important;
right: -8px !important;
bottom: -170px !important;
height: 170px !important;
z-index: 0 !important;
pointer-events: none !important;
background: linear-gradient(90deg,
#05070d 0%,
#04060c 44%,
#051015 72%,
#061317 100%) !important;
}
}
/* part 473 - both sides now grow into the room they were leaving empty.
1. The layout no longer caps itself at 1600px, so the form/message column
stretches right up to the window edge instead of stopping short and
leaving a bare strip.
2. The FAQ slab keeps reaching the viewport edge and the form edge, but its
huge inward left padding (which was a leftover of the old centring shift)
is cut down, so the questions spread across the whole dark panel. Type,
plus/minus icons and row rhythm grow with it. The right padding is still
held just wide of the triangular notch so no question is ever clipped.
3. Message cards fill the wider column, and the review card fills it too.
All of this is desktop-only; below 1280px the existing stacked layout stays
exactly as it was. */
@media (min-width: 1280px) {
html body #showcase .mk-wall-layout,
html[data-theme] body #showcase .mk-wall-layout {
max-width: none !important;
width: 100% !important;
padding-left: clamp(12px, 1vw, 24px) !important;
padding-right: clamp(12px, 1vw, 24px) !important;
grid-template-columns: minmax(860px, 1.3fr) minmax(320px, 1fr) !important;
column-gap: clamp(22px, 2vw, 44px) !important;
justify-content: stretch !important;
}
html body #showcase .mk-wall-layout > .mk-faq,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq {
margin-left: calc(-1 * clamp(12px, 1vw, 24px) - 4px) !important;
margin-right: calc(-1 * clamp(22px, 2vw, 44px)) !important;
padding: 30px clamp(110px, 9.2vw, 185px) 118px clamp(34px, 3vw, 56px) !important;
}
html body #showcase .mk-wall-layout > .mk-faq summary,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq summary {
gap: 20px !important;
padding: 24px 4px !important;
font-size: clamp(15.5px, 1.05vw, 20px) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-item p {
font-size: clamp(13.5px, 0.95vw, 16px) !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon {
width: 18px !important;
height: 18px !important;
}
html body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon svg,
html[data-theme] body #showcase .mk-wall-layout > .mk-faq .mk-faq-icon svg {
width: 18px !important;
height: 18px !important;
}
html body #showcase .mk-wall-layout #reviews .mk-review,
html[data-theme] body #showcase .mk-wall-layout #reviews .mk-review {
max-width: none !important;
margin-inline: 0 !important;
}
html body #showcase .mk-wall-layout .mk-msg,
html[data-theme] body #showcase .mk-wall-layout .mk-msg,
html body #showcase .mk-wall-layout .mk-msg.is-pinned,
html[data-theme] body #showcase .mk-wall-layout .mk-msg.is-pinned {
max-width: 100% !important;
}
}
/* =========================================================
part 477 - the value chart loses its white card and sits
straight on the section ground: huge, label-free, and
tilted a couple of degrees so it never reads as a
symmetric box. Only the metric pill remains.
========================================================= */
html body #trade .shell,
html[data-theme] body #trade .shell {
width: min(1500px, calc(100% - 40px)) !important;
}
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
display: grid !important;
direction: rtl;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
grid-template-areas: "chart board" !important;
align-items: center !important;
justify-items: stretch !important;
width: 100% !important;
gap: clamp(18px, 2vw, 40px) !important;
}
html body #trade#trade .trade-layout > .trade-screen,
html[data-theme] body #trade#trade .trade-layout > .trade-screen {
grid-area: board !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
html body #trade#trade .trade-layout > .trade-chart,
html[data-theme] body #trade#trade .trade-layout > .trade-chart {
grid-area: chart !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
@media (max-width: 1180px) {
html body #trade#trade .trade-layout,
html[data-theme] body #trade#trade .trade-layout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: "board" "chart" !important;
align-items: start !important;
width: min(1040px, 100%) !important;
}
html body #trade#trade .trade-layout > .trade-screen,
html[data-theme] body #trade#trade .trade-layout > .trade-screen {
max-width: 100% !important;
margin-inline: 0 !important;
}
html body #trade#trade .trade-layout > .trade-chart,
html[data-theme] body #trade#trade .trade-layout > .trade-chart {
width: 100% !important;
max-width: 840px !important;
margin-inline: auto !important;
}
}
html body #trade .trade-chart {
position: relative;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
direction: rtl;
transform: perspective(1300px) rotateX(11deg) rotate(-2.4deg);
transform-origin: 50% 88%;
}
html body #trade .trade-chart-canvas {
width: 100%;
}
html body #trade .trade-chart-canvas svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
html body #trade .trade-chart-grid {
stroke: rgba(226, 236, 252, 0.1);
stroke-width: 1;
}
html body #trade .trade-chart-line {
fill: none;
stroke: #74a9ff;
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 12px rgba(84, 148, 255, 0.45));
}
html body #trade .trade-chart-dot {
stroke: #0b1424;
stroke-width: 2.4;
}
html body #trade .trade-chart-dot.is-offer,
html body #trade .trade-chart-peak.is-offer,
html body #trade .trade-chart-glow.is-offer {
fill: #74a9ff;
}
html body #trade .trade-chart-dot.is-request,
html body #trade .trade-chart-peak.is-request,
html body #trade .trade-chart-glow.is-request {
fill: #b79bff;
}
html body #trade .trade-chart-peak {
stroke: #0b1424;
stroke-width: 2.6;
}
html body #trade .trade-chart-glow {
opacity: 0.22;
}
html body #trade .trade-chart-drop {
stroke: rgba(220, 234, 255, 0.45);
stroke-width: 1.6;
stroke-dasharray: 6 7;
}
html body #trade .trade-chart-tooltip {
fill: #1b1f27;
}
html body #trade .trade-chart-tooltip-text {
fill: #ffffff;
font-family: inherit;
font-size: 16px;
font-weight: 600;
}
html body #trade .trade-chart-connector {
stroke: rgba(255, 255, 255, 0.55);
stroke-width: 1.2;
}
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-line {
stroke: #ff9a3c;
filter: drop-shadow(0 0 12px rgba(255, 138, 48, 0.5));
}
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-dot.is-offer,
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-peak.is-offer,
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-glow.is-offer {
fill: #ff9a3c;
}
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-dot.is-request,
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-peak.is-request,
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-glow.is-request {
fill: #ffc46b;
}
html body #trade .trade-chart-canvas[data-metric="price"] .trade-chart-drop {
stroke: rgba(255, 198, 140, 0.5);
}
html body #trade .trade-chart-empty {
fill: rgba(216, 229, 250, 0.55);
font-family: inherit;
font-size: 22px;
}
@media (max-width: 1180px) {
html body #trade .trade-chart {
transform: perspective(1100px) rotateX(9deg) rotate(-1.7deg);
}
}
@media (max-width: 700px) {
html body #trade .trade-chart {
transform: perspective(900px) rotateX(7deg) rotate(-1.2deg);
}
html body #trade .trade-chart-empty {
font-size: 26px;
}
}