/* ── shared/tokens.css ── */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local('Inter'),
url('/fonts/InterVariable.woff2') format('woff2');
}
:root {
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;
--radius-24: 24px;
--radius-32: 32px;
--spacing-2: 2px;
--spacing-4: 4px;
--spacing-6: 6px;
--spacing-8: 8px;
--spacing-10: 10px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-40: 40px;
--spacing-44: 44px;
--spacing-52: 52px;
--spacing-60: 60px;
--spacing-80: 80px;
--color-gray-0: #ffffff;
--color-gray-25: #f6f6f8;
--color-gray-50: #e9ebed;
--color-gray-100: #dde0e4;
--color-gray-200: #bac1c9;
--color-gray-300: #9ba4b0;
--color-gray-400: #8791a1;
--color-gray-500: #657181;
--color-gray-600: #535d6a;
--color-gray-700: #3d434c;
--color-gray-800: #24282e;
--color-gray-900: #121417;
--color-accent-25: #f5f9ff;
--color-accent-50: #ebf5ff;
--color-accent-100: #cce1ff;
--color-accent-300: #006aeb;
--color-accent-400: #0059de;
--color-accent-600: #003e94;
--color-accent-700: #00265c;
--color-positive-25: #eefbf2;
--color-positive-50: #c7f5d5;
--color-positive-100: #a3f0be;
--color-positive-200: #6bd18f;
--color-positive-300: #2cba67;
--color-positive-400: #00a352;
--color-positive-500: #00803e;
--color-positive-600: #006b32;
--color-negative-25: #fef6f6;
--color-negative-50: #fce4e4;
--color-negative-100: #fbd5d5;
--color-negative-200: #f8afaf;
--color-negative-300: #f67e7e;
--color-negative-400: #f55b5b;
--color-negative-500: #db2424;
--color-negative-600: #b51c1c;
--color-information-25: #f2f7ff;
--color-information-50: #e0edff;
--color-information-100: #cce1ff;
--color-information-200: #99c3ff;
--color-information-300: #66a6ff;
--color-information-400: #3d8eff;
--color-information-500: #006aeb;
--color-information-600: #0059d6;
--color-warning-25: #fff6db;
--color-warning-50: #ffe8a3;
--color-warning-100: #ffdd75;
--color-warning-200: #ffb429;
--color-warning-300: #f78f08;
--color-warning-400: #e56b00;
--color-warning-500: #c24a00;
--color-warning-600: #a83200;
--color-rating-mid: #85b129;
--color-purple-25: #f7f5fd;
--color-purple-50: #eee8fa;
--color-purple-100: #e4dcf7;
--color-purple-200: #cabaef;
--color-purple-500: #5140de;
--color-teal-25: #e4f5f8;
--color-teal-400: #03a48e;
--color-teal-500: #0497a0;
--color-teal-700: #044960;
--color-navy-900: #16263f;
--color-alpha-light-12: rgba(255, 255, 255, 0.12);
--color-alpha-light-24: rgba(255, 255, 255, 0.24);
--color-alpha-light-44: rgba(255, 255, 255, 0.44);
--color-alpha-light-76: rgba(255, 255, 255, 0.76);
--color-alpha-light-84: rgba(255, 255, 255, 0.84);
--color-alpha-dark-12: rgba(20, 20, 20, 0.12);
--color-alpha-dark-24: rgba(20, 20, 20, 0.24);
--color-alpha-dark-44: rgba(20, 20, 20, 0.44);
--color-alpha-dark-76: rgba(20, 20, 20, 0.76);
--color-alpha-dark-84: rgba(20, 20, 20, 0.84);
--color-alpha-gray-24: rgba(194, 194, 194, 0.24);
--color-loot-poor: #c2c2c2;
--color-loot-common: #939393;
--color-loot-uncommon: #119400;
--color-loot-rare: #0070dd;
--color-loot-epic: #a048e5;
--color-loot-legendary: #ff8000;
--color-loot-artifact: #c6a957;
--color-loot-heirloom: #31abc9;
--color-class-death-knight: #b2313e;
--color-class-death-knight-25: #ffdcdc;
--color-class-demon-hunter: #943dc1;
--color-class-demon-hunter-25: #f7e8f7;
--color-class-druid: #ec8334;
--color-class-druid-25: #ffe9be;
--color-class-evoker: #439a85;
--color-class-evoker-25: #cef7f2;
--color-class-hunter: #91ad5f;
--color-class-hunter-25: #e4f0cb;
--color-class-mage: #6ec4e7;
--color-class-mage-25: #dbf0ff;
--color-class-monk: #5dd29a;
--color-class-monk-25: #e0ffe5;
--color-class-paladin: #e591b8;
--color-class-paladin-25: #ffeff6;
--color-class-priest: #ffffff;
--color-class-priest-invert: #9ba4b0;
--color-class-rogue: #eadb11;
--color-class-rogue-25: #fff8d3;
--color-class-shaman: #3370d7;
--color-class-shaman-25: #ecf6ff;
--color-class-warlock: #8788e6;
--color-class-warlock-25: #d7d6f6;
--color-class-warrior: #bf9e74;
--color-class-warrior-25: #f0e0d6;
}
:root {
--color-social-facebook: #0866ff;
--color-social-facebook-hover: #3b86ff;
--color-social-facebook-active: #0058e6;
--color-social-pinterest: #e60023;
--color-social-pinterest-hover: #ff304f;
--color-social-pinterest-active: #cf1935;
--color-social-youtube: #ff0000;
--color-social-youtube-hover: #ff3f3f;
--color-social-youtube-active: #df0000;
--color-social-discord: #5c6bc0;
--color-social-discord-hover: #7f8cd5;
--color-social-discord-active: #5563b3;
--color-social-twitter-old: #1da1f2;
--color-social-twitter-old-hover: #48baff;
--color-social-twitter-old-active: #2491d3;
}
:root {
--gradient-scrim-image: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.64) 100%);
--gradient-scrim-game: linear-gradient(180deg, rgba(20, 20, 20, 0.01) 0%, rgba(20, 20, 20, 0.88) 100%);
--gradient-social-instagram-icon: url("data:image/svg+xml;utf8,");
--gradient-social-instagram-icon-hover: url("data:image/svg+xml;utf8,");
--gradient-social-instagram-icon-active: url("data:image/svg+xml;utf8,");
--gradient-social-instagram-label: url("data:image/svg+xml;utf8,");
--gradient-social-instagram-label-hover: url("data:image/svg+xml;utf8,");
--gradient-social-instagram-label-active: url("data:image/svg+xml;utf8,");
}
:root {
--shadow-4: 0 2px 4px rgba(20, 20, 20, 0.04);
--shadow-12: 0 4px 12px rgba(20, 20, 20, 0.12);
}
:root {
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--text-display-48-size: 48px;
--text-display-48-line-height: 48px;
--text-display-48-weight: 600;
--text-display-40-size: 40px;
--text-display-40-line-height: 44px;
--text-display-40-weight: 600;
--text-display-36-size: 36px;
--text-display-36-line-height: 40px;
--text-display-36-weight: 600;
--text-display-32-size: 32px;
--text-display-32-line-height: 38px;
--text-display-32-weight: 600;
--text-display-28-size: 28px;
--text-display-28-line-height: 34px;
--text-display-28-weight: 600;
--text-display-24-size: 24px;
--text-display-24-line-height: 32px;
--text-display-24-weight: 600;
--text-display-22-size: 22px;
--text-display-22-line-height: 28px;
--text-display-22-weight: 600;
--text-display-20-size: 20px;
--text-display-20-line-height: 28px;
--text-display-20-weight: 600;
--text-display-18-size: 18px;
--text-display-18-line-height: 24px;
--text-display-18-weight: 600;
--text-display-16-size: 16px;
--text-display-16-line-height: 22px;
--text-display-16-weight: 600;
--text-display-14-size: 14px;
--text-display-14-line-height: 20px;
--text-display-14-weight: 600;
--text-display-12-size: 12px;
--text-display-12-line-height: 20px;
--text-display-12-weight: 600;
--text-display-12c-size: 12px;
--text-display-12c-line-height: 16px;
--text-display-12c-weight: 600;
--text-body-18-size: 18px;
--text-body-18-line-height: 28px;
--text-body-18-weight: 400;
--text-body-16-size: 16px;
--text-body-16-line-height: 24px;
--text-body-16-weight: 400;
--text-body-14-size: 14px;
--text-body-14-line-height: 20px;
--text-body-14-weight: 400;
--text-body-12-size: 12px;
--text-body-12-line-height: 16px;
--text-body-12-weight: 400;
--text-body-18m-size: 18px;
--text-body-18m-line-height: 28px;
--text-body-18m-weight: 500;
--text-body-16m-size: 16px;
--text-body-16m-line-height: 24px;
--text-body-16m-weight: 500;
--text-body-14m-size: 14px;
--text-body-14m-line-height: 20px;
--text-body-14m-weight: 500;
--text-body-12m-size: 12px;
--text-body-12m-line-height: 16px;
--text-body-12m-weight: 500;
--text-body-11m-size: 11px;
--text-body-11m-line-height: 12px;
--text-body-11m-weight: 500;
--text-body-8m-size: 8px;
--text-body-8m-line-height: 8px;
--text-body-8m-weight: 500;
}
.text-display-48 { font-family: var(--font-family-base); font-size: var(--text-display-48-size); line-height: var(--text-display-48-line-height); font-weight: var(--text-display-48-weight); }
.text-display-40 { font-family: var(--font-family-base); font-size: var(--text-display-40-size); line-height: var(--text-display-40-line-height); font-weight: var(--text-display-40-weight); }
.text-display-36 { font-family: var(--font-family-base); font-size: var(--text-display-36-size); line-height: var(--text-display-36-line-height); font-weight: var(--text-display-36-weight); }
.text-display-32 { font-family: var(--font-family-base); font-size: var(--text-display-32-size); line-height: var(--text-display-32-line-height); font-weight: var(--text-display-32-weight); }
.text-display-28 { font-family: var(--font-family-base); font-size: var(--text-display-28-size); line-height: var(--text-display-28-line-height); font-weight: var(--text-display-28-weight); }
.text-display-24 { font-family: var(--font-family-base); font-size: var(--text-display-24-size); line-height: var(--text-display-24-line-height); font-weight: var(--text-display-24-weight); }
.text-display-22 { font-family: var(--font-family-base); font-size: var(--text-display-22-size); line-height: var(--text-display-22-line-height); font-weight: var(--text-display-22-weight); }
.text-display-20 { font-family: var(--font-family-base); font-size: var(--text-display-20-size); line-height: var(--text-display-20-line-height); font-weight: var(--text-display-20-weight); }
.text-display-18 { font-family: var(--font-family-base); font-size: var(--text-display-18-size); line-height: var(--text-display-18-line-height); font-weight: var(--text-display-18-weight); }
.text-display-16 { font-family: var(--font-family-base); font-size: var(--text-display-16-size); line-height: var(--text-display-16-line-height); font-weight: var(--text-display-16-weight); }
.text-display-14 { font-family: var(--font-family-base); font-size: var(--text-display-14-size); line-height: var(--text-display-14-line-height); font-weight: var(--text-display-14-weight); }
.text-display-12 { font-family: var(--font-family-base); font-size: var(--text-display-12-size); line-height: var(--text-display-12-line-height); font-weight: var(--text-display-12-weight); }
.text-body-18 { font-family: var(--font-family-base); font-size: var(--text-body-18-size); line-height: var(--text-body-18-line-height); font-weight: var(--text-body-18-weight); }
.text-body-16 { font-family: var(--font-family-base); font-size: var(--text-body-16-size); line-height: var(--text-body-16-line-height); font-weight: var(--text-body-16-weight); }
.text-body-14 { font-family: var(--font-family-base); font-size: var(--text-body-14-size); line-height: var(--text-body-14-line-height); font-weight: var(--text-body-14-weight); }
.text-body-12 { font-family: var(--font-family-base); font-size: var(--text-body-12-size); line-height: var(--text-body-12-line-height); font-weight: var(--text-body-12-weight); }
.text-body-18m { font-family: var(--font-family-base); font-size: var(--text-body-18m-size); line-height: var(--text-body-18m-line-height); font-weight: var(--text-body-18m-weight); }
.text-body-16m { font-family: var(--font-family-base); font-size: var(--text-body-16m-size); line-height: var(--text-body-16m-line-height); font-weight: var(--text-body-16m-weight); }
.text-body-14m { font-family: var(--font-family-base); font-size: var(--text-body-14m-size); line-height: var(--text-body-14m-line-height); font-weight: var(--text-body-14m-weight); }
.text-body-12m { font-family: var(--font-family-base); font-size: var(--text-body-12m-size); line-height: var(--text-body-12m-line-height); font-weight: var(--text-body-12m-weight); }
.text-body-11m { font-family: var(--font-family-base); font-size: var(--text-body-11m-size); line-height: var(--text-body-11m-line-height); font-weight: var(--text-body-11m-weight); }
.text-body-8m { font-family: var(--font-family-base); font-size: var(--text-body-8m-size); line-height: var(--text-body-8m-line-height); font-weight: var(--text-body-8m-weight); }
/* ── shared/typography.css ── */
.prose {
--prose-heading-weight: var(--text-display-36-weight);
--prose-h1-size: var(--text-display-36-size);
--prose-h1-line-height: var(--text-display-36-line-height);
--prose-h2-size: var(--text-display-28-size);
--prose-h2-line-height: var(--text-display-28-line-height);
--prose-h3-size: var(--text-display-24-size);
--prose-h3-line-height: var(--text-display-24-line-height);
--prose-h4-size: var(--text-display-20-size);
--prose-h4-line-height: var(--text-display-20-line-height);
--prose-h5-size: var(--text-display-18-size);
--prose-h5-line-height: var(--text-display-18-line-height);
--prose-h6-size: var(--text-display-16-size);
--prose-h6-line-height: var(--text-display-16-line-height);
--prose-gap-h1: var(--spacing-32);
--prose-gap-h2: var(--spacing-24);
--prose-gap-h3: var(--spacing-20);
--prose-gap-h4: var(--spacing-16);
--prose-gap-h5: var(--spacing-12);
--prose-gap-h6: var(--spacing-8);
--prose-flow: var(--spacing-16);
--prose-section: var(--spacing-60);
--prose-marker-size: var(--spacing-8);
--prose-marker-gap: var(--spacing-12);
--prose-list-offset: var(--spacing-8);
--prose-list-indent: var(--spacing-16);
--prose-list-flow: var(--spacing-8);
--prose-list-flow-top: var(--spacing-16);
font-family: var(--font-family-base);
color: var(--color-gray-700);
}
.prose-page {
container-type: inline-size;
container-name: prose-page;
}
.prose > * + * {
padding-top: var(--prose-flow);
}
.prose > * + :where(h1, h2, h3, h4, h5, h6) {
padding-top: var(--prose-section);
}
.prose > :where(h1) + * { padding-top: var(--prose-gap-h1); }
.prose > :where(h2) + * { padding-top: var(--prose-gap-h2); }
.prose > :where(h3) + * { padding-top: var(--prose-gap-h3); }
.prose > :where(h4) + * { padding-top: var(--prose-gap-h4); }
.prose > :where(h5) + * { padding-top: var(--prose-gap-h5); }
.prose > :where(h6) + * { padding-top: var(--prose-gap-h6); }
.prose :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-family: var(--font-family-base);
font-weight: var(--prose-heading-weight);
color: var(--color-gray-900);
font-optical-sizing: none;
}
.prose :where(h1) { font-size: var(--prose-h1-size); line-height: var(--prose-h1-line-height); }
.prose :where(h2) { font-size: var(--prose-h2-size); line-height: var(--prose-h2-line-height); }
.prose :where(h3) { font-size: var(--prose-h3-size); line-height: var(--prose-h3-line-height); }
.prose :where(h4) { font-size: var(--prose-h4-size); line-height: var(--prose-h4-line-height); }
.prose :where(h5) { font-size: var(--prose-h5-size); line-height: var(--prose-h5-line-height); }
.prose :where(h6) { font-size: var(--prose-h6-size); line-height: var(--prose-h6-line-height); }
.prose :where(p) {
margin: 0;
font-size: var(--text-body-16-size);
line-height: var(--text-body-16-line-height);
font-weight: var(--text-body-16-weight);
color: var(--color-gray-700);
}
.prose :where(a) {
color: var(--color-accent-400);
font-weight: var(--text-body-16m-weight);
text-decoration: none;
}
.prose :where(strong, b) {
font-weight: var(--text-body-16m-weight);
color: var(--color-gray-900);
}
.prose :where(ul, ol) {
margin: 0;
padding: 0;
list-style: none;
color: var(--color-gray-900);
font-size: var(--text-body-16-size);
line-height: var(--text-body-16-line-height);
font-weight: var(--text-body-16-weight);
}
.prose :where(ul) { padding-left: var(--prose-list-offset); }
.prose :where(li) + :where(li) { padding-top: var(--prose-list-flow); }
.prose > :where(ul, ol) > :where(li) + :where(li) { padding-top: var(--prose-list-flow-top); }
.prose :where(li) > :where(ul, ol) {
padding-top: var(--prose-list-flow);
padding-left: var(--prose-list-indent);
}
.prose :where(ul) > :where(li) {
display: grid;
grid-template-columns: var(--prose-marker-size) 1fr;
column-gap: var(--prose-marker-gap);
}
.prose :where(ul) > :where(li)::before {
content: "";
width: var(--prose-marker-size);
height: var(--prose-marker-size);
border-radius: 50%;
background: var(--color-accent-400);
margin-top: var(--spacing-8);
}
.prose :where(li) > :where(ul, ol) { grid-column: 1 / -1; }
.prose :where(li li li) {
color: var(--color-gray-700);
}
.prose :where(ul) :where(li li li)::before {
background: transparent;
box-shadow: inset 0 0 0 2px var(--color-accent-400);
}
.prose :where(ol) {
counter-reset: prose-ol;
}
.prose :where(ol) > :where(li) {
display: block;
counter-increment: prose-ol;
}
.prose :where(ol) > :where(li)::before {
content: counters(prose-ol, ".") ". ";
}
@container prose-page (max-width: 767px) {
.prose > * {
--prose-h1-size: var(--text-display-24-size) !important;
--prose-h1-line-height: var(--text-display-24-line-height) !important;
--prose-h2-size: var(--text-display-22-size) !important;
--prose-h2-line-height: var(--text-display-22-line-height) !important;
--prose-h3-size: var(--text-display-20-size) !important;
--prose-h3-line-height: var(--text-display-20-line-height) !important;
--prose-h4-size: var(--text-display-18-size) !important;
--prose-h4-line-height: var(--text-display-18-line-height) !important;
--prose-h5-size: var(--text-display-16-size) !important;
--prose-h5-line-height: var(--text-display-16-line-height) !important;
--prose-h6-size: var(--text-display-14-size) !important;
--prose-h6-line-height: var(--text-display-14-line-height) !important;
--prose-gap-h1: var(--spacing-20) !important;
--prose-gap-h2: var(--spacing-16) !important;
--prose-gap-h3: var(--spacing-16) !important;
--prose-gap-h4: var(--spacing-12) !important;
--prose-gap-h5: var(--spacing-8) !important;
--prose-gap-h6: var(--spacing-8) !important;
--prose-section: var(--spacing-40) !important;
}
}
.prose--compact > * {
--prose-h2-size: var(--text-display-20-size);
--prose-h2-line-height: var(--text-display-20-line-height);
--prose-h3-size: var(--text-display-18-size);
--prose-h3-line-height: var(--text-display-18-line-height);
--prose-h4-size: var(--text-display-16-size);
--prose-h4-line-height: var(--text-display-16-line-height);
--prose-gap-h2: var(--spacing-12);
--prose-gap-h3: var(--spacing-12);
--prose-gap-h4: var(--spacing-12);
--prose-flow: var(--spacing-24);
--prose-section: var(--spacing-40);
}
/* ── shared/grid.css ── */
:root {
--grid-columns: 4;
--grid-gutter: var(--spacing-16);
}
@media (min-width: 768px) {
:root { --grid-columns: 12; }
}
@media (min-width: 1280px) {
:root { --grid-gutter: var(--spacing-24); }
}
.container {
box-sizing: border-box;
width: 100%;
margin-inline: auto;
--container-pad: var(--spacing-20);
padding-inline: var(--container-pad);
}
@media (min-width: 1280px) {
.container {
max-width: 1440px;
--container-pad: 64px;
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gutter);
}
.bp-container { container-type: inline-size; }
.bp-scope {
--grid-columns: 4;
--grid-gutter: var(--spacing-16);
--bp-tablet: 0;
--bp-desktop: 0;
--only-desktop: none;
--below-desktop: flex;
--only-tablet: none;
--only-mobile: inline;
--from-tablet: none;
--bp-mlandscape: 0;
--bp-tlandscape: 0;
--from-mlandscape: none;
--below-mlandscape: inline;
--from-tlandscape: none;
--below-tlandscape: flex;
--sticky-below-tablet: sticky;
--absolute-from-tablet: static;
--scrollx-below-desktop: auto;
--scrollx-below-tablet: auto;
}
@container (min-width: 536px) {
.bp-scope {
--bp-mlandscape: 1 !important;
--from-mlandscape: inline !important;
--below-mlandscape: none !important;
}
}
@container (min-width: 728px) {
.bp-scope {
--grid-columns: 12 !important;
--bp-tablet: 1 !important;
--only-tablet: inline !important;
--only-mobile: none !important;
--from-tablet: block !important;
--sticky-below-tablet: static !important;
--absolute-from-tablet: absolute !important;
--scrollx-below-tablet: visible !important;
}
}
@container (min-width: 960px) {
.bp-scope {
--bp-tlandscape: 1 !important;
--from-tlandscape: flex !important;
--below-tlandscape: none !important;
}
}
@container (min-width: 1152px) {
.bp-scope {
--grid-gutter: var(--spacing-24) !important;
--bp-desktop: 1 !important;
--only-desktop: flex !important;
--below-desktop: none !important;
--only-tablet: none !important;
--scrollx-below-desktop: visible !important;
}
}
.bp-scope {
--bleed-below-tablet: calc((1 - var(--bp-tablet)) * var(--container-pad, 0px));
--bleed-below-desktop: calc((1 - var(--bp-desktop)) * var(--container-pad, 0px));
--bleed: 0px;
}
.bleed {
align-self: stretch;
width: auto;
margin-inline: calc(-1 * var(--bleed));
padding-inline: var(--bleed);
scroll-padding-inline: var(--bleed);
}
/* ── components/accordion.css ── */
.acc {
--acc-divider: inset 0 -1px 0 0 var(--color-gray-50);
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
box-shadow: var(--acc-divider);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.acc__header {
display: flex;
align-items: flex-start;
gap: var(--spacing-20);
width: 100%;
padding: var(--spacing-20) 0;
box-sizing: border-box;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.acc__title {
flex: 1 0 0;
min-width: 0;
margin: 0;
color: var(--color-gray-900);
overflow-wrap: break-word;
}
.acc__header:hover .acc__title,
.acc__header:focus-visible .acc__title,
.acc--hover .acc__title { color: var(--color-gray-500); }
.acc__header:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: 2px;
}
.acc__icon {
display: inline-flex;
flex: none;
width: var(--spacing-20);
height: var(--spacing-20);
color: var(--color-gray-900);
}
.acc__icon svg { display: block; width: 100%; height: 100%; }
.acc__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-32);
width: 100%;
box-sizing: border-box;
padding-bottom: var(--spacing-36);
}
.acc__text {
margin: 0;
width: 100%;
color: var(--color-gray-700);
overflow-wrap: break-word;
}
.acc--closed .acc__content { display: none; }
.acc--accent { padding-left: var(--spacing-32); }
.acc--accent .acc__content { padding-right: var(--spacing-32); }
.acc--accent.acc--open {
background: var(--color-gray-0);
box-shadow: inset var(--spacing-4) 0 0 0 var(--color-accent-400), var(--acc-divider);
}
.acc--accent.acc--open .acc__icon { display: none; }
/* ── components/badge.css ── */
.badge {
display: inline-flex;
align-items: center;
box-sizing: border-box;
border-radius: var(--radius-4);
overflow: hidden;
font-family: var(--font-family-base);
white-space: nowrap;
}
.badge__dot {
flex: none;
width: 6px;
height: 6px;
}
.badge__dot svg { display: block; width: 100%; height: 100%; }
.badge--sm { padding: var(--spacing-4); }
.badge--md { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-8); }
.badge--lg { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-10); }
.badge--primary { color: var(--color-gray-0); }
.badge--primary.badge--brand { background: var(--color-accent-400); }
.badge--primary.badge--gray { background: var(--color-gray-400); }
.badge--primary.badge--orange { background: var(--color-warning-300); }
.badge--primary.badge--green { background: var(--color-positive-400); }
.badge--primary.badge--blue { background: var(--color-information-400); }
.badge--primary.badge--red { background: var(--color-negative-400); }
.badge--primary.badge--purple { background: var(--color-loot-epic); }
.badge--primary.badge--teal { background: var(--color-teal-400); }
.badge--secondary.badge--brand { background: var(--color-accent-25); color: var(--color-accent-600); }
.badge--secondary.badge--gray { background: var(--color-gray-25); color: var(--color-gray-500); }
.badge--secondary.badge--orange { background: var(--color-warning-25); color: var(--color-warning-400); }
.badge--secondary.badge--green { background: var(--color-positive-50); color: var(--color-positive-500); }
.badge--secondary.badge--blue { background: var(--color-information-25); color: var(--color-information-500); }
.badge--secondary.badge--red { background: var(--color-negative-50); color: var(--color-negative-500); }
.badge--secondary.badge--purple { background: var(--color-purple-25); color: var(--color-loot-epic); }
.badge--secondary.badge--teal { background: var(--color-teal-25); color: var(--color-teal-500); }
.badge--timer { background: var(--color-gray-0); color: var(--color-gray-900); }
.badge--sale { padding: var(--spacing-4) var(--spacing-6); }
/* ── components/breadcrumbs.css ── */
.brc {
display: flex;
align-items: center;
}
.brc--s { gap: var(--spacing-4); }
.brc--m { gap: var(--spacing-8); }
.brc__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
text-decoration: none;
color: var(--color-gray-500);
cursor: pointer;
}
.brc__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: currentColor;
opacity: 0;
}
.brc--m .brc__link::after { bottom: 0; }
.brc--s .brc__link::after { bottom: 1px; }
.brc__link:hover,
.brc__link--hover { color: var(--color-gray-600); }
.brc__link:hover::after,
.brc__link--hover::after { opacity: 1; }
.brc__link:active,
.brc__link--active { color: var(--color-gray-700); }
.brc__link:active::after,
.brc__link--active::after { opacity: 0; }
.brc__current {
color: var(--color-gray-200);
cursor: default;
}
.brc__current::after { content: none; }
.brc__sep {
flex: none;
display: block;
color: var(--color-gray-200);
}
.brc--m .brc__sep { width: 16px; height: 16px; stroke-width: 2.4; }
.brc--s .brc__sep { width: 12px; height: 12px; stroke-width: 3.2; }
/* ── components/button.css ── */
.btn {
--btn-icon-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: none;
border-radius: var(--radius-8);
background: transparent;
font-family: var(--font-family-base);
cursor: pointer;
position: relative;
white-space: nowrap;
text-decoration: none;
-webkit-appearance: none;
appearance: none;
}
.btn__label { display: inline-block; }
.btn__icon {
display: inline-flex;
flex: none;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
}
.btn__icon svg { display: block; width: 100%; height: 100%; }
.btn--sm { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-12); --btn-icon-size: 16px; }
.btn--md { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 16px; }
.btn--lg { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 20px; }
.btn--icon-only.btn--sm { padding: var(--spacing-8); }
.btn--icon-only.btn--md { padding: var(--spacing-12); }
.btn--icon-only.btn--lg { padding: var(--spacing-12); }
.btn--primary { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--hover,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--active,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }
.btn--primary.btn--disabled,
.btn--primary:disabled { background: var(--color-accent-100); }
.btn--primary.btn--loading { background: var(--color-accent-100); }
.btn--secondary {
background: var(--color-gray-0);
color: var(--color-gray-900);
box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
}
.btn--secondary.btn--hover,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
box-shadow: inset 0 0 0 1px var(--color-accent-400), var(--shadow-4);
color: var(--color-accent-400);
}
.btn--secondary.btn--active,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
box-shadow: inset 0 0 0 1px var(--color-accent-600), var(--shadow-4);
color: var(--color-accent-600);
}
.btn--secondary.btn--disabled,
.btn--secondary:disabled {
box-shadow: inset 0 0 0 1px var(--color-gray-50); color: var(--color-gray-100);
}
.btn--secondary.btn--loading { box-shadow: inset 0 0 0 1px var(--color-gray-50); }
.btn--tertiary {
background: var(--color-accent-25);
color: var(--color-accent-400);
box-shadow: inset 0 0 0 1px var(--color-accent-100), var(--shadow-4);
}
.btn--tertiary.btn--hover,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--active,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--disabled,
.btn--tertiary:disabled { box-shadow: none; color: var(--color-accent-100); }
.btn--tertiary.btn--loading { box-shadow: none; }
.btn--ghost { background: transparent; color: var(--color-gray-800); }
.btn--ghost.btn--hover,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-400); }
.btn--ghost.btn--active,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--ghost.btn--disabled,
.btn--ghost:disabled { color: var(--color-gray-100); }
.btn--primary.btn--positive { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--hover,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--active,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-600); }
.btn--primary.btn--positive.btn--disabled,
.btn--primary.btn--positive:disabled { background: var(--color-positive-50); }
.btn--primary.btn--positive.btn--loading { background: var(--color-positive-500); }
.btn--primary.btn--negative { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--hover,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--active,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--disabled,
.btn--primary.btn--negative:disabled { background: var(--color-negative-50); }
.btn--primary.btn--negative.btn--loading { background: var(--color-negative-500); }
.btn--ghost.btn--negative { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--hover,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--active,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--disabled,
.btn--ghost.btn--negative:disabled { color: var(--color-negative-50); }
.btn--primary.btn--overlay { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--overlay.btn--hover,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--overlay.btn--active,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }
.btn--primary.btn--overlay.btn--disabled,
.btn--primary.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--overlay.btn--loading { background: var(--color-gray-700); }
.btn--primary.btn--positive.btn--overlay { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--overlay.btn--hover,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-300); }
.btn--primary.btn--positive.btn--overlay.btn--active,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--overlay.btn--disabled,
.btn--primary.btn--positive.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--positive.btn--overlay.btn--loading { background: var(--color-positive-400); }
.btn--primary.btn--negative.btn--overlay { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--overlay.btn--hover,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--overlay.btn--active,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--overlay.btn--disabled,
.btn--primary.btn--negative.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--negative.btn--overlay.btn--loading { background: var(--color-negative-500); }
.btn--secondary.btn--overlay {
background: transparent;
color: var(--color-gray-0);
box-shadow: inset 0 0 0 1px var(--color-alpha-light-24), var(--shadow-4);
}
.btn--secondary.btn--overlay.btn--hover,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
box-shadow: inset 0 0 0 1px var(--color-gray-0), var(--shadow-4);
color: var(--color-gray-0);
}
.btn--secondary.btn--overlay.btn--active,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
box-shadow: inset 0 0 0 1px var(--color-alpha-light-84), var(--shadow-4);
color: var(--color-alpha-light-84);
}
.btn--secondary.btn--overlay.btn--disabled,
.btn--secondary.btn--overlay:disabled {
box-shadow: inset 0 0 0 1px var(--color-alpha-light-24);
color: var(--color-alpha-light-24);
}
.btn--secondary.btn--overlay.btn--loading { box-shadow: inset 0 0 0 1px var(--color-alpha-light-24); }
.btn--tertiary.btn--overlay {
background: transparent;
color: var(--color-accent-400);
box-shadow: none;
}
.btn--tertiary.btn--overlay.btn--hover,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--overlay.btn--active,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--overlay.btn--disabled,
.btn--tertiary.btn--overlay:disabled { color: var(--color-gray-600); }
.btn--ghost.btn--overlay { color: var(--color-gray-0); }
.btn--ghost.btn--overlay.btn--hover,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-gray-200); }
.btn--ghost.btn--overlay.btn--active,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-gray-300); }
.btn--ghost.btn--overlay.btn--disabled,
.btn--ghost.btn--overlay:disabled { color: var(--color-gray-600); }
.btn--ghost.btn--negative.btn--overlay { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--overlay.btn--hover,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--overlay.btn--active,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--overlay.btn--disabled,
.btn--ghost.btn--negative.btn--overlay:disabled { color: var(--color-gray-600); }
.btn--primary.btn--overlay .btn__spinner,
.btn--secondary.btn--overlay .btn__spinner,
.btn--ghost.btn--overlay .btn__spinner { color: var(--color-gray-0); }
.btn--tertiary.btn--overlay .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative.btn--overlay .btn__spinner { color: var(--color-negative-400); }
.btn:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: 2px;
}
.btn--disabled, .btn:disabled { cursor: default; }
.btn--loading { cursor: default; }
.btn--loading .btn__icon,
.btn--loading .btn__label { visibility: hidden; }
.btn__spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--btn-icon-size);
height: var(--btn-icon-size);
}
.btn__spinner svg {
display: block;
width: 100%;
height: 100%;
transform-origin: 50% 50%;
animation: btn-spinner-rotate 0.8s linear infinite;
}
.btn--loading .btn__spinner { display: inline-flex; }
@keyframes btn-spinner-rotate {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.btn__spinner svg { animation: none; }
}
.btn--secondary .btn__spinner,
.btn--tertiary .btn__spinner,
.btn--ghost .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative .btn__spinner { color: var(--color-negative-500); }
.btn__indicator {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
/* ПРОДАКШЕН: компонент используется и как ссылка () —
кнопки-реалмы и «See offers» ведут на страницы. */
a.btn { text-decoration: none; }
/* ── components/counter.css ── */
.counter {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: var(--radius-24);
font-family: var(--font-family-base);
text-align: center;
white-space: nowrap;
}
.counter--s { min-width: var(--spacing-16); height: var(--spacing-16); padding-inline: var(--spacing-4); }
.counter--m { min-width: var(--spacing-20); height: var(--spacing-20); padding-inline: var(--spacing-6); }
.counter--l { min-width: var(--spacing-24); height: var(--spacing-24); padding-inline: var(--spacing-8); }
.counter--primary { color: var(--color-gray-0); }
.counter--primary.counter--default { background: var(--color-accent-400); }
.counter--primary.counter--disabled { background: var(--color-gray-100); }
.counter--primary.counter--error { background: var(--color-negative-500); }
.counter--secondary.counter--default { background: var(--color-gray-25); color: var(--color-gray-900); }
.counter--secondary.counter--disabled { background: var(--color-gray-0); color: var(--color-gray-100); }
.counter--secondary.counter--error { background: var(--color-negative-25); color: var(--color-negative-500); }
/* ── components/dropdown-item.css ── */
.di {
box-sizing: border-box;
display: flex;
align-items: center;
width: 236px;
border-radius: var(--radius-4);
background: transparent;
color: var(--color-gray-900);
font-family: var(--font-family-base);
cursor: pointer;
}
.di--s { padding: var(--spacing-8); }
.di--m { padding: var(--spacing-8) var(--spacing-12); }
.di__content {
display: flex;
flex: 1 0 0;
min-width: 0;
align-items: center;
gap: var(--spacing-8);
overflow: hidden;
}
.di__label {
flex: 1 0 0;
min-width: 0;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.di__icon {
flex-shrink: 0;
display: block;
color: var(--color-gray-400);
}
.di__icon svg { display: block; width: 100%; height: 100%; }
.di--s .di__icon { width: 16px; height: 16px; }
.di--m .di__icon { width: 20px; height: 20px; }
.di__avatar {
flex-shrink: 0;
display: block;
border-radius: 200px;
object-fit: cover;
}
.di--s .di__avatar { width: 16px; height: 16px; }
.di--m .di__avatar { width: 20px; height: 20px; }
.di__box {
box-sizing: border-box;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-4);
border: 1px solid var(--color-gray-200);
background: var(--color-gray-0);
color: var(--color-gray-0);
}
.di--s .di__box { width: 16px; height: 16px; }
.di--m .di__box { width: 20px; height: 20px; }
.di__box svg { display: none; width: 100%; height: 100%; }
.di__box--checked {
background: var(--color-accent-400);
border-color: var(--color-accent-400);
}
.di__box--checked svg { display: block; }
.di__check {
flex-shrink: 0;
width: 16px;
height: 16px;
display: block;
color: var(--color-accent-400);
}
.di__check svg { display: block; width: 100%; height: 100%; }
.di__counter {
flex-shrink: 0;
color: var(--color-gray-300);
white-space: nowrap;
}
.di__spinner { flex-shrink: 0; }
.di--s .di__spinner { width: 16px; height: 16px; }
.di--m .di__spinner { width: 20px; height: 20px; }
.di--hover { background: var(--color-gray-25); }
.di--selected { background: var(--color-gray-25); }
.di--selected.di--checkbox { background: var(--color-gray-0); }
.di--disabled { cursor: default; }
.di--disabled .di__label,
.di--disabled .di__counter,
.di--disabled .di__icon { color: var(--color-gray-100); }
.di--disabled .di__avatar { opacity: 0.4; }
.di--disabled .di__box {
background: var(--color-gray-25);
border-color: var(--color-gray-50);
}
.di--live:not(.di--disabled):not(.di--selected):hover { background: var(--color-gray-25); }
.di--live:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: -2px;
}
.di--live .di__check { display: none; }
.di--live.di--selected .di__check { display: block; }
/* ── components/faction-bar.css ── */
.fbar {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 100%;
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.fbar *,
.fbar *::before,
.fbar *::after { box-sizing: border-box; }
.fbar p { margin: 0; }
.fbar__track {
position: relative;
overflow: hidden;
width: 100%;
height: var(--spacing-4);
border-radius: var(--radius-4);
background: var(--color-accent-300);
}
.fbar__fill {
display: block;
width: var(--fb-horde, 50%);
height: 100%;
background: var(--color-negative-400);
}
.fbar__labels {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--spacing-8);
color: var(--color-gray-900);
}
.fbar__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fbar__label--alliance { text-align: right; }
/* ── components/feedback-question.css ── */
.fq {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
font-family: var(--font-family-base);
font-optical-sizing: none;
gap: var(--spacing-12);
}
.fq *,
.fq *::before,
.fq *::after { box-sizing: border-box; }
.fq p { margin: 0; }
.fq--l {
gap: var(--spacing-24);
padding-block: var(--spacing-60);
box-shadow: inset 0 1px 0 var(--color-gray-100);
}
.fq--s.fq--reasons,
.fq--s.fq--other { gap: var(--spacing-20); }
.fq__head {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 100%;
}
.fq__title { color: var(--color-gray-900); }
.fq__subtitle { color: var(--color-gray-500); }
.fq__text {
color: var(--color-gray-500);
width: 100%;
}
.fq__buttons {
display: flex;
align-items: flex-start;
gap: var(--spacing-8);
}
.fq--l .fq__btn { width: 92px; }
.fq__btn { width: 80px; }
.fq__reasons {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-8);
width: 100%;
}
.fq__reason { width: 100%; }
.textarea.fq__textarea {
width: 100%;
gap: var(--spacing-4);
}
.fq__textarea .textarea__field { height: 136px; }
.fq__textarea .textarea__control { height: 100%; min-height: 0; resize: none; }
.fq__field-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-8);
flex-wrap: wrap;
width: 100%;
}
.textarea__hint.fq__counter { color: var(--color-gray-400); margin: 0; width: auto; }
.fq__error {
display: none;
margin: 0;
color: var(--color-negative-500);
}
.textarea--status-error .fq__error { display: block; }
.notif.fq__notif {
width: 100%;
box-shadow: inset 0 0 0 1px var(--color-positive-100);
}
.fq__notif .notif__body {
padding: var(--spacing-12) var(--spacing-16);
gap: var(--spacing-8);
}
.fq__step { display: none; width: 100%; }
.fq--default .fq__step--default,
.fq--success .fq__step--success,
.fq--reasons .fq__step--form,
.fq--other .fq__step--form { display: flex; }
.fq__step--form {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-24);
}
.fq--s .fq__step--form { gap: var(--spacing-20); }
.fq__step--form .fq__textarea { display: none; }
.fq--other .fq__step--form .fq__textarea { display: flex; }
/* ── components/independed-rate.css ── */
.rate {
--rate-value: 5;
--rate-color: var(--color-positive-400);
display: inline-flex;
align-items: center;
gap: 2px;
}
.rate--5 { --rate-value: 5; --rate-color: var(--color-positive-400); }
.rate--4-5 { --rate-value: 4.5; --rate-color: var(--color-positive-400); }
.rate--4 { --rate-value: 4; --rate-color: var(--color-positive-400); }
.rate--3-5 { --rate-value: 3.5; --rate-color: var(--color-rating-mid); }
.rate--3 { --rate-value: 3; --rate-color: var(--color-rating-mid); }
.rate--2-5 { --rate-value: 2.5; --rate-color: var(--color-warning-300); }
.rate--2 { --rate-value: 2; --rate-color: var(--color-warning-300); }
.rate--1-5 { --rate-value: 1.5; --rate-color: var(--color-negative-500); }
.rate--1 { --rate-value: 1; --rate-color: var(--color-negative-500); }
.rate__star {
position: relative;
display: block;
flex: none;
width: 20px;
height: 20px;
}
.rate__star:nth-child(1) { --rate-index: 0; }
.rate__star:nth-child(2) { --rate-index: 1; }
.rate__star:nth-child(3) { --rate-index: 2; }
.rate__star:nth-child(4) { --rate-index: 3; }
.rate__star:nth-child(5) { --rate-index: 4; }
.rate--16 .rate__star { width: 16px; height: 16px; }
.rate__layer {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.rate__layer svg { display: block; height: 100%; }
.rate__empty {
width: 100%;
color: var(--color-gray-100);
}
.rate__empty svg { width: 100%; }
.rate__fill {
width: var(--rate-fill, clamp(0%, calc((var(--rate-value) - var(--rate-index)) * 100%), 100%));
overflow: hidden;
color: var(--rate-color);
}
.rate__fill svg { width: 20px; }
.rate--16 .rate__fill svg { width: 16px; }
/* ── components/indicator.css ── */
.indicator {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
color: var(--color-positive-400);
}
.indicator--red { color: var(--color-negative-500); }
.indicator__art {
position: absolute;
left: -6px;
top: -4px;
width: 20px;
height: 20px;
overflow: visible;
filter: drop-shadow(var(--shadow-4));
}
.indicator__dot {
fill: currentColor;
stroke: var(--color-gray-0);
}
.indicator__pulse {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
background: currentColor;
opacity: 0;
animation: indicator-pulse 1.6s ease-out infinite;
}
@keyframes indicator-pulse {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(2.6); opacity: 0; }
}
.indicator--static .indicator__pulse { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.indicator__pulse { animation: none; opacity: 0; }
}
/* ── components/input.css ── */
.input {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 320px;
font-family: var(--font-family-base);
}
.input__label {
display: flex;
align-items: center;
gap: var(--spacing-4);
width: 100%;
}
.input__label-text { color: var(--color-gray-900); }
.input__req { color: var(--color-negative-500); }
.input__optional { color: var(--color-gray-300); }
.input__label .tooltip { flex-shrink: 0; }
.input__field {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--spacing-8);
width: 100%;
padding: var(--spacing-10) var(--spacing-16);
border-radius: var(--radius-8);
background: var(--color-gray-0);
box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
overflow: hidden;
}
.input__icon {
flex-shrink: 0;
display: flex;
color: var(--color-gray-400);
}
.input__icon svg { display: block; width: 20px; height: 20px; }
.input__content {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
overflow: hidden;
}
.input__value { color: var(--color-gray-800); white-space: nowrap; }
.input__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.input__caret {
flex-shrink: 0;
width: 1px;
height: 20px;
background: var(--color-gray-800);
}
.input__clear {
flex-shrink: 0;
display: flex;
padding: 0;
border: 0;
background: none;
color: var(--color-gray-200);
cursor: pointer;
}
.input__clear svg { display: block; width: 16px; height: 16px; }
.input__suffix {
flex-shrink: 0;
color: var(--color-positive-500);
text-align: right;
white-space: nowrap;
}
.input__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.input__hint--error { color: var(--color-negative-500); }
.input__hint--warning {
display: flex;
align-items: center;
gap: var(--spacing-8);
color: var(--color-warning-400);
}
.input__hint--warning .input__hint-icon {
flex-shrink: 0;
display: flex;
color: var(--color-warning-300);
}
.input__hint--warning .input__hint-icon svg { display: block; width: 16px; height: 16px; }
.input--hover .input__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.input--focus .input__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.input--status-error .input__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.input--status-error.input--focus .input__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }
.input__input {
flex: 1 1 0;
min-width: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--color-gray-800);
}
.input__input::placeholder { color: var(--color-gray-300); opacity: 1; }
.input__input:placeholder-shown + .input__clear { display: none; }
.input--live .input__field:hover { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.input--live .input__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.input--live.input--status-error .input__field,
.input--live.input--status-error .input__field:hover { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.input--live.input--status-error .input__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }
.input--disabled .input__field {
box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
background: var(--color-gray-25);
}
.input--disabled .input__label-text,
.input--disabled .input__optional,
.input--disabled .tooltip__trigger,
.input--disabled .input__icon,
.input--disabled .input__value,
.input--disabled .input__placeholder,
.input--disabled .input__input,
.input--disabled .input__suffix,
.input--disabled .input__hint {
color: var(--color-gray-100);
}
.input--disabled .input__input::placeholder { color: var(--color-gray-100); }
.input--disabled .input__input { cursor: not-allowed; }
/* ── components/link.css ── */
.link {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-decoration: none;
cursor: pointer;
font-optical-sizing: none;
}
.link__text { white-space: nowrap; }
.link__icon { flex: 0 0 auto; display: block; }
.link__icon path { stroke-width: 2.4; }
.link--xs { gap: var(--spacing-4); }
.link--s { gap: var(--spacing-4); }
.link--m { gap: var(--spacing-8); }
.link--xs .link__icon { width: 12px; height: 12px; }
.link--s .link__icon { width: 16px; height: 16px; }
.link--m .link__icon { width: 16px; height: 16px; }
.link--disabled { cursor: default; pointer-events: none; }
.link--live { color: var(--link-c); transition: color .12s ease; }
.link--live:hover,
.link--live:focus-visible { color: var(--link-h); }
.link--live:active { color: var(--link-a); }
.link--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; border-radius: 2px; }
/* ── components/logo.css ── */
.logo {
display: inline-block;
color: var(--color-gray-900);
line-height: 0;
}
.logo svg {
display: block;
height: 32px;
width: auto;
}
.logo--inverse { color: var(--color-gray-0); }
.logo--word-only svg { height: 32px; }
.logo__word path { fill: currentColor; }
.logo__mark path { fill: var(--color-accent-400); }
/* ── components/notification-inline.css ── */
.notif {
box-sizing: border-box;
width: 400px;
border-radius: var(--radius-12);
background: var(--notif-bg);
overflow: hidden;
display: flex;
align-items: flex-start;
font-family: var(--font-family-base);
}
.notif--info {
--notif-bg: var(--color-information-25);
--notif-border: var(--color-information-50);
--notif-icon: var(--color-information-400);
--notif-action: var(--color-accent-400);
--notif-action-h: var(--color-accent-600);
--notif-action-a: var(--color-accent-400);
}
.notif--positive {
--notif-bg: var(--color-positive-25);
--notif-border: var(--color-positive-50);
--notif-icon: var(--color-positive-400);
--notif-action: var(--color-positive-500);
--notif-action-h: var(--color-positive-400);
--notif-action-a: var(--color-positive-500);
}
.notif--attention {
--notif-bg: var(--color-warning-25);
--notif-border: var(--color-warning-50);
--notif-icon: var(--color-warning-300);
--notif-action: var(--color-warning-400);
--notif-action-h: var(--color-warning-300);
--notif-action-a: var(--color-warning-500);
}
.notif--negative {
--notif-bg: var(--color-negative-50);
--notif-border: var(--color-negative-100);
--notif-icon: var(--color-negative-500);
--notif-action: var(--color-negative-500);
--notif-action-h: var(--color-negative-400);
--notif-action-a: var(--color-negative-600);
}
.notif--l { border: 1px solid var(--notif-border); }
.notif__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: var(--spacing-12);
align-items: flex-start;
}
.notif--l .notif__body { padding: var(--spacing-24); flex-direction: row; }
.notif--m .notif__body { padding: var(--spacing-16); flex-direction: row; }
.notif--s .notif__body { padding: var(--spacing-16); flex-direction: column; }
.notif__icon { flex: none; color: var(--notif-icon); display: flex; }
.notif__icon svg { display: block; }
.notif--l .notif__icon { padding-top: 2px; }
.notif--l .notif__icon svg { width: 20px; height: 20px; }
.notif--m .notif__icon,
.notif--s .notif__icon { height: 20px; align-items: center; }
.notif--m .notif__icon svg,
.notif--s .notif__icon svg { width: 16px; height: 16px; }
.notif__main { flex: 1 1 auto; min-width: 0; display: flex; }
.notif--l .notif__main { flex-direction: column; gap: var(--spacing-20); }
.notif--m .notif__main { flex-direction: row; align-items: flex-start; gap: var(--spacing-12); }
.notif--s .notif__main { flex-direction: column; gap: var(--spacing-12); align-self: stretch; }
.notif__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.notif--l .notif__text { gap: var(--spacing-8); }
.notif--m .notif__text,
.notif--s .notif__text { gap: var(--spacing-4); }
.notif__title { margin: 0; color: var(--color-gray-800); word-break: break-word; }
.notif__message { margin: 0; color: var(--color-gray-800); word-break: break-word; }
.notif__actions { display: flex; flex-wrap: wrap; }
.notif--l .notif__actions { gap: var(--spacing-16); }
.notif--m .notif__actions { flex: none; }
.notif--s .notif__actions { row-gap: var(--spacing-8); column-gap: var(--spacing-16); }
.notif__action--primary {
--link-c: var(--notif-action);
--link-h: var(--notif-action-h);
--link-a: var(--notif-action-a);
}
.notif__action--secondary {
--link-c: var(--color-gray-500);
--link-h: var(--color-gray-600);
--link-a: var(--color-gray-500);
}
.notif__close { flex: none; display: flex; align-items: flex-start; }
.notif--l .notif__close { padding: var(--spacing-8) var(--spacing-8) 0 0; }
.notif--m .notif__close,
.notif--s .notif__close { padding: var(--spacing-4) var(--spacing-4) 0 0; }
/* ── components/radio-button.css ── */
.radio {
display: inline-flex;
align-items: flex-start;
gap: var(--spacing-8);
font-family: var(--font-family-base);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.radio__control {
display: flex;
align-items: center;
min-height: var(--text-body-16-line-height);
flex-shrink: 0;
}
.radio__box {
box-sizing: border-box;
flex-shrink: 0;
width: var(--spacing-20);
height: var(--spacing-20);
border-radius: var(--radius-32);
border: 1px solid var(--color-gray-200);
background: var(--color-gray-0);
}
.radio--checked .radio__box {
border-width: 5px;
border-color: var(--color-accent-400);
}
.radio--hover .radio__box { border-color: var(--color-accent-400); }
.radio--hover.radio--checked .radio__box { border-color: var(--color-accent-600); }
.radio--disabled { cursor: not-allowed; }
.radio--disabled .radio__box {
background: var(--color-gray-25);
border-color: var(--color-gray-50);
}
.radio--disabled.radio--checked .radio__box {
background: var(--color-gray-0);
border-color: var(--color-accent-100);
}
.radio__text {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
min-height: var(--text-body-16-line-height);
word-break: break-word;
white-space: nowrap;
}
.radio__label { color: var(--color-gray-900); }
.radio__desc { color: var(--color-gray-400); }
.radio__suffix { color: var(--color-positive-500); }
.radio__emoji { color: var(--color-warning-400); }
.radio--disabled .radio__label,
.radio--disabled .radio__desc,
.radio--disabled .radio__emoji { color: var(--color-gray-100); }
.radio--disabled .radio__suffix { color: var(--color-positive-50); }
.radio:not(.radio--disabled):hover .radio__box {
border-color: var(--color-accent-400);
}
.radio:not(.radio--disabled):hover.radio--checked .radio__box {
border-color: var(--color-accent-600);
}
.radio:focus-visible { outline: none; }
.radio:focus-visible .radio__box {
outline: 2px solid var(--color-accent-400);
outline-offset: 2px;
}
/* ── components/select.css ── */
.select {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 320px;
font-family: var(--font-family-base);
}
.select__label {
display: flex;
align-items: center;
gap: var(--spacing-4);
width: 100%;
}
.select__label-text { color: var(--color-gray-900); }
.select__req { color: var(--color-negative-500); }
.select__optional { color: var(--color-gray-300); }
.select__tooltip {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
color: var(--color-gray-200);
}
.select__tooltip svg { display: block; width: 16px; height: 16px; }
.select__field {
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-8);
width: 100%;
padding: var(--spacing-10) var(--spacing-16);
border-radius: var(--radius-8);
background: var(--color-gray-0);
box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
overflow: hidden;
cursor: pointer;
}
.select__icon {
flex-shrink: 0;
display: flex;
color: var(--color-gray-400);
}
.select__icon svg { display: block; width: 20px; height: 20px; }
.select__content {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: var(--spacing-4);
overflow: hidden;
}
.select__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.select__value { color: var(--color-gray-800); white-space: nowrap; }
.select__caption {
flex: 1 1 0;
min-width: 0;
color: var(--color-gray-300);
text-align: right;
white-space: nowrap;
}
.select__chevron {
flex-shrink: 0;
display: flex;
color: var(--color-gray-400);
}
.select__chevron svg { display: block; width: 20px; height: 20px; }
.select__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.select__hint--error { color: var(--color-negative-500); }
.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.select--status-error .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.select--status-error.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-600), var(--shadow-4); }
.select--status-error.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }
.select--disabled .select__field {
box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
background: var(--color-gray-25);
cursor: not-allowed;
}
.select--disabled .select__label-text,
.select--disabled .select__optional,
.select--disabled .select__tooltip,
.select--disabled .select__icon,
.select--disabled .select__placeholder,
.select--disabled .select__value,
.select--disabled .select__caption,
.select--disabled .select__chevron,
.select--disabled .select__hint {
color: var(--color-gray-100);
}
.select--focus .select__field { overflow: visible; }
.select__menu {
position: absolute;
left: -2px;
right: -2px;
top: 46px;
z-index: 2;
display: flex;
flex-direction: column;
padding: var(--spacing-4);
background: var(--color-gray-0);
border: 1px solid var(--color-gray-50);
border-radius: var(--radius-8);
box-shadow: var(--shadow-4);
overflow: hidden;
cursor: default;
}
.select__menu .di { width: 100%; }
.select__scrollbar {
position: absolute;
top: var(--spacing-8);
right: 3px;
bottom: var(--spacing-8);
width: 4px;
}
.select__scrollbar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 75%;
background: var(--color-gray-50);
border-radius: var(--radius-8);
}
.select--live .select__menu { display: none; }
.select--live.select--open .select__menu { display: flex; }
.select--live.select--open .select__field { overflow: visible; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.select--live .select__field:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
/* ── components/stat-card.css ── */
.scard {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-20);
width: 100%;
padding: var(--spacing-24);
border-radius: var(--radius-12);
background: var(--color-information-25);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.scard *,
.scard *::before,
.scard *::after { box-sizing: border-box; }
.scard p { margin: 0; }
.scard__icon-box {
position: relative;
flex: none;
display: flex;
padding: var(--spacing-12);
border-radius: var(--radius-12);
background: var(--color-gray-0);
box-shadow: var(--shadow-4);
color: var(--color-accent-400);
}
.scard__icon {
display: block;
width: 20px;
height: 20px;
}
.scard__icon-badge {
position: absolute;
left: 36px;
top: 0;
}
.scard__body {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
flex: 1 1 calc(100% * var(--bp-tablet, 1));
min-width: 0;
}
.scard__value {
color: var(--color-gray-900);
overflow-wrap: anywhere;
}
.scard .scard__value {
font-size: calc(
var(--text-display-18-size) +
var(--bp-tablet, 1) * (var(--text-display-22-size) - var(--text-display-18-size))
);
line-height: calc(
var(--text-display-18-line-height) +
var(--bp-tablet, 1) * (var(--text-display-22-line-height) - var(--text-display-18-line-height))
);
}
.scard__label {
display: flex;
align-items: center;
gap: var(--spacing-8);
min-height: var(--spacing-24);
color: var(--color-gray-400);
}
.scard__label-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scard-row {
--scard-cols: calc(1 + 2 * var(--bp-tablet, 1) + 2 * var(--bp-desktop, 1));
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
align-items: stretch;
}
.scard-row > .scard {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(
(100% - (var(--scard-cols) - 1) * var(--spacing-8)) / var(--scard-cols) - 1px
);
min-width: 0;
}
/* ── components/table.css ── */
.table {
position: relative;
box-sizing: border-box;
width: 100%;
background: var(--color-gray-50);
border-radius: var(--radius-8);
box-shadow: var(--shadow-4);
overflow: hidden;
font-optical-sizing: none;
}
.table::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid var(--color-gray-50);
border-radius: inherit;
pointer-events: none;
}
.table__grid {
width: calc(100% + 2px);
margin: 0 -1px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 1px 0;
}
.table__cell {
box-sizing: border-box;
height: var(--spacing-44);
padding: var(--spacing-12) var(--spacing-16);
text-align: left;
vertical-align: middle;
overflow-wrap: break-word;
word-break: break-word;
background: var(--color-gray-0);
color: var(--color-gray-900);
box-shadow: inset 0 -1px 0 0 var(--color-gray-50);
}
.table__cell--head {
background: var(--color-gray-25);
color: var(--color-gray-700);
}
.table--mixed .table__row:nth-child(even) .table__cell {
background: var(--color-gray-25);
}
.table__sort {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
}
.table__sort-icon {
flex: none;
display: none;
width: 12px;
height: 12px;
color: var(--color-gray-400);
}
.table__cell--head[aria-sort="descending"] .table__sort-icon,
.table__cell--head[aria-sort="ascending"] .table__sort-icon { display: block; }
.table__cell--head[aria-sort="ascending"] .table__sort-icon { transform: rotate(180deg); }
.table__sort-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table__cell--right { text-align: right; }
.table__cell--right .table__sort { justify-content: flex-end; }
/* ── components/tabs.css ── */
.tabs {
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
font-family: var(--font-family-base);
}
.tabs--s { padding-bottom: var(--spacing-16); }
.tabs--m { padding-bottom: var(--spacing-24); }
.tabs__group {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--spacing-8);
width: 100%;
border-bottom: 1px solid var(--color-gray-100);
}
.tab {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--spacing-8);
white-space: nowrap;
cursor: pointer;
color: var(--color-gray-900);
}
.tabs--s .tab { height: 46px; padding: var(--spacing-12) var(--spacing-8); }
.tabs--m .tab { height: 60px; padding: var(--spacing-16) var(--spacing-12); }
.tab__label { color: inherit; }
.tab--selected,
.tab--hover { }
.tab--selected::after,
.tab--hover::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
}
.tab--hover::after { background: var(--color-gray-100); }
.tab--selected::after { background: var(--color-accent-400); }
.tab--selected { color: var(--color-accent-400); }
.tab--disabled { color: var(--color-gray-100); cursor: default; }
.tabs__more { position: relative; }
.dropdown-list {
position: absolute;
right: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: var(--spacing-4);
background: var(--color-gray-0);
border: 1px solid var(--color-gray-50);
border-radius: var(--radius-8);
box-shadow: var(--shadow-4);
overflow: hidden;
}
.tabs--s .dropdown-list { top: 50px; width: 100px; }
.tabs--m .dropdown-list { top: 64px; width: 120px; }
.dropdown-item {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
border-radius: var(--radius-4);
color: var(--color-gray-900);
cursor: pointer;
}
.tabs--s .dropdown-item { padding: var(--spacing-8); }
.tabs--m .dropdown-item { padding: var(--spacing-8) var(--spacing-12); }
.dropdown-item--hover { background: var(--color-gray-25); }
.dropdown-item__label { flex: 1 0 0; min-width: 0; color: inherit; }
.dropdown-scroll {
position: absolute;
top: -1px; right: -1px; bottom: -1px;
box-sizing: border-box;
width: 12px;
padding: var(--spacing-8) var(--spacing-4);
display: flex;
}
.dropdown-scroll__track { position: relative; width: 4px; height: 100%; }
.dropdown-scroll__bar {
position: absolute;
top: 0; left: 0;
width: 4px; height: 75%;
background: var(--color-gray-50);
border-radius: var(--radius-8);
}
.tab:not(.tab--disabled):not(.tab--selected):hover::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--color-gray-100);
}
.tab:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: -2px;
border-radius: var(--radius-4);
}
.dropdown-item:hover { background: var(--color-gray-25); }
.tabs__more[data-menu] .dropdown-list { display: none; }
.tabs__more[data-menu].is-open .dropdown-list { display: flex; }
/* ── components/textarea.css ── */
.textarea {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 320px;
font-family: var(--font-family-base);
}
.textarea__label {
display: flex;
align-items: center;
gap: var(--spacing-4);
width: 100%;
}
.textarea__label-text { color: var(--color-gray-900); }
.textarea__req { color: var(--color-negative-500); }
.textarea__optional { color: var(--color-gray-300); }
.textarea__label .tooltip { flex-shrink: 0; }
.textarea__field {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 100%;
padding: var(--spacing-10) var(--spacing-16);
border-radius: var(--radius-8);
background: var(--color-gray-0);
box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
}
.textarea__control {
box-sizing: content-box;
width: 100%;
min-height: calc(var(--text-body-16-line-height) * 3);
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--color-gray-800);
resize: vertical;
}
.textarea__control::placeholder { color: var(--color-gray-300); opacity: 1; }
.textarea__value { color: var(--color-gray-800); }
.textarea__placeholder { color: var(--color-gray-300); }
.textarea__content {
min-height: calc(var(--text-body-16-line-height) * 3);
color: var(--color-gray-800);
}
.textarea__caret {
display: inline-block;
width: 1px;
height: 20px;
vertical-align: text-bottom;
background: var(--color-gray-800);
}
.textarea__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-8);
}
.textarea__counter { color: var(--color-gray-300); white-space: nowrap; }
.textarea--status-error .textarea__counter { color: var(--color-negative-500); }
.textarea__hint { margin: 0; width: 100%; color: var(--color-gray-400); }
.textarea__hint--error { color: var(--color-negative-500); }
.textarea__hint--warning {
display: flex;
align-items: center;
gap: var(--spacing-8);
color: var(--color-warning-400);
}
.textarea__hint--warning .textarea__hint-icon {
flex-shrink: 0;
display: flex;
color: var(--color-warning-300);
}
.textarea__hint--warning .textarea__hint-icon svg { display: block; width: 16px; height: 16px; }
.textarea--hover .textarea__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.textarea--focus .textarea__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.textarea--status-error .textarea__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.textarea--status-error.textarea--focus .textarea__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }
.textarea--live .textarea__field:hover { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.textarea--live .textarea__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.textarea--live.textarea--status-error .textarea__field,
.textarea--live.textarea--status-error .textarea__field:hover { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.textarea--live.textarea--status-error .textarea__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }
.textarea--disabled .textarea__field {
box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
background: var(--color-gray-25);
}
.textarea--disabled .textarea__label-text,
.textarea--disabled .textarea__optional,
.textarea--disabled .tooltip__trigger,
.textarea--disabled .textarea__value,
.textarea--disabled .textarea__placeholder,
.textarea--disabled .textarea__content,
.textarea--disabled .textarea__control,
.textarea--disabled .textarea__counter,
.textarea--disabled .textarea__hint {
color: var(--color-gray-100);
}
.textarea--disabled .textarea__control::placeholder { color: var(--color-gray-100); }
.textarea--disabled .textarea__control { cursor: not-allowed; resize: none; }
/* ── components/toggle-button-group.css ── */
.tbg {
--tbg-bg: var(--color-gray-50);
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-8);
box-sizing: border-box;
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.tbg--off { --tbg-bg: var(--color-gray-50); }
.tbg--on { --tbg-bg: var(--color-gray-0); }
.tbg--disabled.tbg--off { --tbg-bg: var(--color-gray-25); }
.tbg--disabled.tbg--on { --tbg-bg: var(--color-gray-0); }
.tbg__label {
display: flex;
align-items: center;
gap: var(--spacing-4);
width: 100%;
}
.tbg__label-text { color: var(--color-gray-800); }
.tbg__optional {
flex: 1 0 0;
min-width: 0;
color: var(--color-gray-300);
}
.tbg__group {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-4);
width: 100%;
box-sizing: border-box;
border-radius: var(--radius-8);
background: var(--tbg-bg);
}
.tbg__group .tgl {
display: flex;
flex: 1 0 0;
min-width: 0;
}
.tbg--disabled .tbg__label-text,
.tbg--disabled .tbg__optional { color: var(--color-gray-100); }
.tbg--disabled .tgl {
--tgl-bg: transparent;
--tgl-fg: var(--color-gray-100);
--tgl-shadow: none;
cursor: default;
}
.tbg__group .tgl--live:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: 2px;
}
/* ── components/toggle-button.css ── */
.tgl {
--tgl-bg: transparent;
--tgl-fg: var(--color-gray-900);
--tgl-shadow: none;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
border: none;
border-radius: var(--radius-6);
background: var(--tgl-bg);
color: var(--tgl-fg);
box-shadow: var(--tgl-shadow);
font-family: var(--font-family-base);
white-space: nowrap;
cursor: pointer;
}
.tgl__label { color: inherit; }
.tgl--md { padding: var(--spacing-8) var(--spacing-16); }
.tgl--sm { padding: var(--spacing-4) var(--spacing-8); }
.tgl--hover { --tgl-bg: var(--color-gray-0); }
.tgl--hover.tgl--on { --tgl-fg: var(--color-accent-600); }
.tgl--active { --tgl-bg: var(--color-gray-0); --tgl-shadow: var(--shadow-12); }
.tgl--active.tgl--on { --tgl-bg: var(--color-accent-400); --tgl-fg: var(--color-gray-0); --tgl-shadow: var(--shadow-4); }
.tgl--disabled { --tgl-bg: transparent; --tgl-fg: var(--color-gray-200); --tgl-shadow: none; cursor: default; }
.tgl__badge {
position: absolute;
left: calc(50% + 0.5px);
top: var(--spacing-32);
transform: translateX(-50%);
}
.tgl--live:not(:disabled):not([aria-pressed="true"]):hover { --tgl-bg: var(--color-gray-0); }
.tgl--live.tgl--on:not(:disabled):not([aria-pressed="true"]):hover { --tgl-fg: var(--color-accent-600); }
.tgl--live:disabled { --tgl-bg: transparent; --tgl-fg: var(--color-gray-200); --tgl-shadow: none; cursor: default; }
.tgl--live[aria-pressed="true"] { --tgl-bg: var(--color-gray-0); --tgl-shadow: var(--shadow-12); }
.tgl--live.tgl--on[aria-pressed="true"] { --tgl-bg: var(--color-accent-400); --tgl-fg: var(--color-gray-0); --tgl-shadow: var(--shadow-4); }
.tgl--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
/* ── blocks/banner-service-request.css ── */
.bsr,
.bsr * { box-sizing: border-box; }
.bsr {
--d: var(--bp-desktop, 1);
--t: var(--bp-tablet, 1);
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-32);
padding: calc(var(--spacing-24) + var(--t) * (var(--spacing-32) - var(--spacing-24)));
border-radius: var(--radius-12);
background: var(--color-purple-500);
overflow: hidden;
isolation: isolate;
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.bsr p { margin: 0; }
.bsr__bg {
position: absolute;
inset: 0;
z-index: 1;
}
.bsr__art {
position: absolute;
top: 0;
left: calc((var(--t) - var(--d)) * 66.6667%);
width: calc(
var(--d) * 25% +
(var(--t) - var(--d)) * 33.3333% +
(1 - var(--t)) * 100%
);
height: calc(var(--t) * 100% + (1 - var(--t)) * min(33.3333%, 120px));
overflow: hidden;
}
.bsr__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bsr__scrim { position: absolute; inset: 0; }
.bsr__scrim--l {
opacity: var(--d);
background: linear-gradient(to right, transparent 66.6667%, var(--color-purple-500) 100%);
}
.bsr__scrim--m {
opacity: calc(var(--t) - var(--d));
background: linear-gradient(to right, var(--color-purple-500) 0%, transparent 50%);
}
.bsr__scrim--s {
opacity: calc(1 - var(--t));
background: linear-gradient(to bottom, transparent 50%, var(--color-purple-500) 100%);
}
.bsr__content {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--spacing-24);
row-gap: calc(var(--spacing-24) + (1 - var(--t)) * (var(--spacing-20) - var(--spacing-24)));
flex: 1 1 0;
min-width: 0;
}
.bsr__text {
display: flex;
flex-wrap: wrap;
align-items: center;
flex: 1 1 calc((1 - var(--d)) * 100cqw);
min-width: 0;
}
.bsr__spacer {
flex-grow: var(--d);
flex-shrink: 1;
flex-basis: calc((1 - var(--t)) * 100cqw);
max-width: calc(var(--d) * 240px + (1 - var(--t)) * 100cqw);
min-width: calc(var(--d) * 100px);
height: calc(var(--d) * 48px + (1 - var(--t)) * 120px);
}
.bsr__copy {
display: flex;
flex-direction: column;
gap: calc((1 - var(--t)) * var(--spacing-8));
flex: 1 1 0;
min-width: calc(var(--d) * 280px);
}
.bsr__title { color: var(--color-gray-0); }
.bsr__sub { color: var(--color-alpha-light-76); }
.bsr__btn {
flex: none;
flex-grow: calc(1 - var(--t));
}
.bsr .btn--secondary { box-shadow: var(--shadow-4); }
/* ── blocks/faq.css ── */
.faq,
.faq * { box-sizing: border-box; }
.faq {
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.faq__inner {
display: flex;
flex-direction: column;
align-items: center;
padding-block: calc(
var(--spacing-60) + var(--bp-tablet) * (var(--spacing-80) - var(--spacing-60))
);
}
.faq__head {
align-self: stretch;
padding-bottom: calc(
var(--spacing-20) + var(--bp-tablet) * (var(--spacing-24) - var(--spacing-20))
);
}
.faq__title-wrap {
display: flex;
align-items: flex-start;
}
.faq__title-wrap::before,
.faq__title-wrap::after {
content: "";
flex: var(--bp-tablet) 0 0;
}
.faq__title {
margin: 0;
width: fit-content;
color: var(--color-gray-900);
font-size: calc(
var(--text-display-22-size) +
var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-22-size))
);
line-height: calc(
var(--text-display-22-line-height) +
var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
);
font-weight: var(--text-display-28-weight);
}
.faq__br { display: var(--only-mobile); }
.faq__count {
position: relative;
flex: none;
width: 0;
margin-left: var(--spacing-12);
height: calc(
var(--text-display-22-line-height) +
var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
);
}
.faq__count .counter {
position: absolute;
left: 0;
top: -8px;
}
.faq__list {
width: 100%;
max-width: calc(760px * var(--bp-desktop) + 100% * (1 - var(--bp-desktop)));
}
/* ── blocks/footer.css ── */
.footer {
background: var(--color-gray-800);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.footer *,
.footer *::before,
.footer *::after { box-sizing: border-box; }
.footer p { margin: 0; }
.footer__inner {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
padding-inline: calc(
var(--spacing-20) + var(--bp-desktop) * (64px - var(--spacing-20))
);
padding-bottom: calc(
var(--spacing-16) + var(--bp-desktop) * (var(--spacing-32) - var(--spacing-16))
);
max-width: 1440px;
margin-inline: auto;
}
.footer__top {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: calc(
var(--spacing-20) + var(--bp-desktop) * (var(--spacing-24) - var(--spacing-20))
);
border-bottom: 1px solid var(--color-gray-700);
flex-wrap: wrap;
row-gap: var(--spacing-12);
}
.footer__logo svg {
height: calc(24px + var(--bp-tablet) * 8px);
}
.footer__methods {
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
flex-basis: calc(100% * (1 - var(--bp-tablet)));
justify-content: space-between;
}
@supports (width: 1px) {
.footer__methods { flex-grow: 0; flex-shrink: 0; }
}
.footer__method {
display: block;
flex: none;
width: 34px;
height: 24px;
}
.footer__trust-row { padding-top: var(--spacing-20); }
.footer--simple .footer__trust-row {
padding-bottom: calc(var(--spacing-20) * (1 - var(--bp-tablet)));
}
.footer__trust {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-8);
}
.footer__rate .rate__star {
width: calc(16px + var(--bp-tablet) * 4px);
height: calc(16px + var(--bp-tablet) * 4px);
}
.footer__rate .rate__fill svg { width: calc(16px + var(--bp-tablet) * 4px); }
.footer__trust-text {
flex: 1 0 calc(100% * (1 - var(--bp-tablet)));
color: var(--color-gray-0);
font-size: calc(
var(--text-body-12-size) + var(--bp-tablet) *
(var(--text-body-14-size) - var(--text-body-12-size))
);
line-height: calc(
var(--text-body-12-line-height) + var(--bp-tablet) *
(var(--text-body-14-line-height) - var(--text-body-12-line-height))
);
font-weight: calc(
var(--text-body-12-weight) + var(--bp-tablet) *
(var(--text-body-14m-weight) - var(--text-body-12-weight))
);
}
.footer__columns {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: var(--spacing-24);
row-gap: var(--f-stack-gap);
padding-block: calc(
var(--spacing-52) + var(--bp-tablet) * (56px - var(--spacing-52))
);
}
.footer__colgroup {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: var(--spacing-24);
row-gap: var(--f-stack-gap);
flex: 1 0 calc(100% * (1 - var(--bp-tablet)));
min-width: 0;
}
.footer__col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--f-stack-gap);
flex: 1 0 calc(100% * (1 - var(--bp-desktop)));
min-width: 0;
}
.footer__inner {
--f-stack-gap: calc(
var(--spacing-40) + var(--bp-tablet) * (var(--spacing-52) - var(--spacing-40))
);
}
.footer__list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-20);
width: 100%;
}
.footer__list-title {
width: 100%;
color: var(--color-gray-300);
}
.footer__links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-8);
}
.footer__link {
--link-c: var(--color-gray-25);
--link-h: var(--color-gray-200);
--link-a: var(--color-gray-25);
color: var(--link-c);
}
.footer__link-icon {
flex: none;
width: 16px;
height: 16px;
}
.footer__social { gap: var(--spacing-12); }
.footer__social-group {
display: flex;
align-items: flex-start;
gap: var(--spacing-8);
}
.footer__policy {
display: flex;
align-items: flex-end;
color: var(--color-gray-500);
padding-block: calc(var(--spacing-32) * var(--bp-tablet));
}
.footer--simple .footer__policy {
padding-block: calc(
var(--spacing-32) * var(--bp-tablet) +
var(--spacing-16) * (1 - var(--bp-tablet))
);
}
.footer--simple .footer__policy { padding-bottom: 0; }
/* ПРОДАКШЕН: строка рейтинга — ссылка на страницу отзывов wowvendor.com.
В пакете дизайн-системы это статичный блок; ссылкой его делает прод.
Цвета берём у .footer__link выше (та же конвенция ссылок в тёмном
подвале: gray-25 → hover gray-200), фокусная рамка — по канону ДС
(2px accent-400, offset 2). Раскладку ряда не трогаем: класс тот же,
display: flex остаётся, у снимаем только подчёркивание. */
/* Ссылка поджата по содержимому: иначе кликабельной становится вся
ширина ряда, включая пустоту справа от строки рейтинга. */
a.footer__trust {
width: fit-content;
max-width: 100%;
text-decoration: none;
}
a.footer__trust:hover .footer__trust-text { color: var(--color-gray-200); }
a.footer__trust:focus-visible {
outline: 2px solid var(--color-accent-400);
outline-offset: 2px;
}
/* ── blocks/header-media.css ── */
.hm {
position: relative;
z-index: 3;
background: var(--color-gray-0);
font-family: var(--font-family-base);
font-optical-sizing: none;
box-shadow: inset 0 -1px 0 var(--color-gray-100);
}
.hm *,
.hm *::before,
.hm *::after { box-sizing: border-box; }
.hm__top { background: var(--color-gray-25); }
.hm__row {
--container-pad: calc(
var(--spacing-20) +
var(--spacing-16) * var(--bp-tlandscape) * (1 - var(--bp-desktop)) +
(64px - var(--spacing-20)) * var(--bp-desktop)
);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
}
.hm__top .hm__row { padding-block: 11px; }
.hm__menu .hm__row {
display: grid;
grid-template-columns: 1fr auto 1fr;
min-height: calc(60px + 8px * var(--bp-tlandscape));
padding-block: calc(8px + 4px * var(--bp-tlandscape));
}
.hm__lang {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-8);
}
.hm__flag { display: block; width: 16px; height: auto; }
.hm__lang-btn {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: 0;
border: 0;
background: none;
color: var(--color-gray-900);
cursor: pointer;
font-family: inherit;
}
.hm__lang-btn svg { width: 16px; height: 16px; color: var(--color-gray-400); }
.hm__lang-long { display: var(--from-mlandscape, inline); }
.hm__lang-short { display: var(--below-mlandscape, none); }
.hm__lang-menu {
position: absolute;
z-index: 30;
top: calc(100% + var(--spacing-8));
left: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-2);
padding: var(--spacing-4);
border-radius: var(--radius-8);
background: var(--color-gray-0);
box-shadow: var(--shadow-12);
}
.hm__lang-menu[hidden] { display: none; }
.hm__lang-item {
width: auto;
min-width: 160px;
text-decoration: none;
}
.hm__lang-item .di__content { display: flex; align-items: center; gap: var(--spacing-8); }
.hm__logo {
--hm-lock: calc(0.8 + 0.2 * var(--bp-tlandscape));
display: flex;
align-items: flex-start;
margin-top: calc(-4px * var(--hm-lock));
gap: calc(var(--spacing-8) * var(--hm-lock));
text-decoration: none;
}
.hm__logo .logo svg { height: calc(28px * var(--hm-lock)); }
.hm__label {
display: flex;
align-items: center;
padding-inline: calc(var(--spacing-6) * var(--hm-lock));
padding-block: calc(2px * var(--hm-lock));
border-radius: var(--radius-32);
background: var(--color-accent-400);
color: var(--color-gray-0);
font-size: calc(var(--text-body-12m-size) * var(--hm-lock));
line-height: calc(var(--text-body-12m-line-height) * var(--hm-lock));
font-weight: var(--text-body-12m-weight);
white-space: nowrap;
}
.hm__nav {
display: var(--from-tlandscape);
align-items: stretch;
gap: var(--spacing-32);
align-self: stretch;
margin-block: calc(-1 * (8px + 4px * var(--bp-tlandscape)));
}
.hm__nav-link {
display: flex;
align-items: center;
gap: var(--spacing-4);
color: var(--color-gray-900);
text-decoration: none;
}
.hm__nav-link svg { width: 16px; height: 16px; }
.hm__nav-link:hover { color: var(--color-accent-400); }
.hm__nav-text {
display: flex;
align-items: center;
gap: var(--spacing-4);
}
.hm__nav-link:focus-visible { outline: none; }
.hm__nav-link:focus-visible .hm__nav-text {
outline: 2px solid var(--color-accent-400);
outline-offset: 4px;
border-radius: var(--radius-4);
}
.hm__nav-link--active {
position: relative;
color: var(--color-accent-600);
}
.hm__nav-link--active::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: var(--color-accent-400);
}
/* ── blocks/seo.css ── */
.seo,
.seo * { box-sizing: border-box; }
.seo {
padding-bottom: var(--spacing-80);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.seo__title {
margin: 0;
padding-bottom: var(--spacing-24);
color: var(--color-gray-900);
}
.seo__text {
margin: 0;
color: var(--color-gray-700);
}
/* ── blocks/tab-bar.css ── */
.tabbar,
.tabbar * { box-sizing: border-box; }
.tabbar {
display: flex;
align-items: stretch;
gap: 0;
padding: var(--spacing-4);
background: var(--color-gray-0);
box-shadow:
inset 0 1px 0 var(--color-gray-50),
0 -4px 12px rgba(20, 20, 20, 0.08);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
.tabbar__tab {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-4);
padding: var(--spacing-8) 0 var(--spacing-4);
border-radius: var(--radius-12);
color: var(--color-gray-400);
text-decoration: none;
position: relative;
}
.tabbar__icon {
display: block;
flex: none;
width: 20px;
height: 20px;
color: var(--color-gray-900);
}
.tabbar__label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tabbar__tab--active {
background: var(--color-accent-25);
color: var(--color-accent-600);
}
.tabbar__tab--active .tabbar__icon { color: var(--color-accent-600); }
.tabbar__counter {
position: absolute;
top: 0;
left: calc(50% + var(--spacing-4));
}
/* ── screens/realmstatus.css ── */
body {
margin: 0;
background: var(--color-gray-0);
color: var(--color-gray-900);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
*, *::before, *::after { box-sizing: border-box; }
.page { position: relative; overflow-x: clip; }
.rs-wrap { padding-top: var(--spacing-24); }
.rs-content { padding-top: var(--spacing-24); padding-bottom: var(--spacing-60); }
.rs-h1 { padding-bottom: var(--spacing-24); }
.rs-h1__title { margin: 0; }
.rs-h1__sub { margin: var(--spacing-16) 0 0; color: var(--color-gray-700); }
.rs-tab {
margin: 0;
border: 0;
background: none;
font-family: inherit;
}
.rs-filters { padding-bottom: var(--spacing-24); }
.rs-filters__note {
margin: 0 0 var(--spacing-32);
color: var(--color-gray-700);
}
.rs-filters__cards { margin-bottom: var(--spacing-20); }
.rs-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--spacing-8);
}
.rs-toolbar__search {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% * (1 - var(--bp-desktop, 1)));
min-width: 0;
}
.rs-toolbar__select {
flex-grow: calc(1 - var(--bp-desktop, 1));
flex-shrink: 1;
flex-basis: calc(140px + 24px * var(--bp-desktop, 1));
}
.rs-toolbar__regions {
flex-grow: calc(1 - var(--bp-desktop, 1));
flex-shrink: 1;
flex-basis: 264px;
min-width: 0;
}
.rs-count {
margin: var(--spacing-20) 0 0;
color: var(--color-gray-500);
}
.rs-list {
padding-bottom: var(--spacing-80);
--bleed: var(--bleed-below-desktop);
}
.rs-table-scroll { overflow-x: var(--scrollx-below-desktop, visible); }
.rs-table-scroll > .rs-table { min-width: 1152px; }
.rs-table__pop {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
}
.rs-table__status {
display: flex;
align-items: center;
gap: var(--spacing-8);
}
.rs-table__realm { display: block; }
.rs-table__realm--hover .link__text { text-decoration: underline; }
.rs-table__connected {
display: block;
margin-top: var(--spacing-4);
color: var(--color-gray-500);
}
.rs-note {
margin: var(--spacing-24) 0 0;
color: var(--color-gray-700);
}
.rs-faq .faq__list { max-width: 100%; }
.rs-faq .faq__title-wrap::before,
.rs-faq .faq__title-wrap::after { flex-grow: 0; }
.rs-faq .faq__inner { padding-top: 0; padding-bottom: var(--spacing-60); }
.rs-faq .faq__title {
--rs-faq-title-size: calc(
var(--text-display-22-size) +
var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-22-size))
);
--rs-faq-title-lh: calc(
var(--text-display-22-line-height) +
var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
);
font-size: calc(
var(--rs-faq-title-size) +
var(--bp-desktop) * (var(--text-display-24-size) - var(--rs-faq-title-size))
);
line-height: calc(
var(--rs-faq-title-lh) +
var(--bp-desktop) * (var(--text-display-24-line-height) - var(--rs-faq-title-lh))
);
}
.rs-faq .faq__head { padding-bottom: 18px; }
.rs-tabs > .tabs { margin-bottom: -1px; }
.rs-h1__title {
font-size: calc(
var(--text-display-24-size) +
var(--bp-tablet, 1) * (var(--text-display-36-size) - var(--text-display-24-size))
);
line-height: calc(
var(--text-display-24-line-height) +
var(--bp-tablet, 1) * (var(--text-display-36-line-height) - var(--text-display-24-line-height))
);
}
.rs-seo .seo__title {
font-size: calc(
var(--text-display-22-size) +
var(--bp-tablet, 1) * (var(--text-display-28-size) - var(--text-display-22-size))
);
line-height: calc(
var(--text-display-22-line-height) +
var(--bp-tablet, 1) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
);
}
[data-dragscroll] {
overflow-x: var(--scrollx-below-tablet, visible);
scrollbar-width: none;
-ms-overflow-style: none;
}
[data-dragscroll]::-webkit-scrollbar { display: none; }
[data-dragscroll].is-draggable { cursor: grab; }
[data-dragscroll].is-draggable:active { cursor: grabbing; }
.rs-brc-scope { --bleed: var(--bleed-below-tablet); }
.rs-brc { flex-wrap: nowrap; }
.rs-tabs { --bleed: var(--bleed-below-tablet); }
.rs-tabs .tabs__group { width: auto; }
.rs-tabbar-slot { position: sticky; bottom: 0; z-index: 4; }
.rs-tabbar { display: var(--below-tlandscape); }
/* ══ ПРОДАКШЕН: добавки экрана ══════════════════════════════════════════════
Классы, которых нет в пакете дизайн-системы. Табы игровых версий — ссылки
на три раздела с разными URL (SEO-требование CLAUDE.md), компонент таба
тег-агностичен. Остальное — состояния, добавленные на проде: бейдж очереди
второй строкой ячейки статуса, «No data» в колонке фракций, пустая таблица
после фильтра. */
a.rs-tab { color: inherit; text-decoration: none; }
.rs-table th[data-key] { cursor: pointer; }
.rs-table__queue {
display: inline-block;
margin-top: var(--spacing-4);
}
.rs-table__nodata { color: var(--color-gray-500); }
.rs-table__empty .table__cell {
color: var(--color-gray-500);
text-align: center;
}
/* ── screens/realmstatus-realm.css ── */
body {
margin: 0;
background: var(--color-gray-0);
color: var(--color-gray-900);
font-family: var(--font-family-base);
font-optical-sizing: none;
}
*, *::before, *::after { box-sizing: border-box; }
.page { position: relative; overflow-x: clip; }
.rsr-wrap { padding-top: var(--spacing-24); }
.rsr-content { padding-top: var(--spacing-24); padding-bottom: var(--spacing-60); }
.rsr-h1 { padding-bottom: var(--spacing-24); }
.rsr-h1__title { margin: 0; }
.rsr-h1__sub { margin: var(--spacing-16) 0 0; color: var(--color-gray-500); }
.rsr-tab {
margin: 0;
border: 0;
background: none;
font-family: inherit;
}
.rsr-section { padding-bottom: var(--spacing-60); }
.rsr-section--last { padding-bottom: var(--spacing-80); }
.rsr-heading {
margin: 0 0 var(--spacing-24);
color: var(--color-gray-900);
}
.rsr-note {
margin: var(--spacing-24) 0 0;
color: var(--color-gray-500);
}
.rsr-banner { margin-top: var(--spacing-40); }
.rsr-scard-value {
display: flex;
align-items: center;
gap: var(--spacing-8);
}
.rsr-faction-icon {
display: block;
width: 20px;
height: 20px;
}
.rsr-fbar { margin-bottom: var(--spacing-12); }
.rsr-fbar .fbar__track {
height: var(--spacing-12);
border-radius: var(--radius-8);
}
.rsr-realms {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
}
.rsr-faq .faq__list { max-width: 100%; }
.rsr-faq .faq__title-wrap::before,
.rsr-faq .faq__title-wrap::after { flex-grow: 0; }
.rsr-faq .faq__inner { padding-top: 0; padding-bottom: var(--spacing-60); }
.rsr-faq .faq__title {
--rsr-faq-title-size: calc(
var(--text-display-22-size) +
var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-22-size))
);
--rsr-faq-title-lh: calc(
var(--text-display-22-line-height) +
var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
);
font-size: calc(
var(--rsr-faq-title-size) +
var(--bp-desktop) * (var(--text-display-24-size) - var(--rsr-faq-title-size))
);
line-height: calc(
var(--rsr-faq-title-lh) +
var(--bp-desktop) * (var(--text-display-24-line-height) - var(--rsr-faq-title-lh))
);
}
.rsr-faq .faq__head { padding-bottom: 18px; }
.rsr-tabs > .tabs { margin-bottom: -1px; }
.rsr-h1__title {
font-size: calc(
var(--text-display-24-size) +
var(--bp-tablet, 1) * (var(--text-display-36-size) - var(--text-display-24-size))
);
line-height: calc(
var(--text-display-24-line-height) +
var(--bp-tablet, 1) * (var(--text-display-36-line-height) - var(--text-display-24-line-height))
);
}
.rsr-heading,
.rsr-seo .seo__title {
font-size: calc(
var(--text-display-22-size) +
var(--bp-tablet, 1) * (var(--text-display-28-size) - var(--text-display-22-size))
);
line-height: calc(
var(--text-display-22-line-height) +
var(--bp-tablet, 1) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
);
}
[data-dragscroll] {
overflow-x: var(--scrollx-below-tablet, visible);
scrollbar-width: none;
-ms-overflow-style: none;
}
[data-dragscroll]::-webkit-scrollbar { display: none; }
[data-dragscroll].is-draggable { cursor: grab; }
[data-dragscroll].is-draggable:active { cursor: grabbing; }
.rsr-brc-scope { --bleed: var(--bleed-below-tablet); }
.rsr-brc { flex-wrap: nowrap; }
.rsr-tabs { --bleed: var(--bleed-below-tablet); }
.rsr-tabs .tabs__group { width: auto; }
.rsr-tabbar-slot { position: sticky; bottom: 0; z-index: 4; }
.rsr-tabbar { display: var(--below-tlandscape); }
/* ══ ПРОДАКШЕН: добавки экрана ══════════════════════════════════════════════
См. realmstatus.css: табы-ссылки и пустые состояния секций (нет данных о
фракциях, реалм не связан) — их в пакете дизайн-системы нет. */
a.rsr-tab { color: inherit; text-decoration: none; }
.rsr-empty { margin: 0; color: var(--color-gray-500); }