/* =====================================================================
MasterServer — panel-style site theme. Written from scratch.
All colors come from the theme tokens below; the palette widget
switches [data-theme] and everything recolors, same as the panel.
===================================================================== */
:root {
--ink: #2b3648; /* headings / dark pills */
--ink-2: #3b5268; /* secondary pill */
--text: #2b3648;
--muted: #55606f;
--dim: #8a93a3;
--page: #fbfcf9;
--card: #ffffff;
--line: #e8ecdf;
--radius: 16px;
--shadow-sm: 0 6px 16px rgba(43, 54, 72, 0.06);
--shadow-md: 0 16px 36px rgba(43, 54, 72, 0.10);
--pad: 64px;
/* green (default) */
--accent: #7a9757;
--accent-dark: #6a8747;
--accent-darker: #5a7737;
--tint: #f3f6ef;
--tint-border: #d6dece;
--tint-strong: #e2ecda;
}
[data-theme="violet"] { --accent: #8b6caa; --accent-dark: #7a5c98; --accent-darker: #694d86; --tint: #f4f1f8; --tint-border: #ddd6e6; --tint-strong: #e8e0f0; }
[data-theme="amber"] { --accent: #b58f3a; --accent-dark: #9d7c32; --accent-darker: #8a6c2b; --tint: #f8f4ea; --tint-border: #e6dcc6; --tint-strong: #f0e7d2; }
[data-theme="charcoal"] { --accent: #4a4e5a; --accent-dark: #3c404a; --accent-darker: #2f323a; --tint: #ececee; --tint-border: #d6d7db; --tint-strong: #dddee3; }
[data-theme="ocean"] { --accent: #2e7a8a; --accent-dark: #266a78; --accent-darker: #1f5a66; --tint: #ecf4f5; --tint-border: #cfe2e6; --tint-strong: #d4e8ec; }
[data-theme="cobalt"] { --accent: #2a6ab0; --accent-dark: #245c9a; --accent-darker: #1e4e84; --tint: #ecf1f8; --tint-border: #d0dcea; --tint-strong: #d4e2f0; }
[data-theme="wisteria"] { --accent: #684080; --accent-dark: #5a3870; --accent-darker: #4c3060; --tint: #f4eff7; --tint-border: #ddd2e6; --tint-strong: #e8ddef; }
[data-theme="espresso"] { --accent: #6a5238; --accent-dark: #5c4630; --accent-darker: #4e3a28; --tint: #f6f2ec; --tint-border: #e2d8ca; --tint-strong: #ece2d6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
margin: 0;
font-family: 'Nunito Sans', system-ui, sans-serif;
background:
radial-gradient(1000px 500px at 85% -100px, var(--tint) 0%, rgba(255,255,255,0) 60%),
radial-gradient(800px 400px at -100px 40%, var(--tint) 0%, rgba(255,255,255,0) 55%),
var(--page);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-darker); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); }
h1 { font-size: 46px; }
h2 { font-size: 30px; }
h3 { font-size: 19px; }
p { margin: 0; }
img { max-width: 100%; }
.lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 700px; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 26px; border-radius: 12px; font-weight: 800; font-size: 15px;
border: 0; cursor: pointer; font-family: inherit; transition: .15s; white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(43,54,72,0.12); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.btn-outline { background: var(--card); border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--tint); color: var(--ink); }
.btn-soft { background: var(--tint-strong); color: var(--accent-darker); }
.btn-soft:hover { background: var(--tint); color: var(--accent-darker); }
.btn-block { width: 100%; }
/* Pills (like panel price chips) */
.pill { flex: 1; min-width: 0; text-align: center; padding: 10px 8px; border-radius: 12px; font-size: 12px; line-height: 1.35; }
.pill b { display: block; font-size: 15px; }
.pill--dark { background: var(--ink); color: #fff; }
.pill--mid { background: var(--ink-2); color: #fff; }
.pill--good { background: var(--tint-strong); color: var(--accent-darker); border: 1px solid var(--tint-border); }
.pill--warn { background: #fdeeee; color: #b4494f; border: 1px solid #f3d3d5; }
/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.badge--accent { background: var(--tint-strong); color: var(--accent-darker); }
.badge--solid { background: var(--accent); color: #fff; }
.badge--hot { background: #fdeeee; color: #b4494f; }
/* Theme picker in the header */
.themepick { position: relative; }
.themepick__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--tint-border); background: var(--card); color: var(--muted); cursor: pointer; transition: border-color .15s ease; }
.themepick:hover .themepick__btn { border-color: var(--accent); }
.themepick__cur { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65); }
.themepick__list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 85; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s; }
.themepick:hover .themepick__list, .themepick:focus-within .themepick__list, .themepick.is-open .themepick__list { opacity: 1; visibility: visible; transform: none; }
.themepick__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--dot); border: 2px solid #fff; outline: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; transition: transform .12s; }
.themepick__dot:hover { transform: scale(1.18); }
.themepick__dot.is-active { outline: 2px solid var(--dot); outline-offset: 2px; }
/* Nav */
.nav {
position: sticky; top: 0; z-index: 80;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 11px var(--pad); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand__mark {
width: 40px; height: 40px; border-radius: 13px; color: #fff; flex-shrink: 0;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-darker) 100%);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__text b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.brand__text small { font-size: 10.5px; color: var(--dim); }
.nav-links { display: flex; gap: 3px; margin: 0 auto; background: var(--tint); border: 1px solid var(--tint-border); border-radius: 999px; padding: 4px; }
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.nav-item > a:hover { color: var(--ink); }
.nav-item > a.is-active { background: var(--card); color: var(--accent-darker); box-shadow: 0 2px 8px rgba(43,54,72,.10); }
.nav-item .chev { width: 11px; height: 11px; color: var(--dim); transition: transform .2s ease; margin-top: 1px; }
.nav-item:hover .chev { transform: rotate(180deg); color: var(--accent-dark); }
.nav-item { position: relative; }
/* mobile-sheet chrome: hidden until the phone breakpoint */
.nav-sheet__top, .nav-item__toggle, .nav-scrim { display: none; }
.nav-shelf {
position: absolute; top: calc(100% + 10px); left: 0; z-index: 95; min-width: 262px;
display: flex; flex-direction: column; gap: 2px; padding: 8px;
background: var(--card); border: 1px solid var(--tint-border); border-radius: 16px; box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left;
transition: opacity .22s cubic-bezier(.2,.8,.3,1), transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
}
.nav-shelf::before { content: ''; position: absolute; top: -11px; left: 0; right: 0; height: 12px; }
.nav-item:hover .nav-shelf, .nav-item:focus-within .nav-shelf { opacity: 1; visibility: visible; transform: none; }
.nav-item.has-sub > a { cursor: pointer; }
.nav-shelf__col { display: flex; flex-direction: column; gap: 2px; }
.nav-shelf__head { padding: 9px 12px 3px; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--dim); }
.nav-shelf__col + .nav-shelf__col .nav-shelf__head { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px; }
.nav-shelf__col a { display: flex; gap: 9px; align-items: center; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; transition: background .12s ease, color .12s ease; }
.nav-shelf__col a:hover { background: var(--tint); color: var(--accent-darker); }
.nav-shelf__col a.is-active { background: var(--tint-strong); color: var(--accent-darker); }
.nav-shelf__note { display: none; }
.nav-sub__flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(43,54,72,.12); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.nav-actions .btn-primary { height: 40px; display: inline-flex; align-items: center; border-radius: 12px; padding: 0 20px; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-dark) 100%); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.nav-actions .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lang { position: relative; }
.lang__cur { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--tint-border); background: var(--card); font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; transition: border-color .15s ease; }
.lang__cur:hover { border-color: var(--accent); }
.lang__list {
position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; gap: 2px;
padding: 5px; background: var(--card); border: 1px solid var(--tint-border); border-radius: 12px; box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 85;
}
.lang::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.lang:hover .lang__list, .lang:focus-within .lang__list { opacity: 1; visibility: visible; transform: none; }
.lang__list a { padding: 8px 6px; border-radius: 8px; font-size: 13px; font-weight: 800; text-align: center; color: var(--muted); transition: background .12s ease, color .12s ease; }
.lang__list a:hover { color: var(--accent-darker); }
.lang__list a:hover { background: var(--tint); }
.burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
/* Surfaces: every block of content lives on a card, nothing floats on the page background */
.surface { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 34px; }
.surface--tint { background: linear-gradient(160deg, var(--tint) 0%, #ffffff 90%); border-color: var(--tint-border); }
.surface .section-head { margin-bottom: 22px; }
.surface .feature { box-shadow: none; }
.surface--tint .feature { background: #ffffff; }
.surface .card { box-shadow: none; }
/* Sections */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-darker); }
.eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--accent); }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 26px; }
.section-head .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; width: 100%; flex-wrap: wrap; }
.section-sub { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 760px; }
/* Full-width tinted band */
/* Trust strip */
.truststrip { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px var(--pad) 0; padding: 15px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.truststrip span { font-weight: 800; font-size: 15px; letter-spacing: 1.5px; color: var(--dim); }
/* Big widget shell */
.widget-shell { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.widget-shell .filter-block { padding: 0; }
.widget-head {
border-radius: 21px 21px 0 0; /* shell corners (no overflow:hidden — it breaks the sticky sidebar) */
display: flex; justify-content: space-between; align-items: flex-end; gap: 72px;
padding: 28px 30px 24px; border-bottom: 1px solid var(--tint-border);
background: linear-gradient(135deg, var(--tint) 0%, rgba(255,255,255,0) 70%);
}
.widget-head__text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.widget-head .section-sub { margin: 0; max-width: none; }
.widget-head .btn { flex-shrink: 0; }
.widget-head__quick { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.quick-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.quick-chip {
display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
border: 1px solid var(--tint-border); border-radius: 10px; background: var(--card);
color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.quick-chip svg { width: 15px; height: 15px; color: var(--accent); }
.quick-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.quick-chip.is-active { background: var(--tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.quick-more { align-self: flex-end; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.quick-more:hover { text-decoration: underline; }
.widget-body { padding: 26px 30px 30px; }
/* OS chips */
/* Payment cards */
.paycards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.section { padding: 26px var(--pad) 0; }
.section:first-of-type { padding-top: 26px; }
.section:last-of-type { padding-bottom: 88px; }
.section-head .more { font-weight: 800; font-size: 14px; }
.page-head { padding: 52px var(--pad) 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.page-head h1 { font-size: 42px; }
.crumbs { font-size: 13px; color: var(--dim); margin-bottom: 10px; }
.crumbs a { color: var(--dim); }
/* Cards */
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; gap: 12px;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--tint-border); box-shadow: var(--shadow-md); }
.card--featured { border: 2px solid var(--accent); box-shadow: 0 16px 36px rgba(43,54,72,0.12); }
/* Hero */
.hero-wrap { padding: 26px var(--pad) 0; }
.hero {
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
background-color: var(--card);
background-image:
linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px);
background-size: 48px 48px;
border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm);
padding: 44px 48px; position: relative; overflow: hidden;
}
.hero::before { content: ''; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, var(--tint-strong), rgba(255,255,255,0)); pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { font-size: 48px; line-height: 1.25; }
.hero .accent-chip { display: inline-block; max-width: 100%; background: var(--accent); color: #fff; padding: 0 16px 4px; border-radius: 16px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 420px) { .hero .accent-chip { white-space: normal; padding: 2px 12px 5px; } }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-badge { display: inline-flex; width: fit-content; padding: 8px 16px; border-radius: 999px; background: linear-gradient(90deg, var(--tint-strong), var(--tint)); border: 1px solid var(--tint-border); font-size: 13px; font-weight: 800; color: var(--accent-darker); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 10px; padding-top: 6px; flex-wrap: wrap; }
.hero-stats > div { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--tint); border: 1px solid var(--tint-border); }
.hero-stats b { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.hero-stats span { font-size: 12.5px; color: var(--muted); }
/* Terminal (hero right) */
.terminal {
background: var(--ink); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-md);
font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.85;
color: #b8c2d0; overflow-x: auto;
}
.terminal-bar { display: flex; gap: 7px; margin-bottom: 14px; }
.terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.terminal-body div { white-space: nowrap; }
.terminal-body .line-hidden { visibility: hidden; }
.terminal .acc { color: var(--tint-strong); }
.terminal .ok { color: #9cc47a; }
.terminal .cursor { display: inline-block; width: 8px; height: 15px; background: #9cc47a; vertical-align: middle; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Panel mock (hero right) */
.panelmock { border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; }
.panelmock__bar { padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.panelmock__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.uname { background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 8px; font-weight: 800; }
/* Service tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile {
display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius);
background: linear-gradient(135deg, var(--tint), #ffffff); border: 1px solid var(--tint-border);
color: var(--ink); transition: .15s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); }
.tile svg { color: var(--accent); flex-shrink: 0; }
.tile b { font-size: 16px; }
.tile .arr { margin-left: auto; color: var(--accent); font-weight: 800; opacity: 0; transform: translateX(-4px); transition: .15s; }
.tile:hover .arr { opacity: 1; transform: none; }
.tile span { display: block; font-size: 13px; color: var(--dim); }
/* Server cards grid */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card .specs { font-size: 14px; color: var(--muted); line-height: 1.6; }
.card .flag { width: 26px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); vertical-align: -3px; margin-right: 8px; }
.card h3 { display: flex; align-items: center; }
.card .pills { display: flex; gap: 8px; margin-top: auto; }
/* Features */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); transition: .15s; }
.feature:hover { border-color: var(--tint-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
a.feature { color: inherit; }
a.feature h3 { display: flex; justify-content: space-between; gap: 10px; }
a.feature h3::after { content: '→'; color: var(--accent); }
.feature .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--tint-strong); color: var(--accent-darker); display: flex; align-items: center; justify-content: center; }
.feature p { font-size: 14px; line-height: 1.55; color: var(--muted); }
/* Dark CTA band */
.cta-band { margin: 26px var(--pad) 0; border-radius: 20px; background: var(--ink); color: #fff; padding: 38px 44px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.cta-band .panelmock { box-shadow: 0 24px 48px rgba(0,0,0,0.35); }
.cta-band .actions { justify-content: flex-start; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b8c2d0; font-size: 15px; line-height: 1.6; max-width: 560px; }
.cta-band .actions { display: flex; gap: 10px; }
.cta-band .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* Long SEO text */
.prose { max-width: 860px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.prose h2, .prose h3 { color: var(--ink); margin: 26px 0 10px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { font-weight: 700; }
/* FAQ */
.faq { columns: 2 420px; column-gap: 14px; counter-reset: faqn; }
.faq-item {
break-inside: avoid; margin-bottom: 14px; overflow: hidden;
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover { border-color: var(--tint-border); box-shadow: var(--shadow-sm); }
.faq-item[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-item summary {
list-style: none; cursor: pointer; position: relative;
display: flex; align-items: center; gap: 13px;
padding: 14px 52px 14px 14px; font-weight: 800; font-size: 15px; line-height: 1.35; color: var(--ink);
counter-increment: faqn; transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
content: counter(faqn, decimal-leading-zero); flex-shrink: 0;
width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
background: var(--tint); border: 1px solid var(--tint-border); color: var(--accent-darker);
font-size: 12px; font-weight: 800; letter-spacing: .5px; transition: background .2s ease, color .2s ease;
}
.faq-item[open] summary::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.faq-item summary::after {
content: '+'; position: absolute; right: 16px; top: 50%; margin-top: -11px;
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
font-size: 17px; font-weight: 600; color: var(--dim); transition: transform .25s ease, color .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent-dark); }
.faq-item[open] summary { color: var(--accent-darker); }
.faq-body { padding: 0 16px 16px 61px; font-size: 14px; line-height: 1.6; color: var(--muted); animation: faqIn .25s ease; }
.faq-body a.link { color: var(--accent-darker); text-decoration: underline; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .faq { columns: 1; } }
/* Promo ribbon (right side, real discounts from the DB) */
.promo-ribbon { position: fixed; left: 0; top: 42%; z-index: 89; display: flex; flex-direction: row-reverse; align-items: flex-start; }
.promo-ribbon__tab {
writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: 8px; padding: 14px 9px;
background: linear-gradient(180deg, #d98a3a, #c67a2e); color: #fff; border: 0; border-radius: 0 12px 12px 0;
font-family: inherit; font-weight: 800; font-size: 12.5px; letter-spacing: 1.5px; cursor: pointer;
box-shadow: 4px 6px 18px rgba(43,54,72,0.18);
}
.promo-ribbon__tab svg { transform: rotate(90deg); }
.promo-ribbon__card {
position: absolute; left: 44px; top: 0; width: 328px; max-width: calc(100vw - 70px); padding: 16px;
background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md);
display: flex; flex-direction: column; gap: 10px;
opacity: 0; visibility: hidden; transform: translateX(-16px);
transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.promo-ribbon__card.is-open { opacity: 1; visibility: visible; transform: none; }
.promo-ribbon__head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink); }
.promo-ribbon__close { background: none; border: 0; cursor: pointer; color: var(--dim); font-size: 14px; padding: 2px 6px; }
.promo-ribbon__nav { display: flex; gap: 4px; }
.promo-ribbon__navbtn { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); font-family: inherit; font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; }
.promo-ribbon__navbtn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.promo-slide { display: none; flex-direction: column; gap: 8px; }
.promo-slide.is-active { display: flex; }
.promo-slide__kind { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-darker); }
.promo-slide__name { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.promo-slide__sub { font-size: 12.5px; color: var(--dim); }
.promo-slide__price { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 10px; background: var(--ink); color: #fff; white-space: nowrap; height: 40px; align-items: center; }
.promo-slide__price s { font-size: 11px; color: rgba(255,255,255,0.55); }
.promo-slide__price b { font-size: 17px; }
.promo-slide__price span { font-size: 11px; color: rgba(255,255,255,0.65); }
.promo-specs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.promo-spec { display: flex; gap: 12px; padding: 7px 12px; font-size: 12.5px; border-top: 1px solid var(--line); background: var(--card); }
.promo-spec:first-child { border-top: 0; }
.promo-spec:nth-child(odd) { background: var(--tint); }
.promo-spec span { width: 38px; flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--dim); align-self: center; }
.promo-spec b { font-weight: 700; color: var(--ink); line-height: 1.3; }
.promo-slide__foot { display: flex; gap: 8px; align-items: stretch; height: 40px; }
.promo-slide__foot .btn { flex-shrink: 0; padding: 0 16px; font-size: 13.5px; }
/* Footer */
/* ===== Footer: dark premium ===== */
.footer {
position: relative; margin-top: 64px; color: rgba(255,255,255,.72);
background:
radial-gradient(900px 420px at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
var(--ink);
}
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-darker) 55%, transparent); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 54px var(--pad) 40px; }
.footer-grid--wide { grid-template-columns: 1.3fr 0.8fr 1fr 1.1fr 1.2fr; gap: 34px; }
.footer-contact { display: flex; flex-direction: column; gap: 1px; }
.footer-contact .dim { font-size: 10.5px; color: rgba(255,255,255,.42); letter-spacing: .6px; text-transform: uppercase; font-weight: 700; }
.footer-contact { color: rgba(255,255,255,.85) !important; }
.footer-contact:hover { color: #fff !important; }
.paychips { display: flex; flex-wrap: wrap; gap: 6px; }
.paychips span { padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 800; color: rgba(255,255,255,.7); letter-spacing: 0.5px; }
.footer-brand p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 300px; margin-top: 14px; }
.footer-brand .footer-title { color: rgba(255,255,255,.42); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-title { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, #fff); margin-bottom: 6px; }
.footer-col a { position: relative; width: max-content; max-width: 100%; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.72); transition: color .15s ease, transform .2s ease; }
.footer-col a:hover { color: #fff; transform: translateX(4px); }
.footer-col a:hover::before { content: ''; position: absolute; left: -12px; top: 50%; width: 6px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); }
.footer-bottom {
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
padding: 18px var(--pad); border-top: 1px solid rgba(255,255,255,.09);
font-size: 12px; color: rgba(255,255,255,.42);
}
/* Responsive */
@media (max-width: 1180px) {
.paycards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root { --pad: 32px; }
.hero { grid-template-columns: minmax(0, 1fr); }
.hero > * { min-width: 0; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid, .footer-grid--wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
/* the side promo ribbon is desktop-only */
.promo-ribbon { display: none !important; }
/* page heads stack: the side link must not squeeze the breadcrumbs */
.page-head { flex-direction: column; align-items: flex-start; gap: 14px; }
.page-head .quick-more, .page-head .btn { align-self: flex-start; }
.paycards { grid-template-columns: 1fr; }
.widget-body { padding: 14px; }
.widget-head { flex-direction: column; align-items: flex-start; padding: 18px 16px; }
.widget-head__quick { align-items: flex-start; }
.quick-chips { justify-content: flex-start; }
.quick-more { align-self: flex-start; }
.truststrip { display: none; }
:root { --pad: 18px; }
h1, .hero h1, .page-head h1 { font-size: 32px; }
h2 { font-size: 24px; }
.nav { padding: 8px 12px; }
.brand__text small { display: none; }
.nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; background: var(--card); border: 1px solid var(--tint-border); border-radius: 18px; box-shadow: var(--shadow-md); padding: 10px; }
/* Mobile navigation sheet */
.nav-links {
display: flex; position: fixed; inset: 0 0 0 auto; top: 0; left: auto; right: 0;
width: min(360px, 88vw); max-width: none; height: 100dvh; z-index: 120;
flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain;
background: var(--card); border: 0; border-radius: 0; box-shadow: -18px 0 44px rgba(43,54,72,.22);
padding: 0 0 24px; transform: translateX(102%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.nav-links.open { display: flex; transform: none; }
.nav-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(28,36,48,.42); backdrop-filter: blur(2px); }
body.nav-open { overflow: hidden; }
.nav-sheet__top {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px; border-bottom: 1px solid var(--tint-border);
position: sticky; top: 0; background: var(--card); z-index: 2;
}
.nav-sheet__title { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); }
.nav-sheet__close {
display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border: 0; border-radius: 12px; background: var(--tint); color: var(--ink); cursor: pointer;
}
.nav-sheet__close:active { background: var(--tint-strong); }
.nav-links .nav-item { position: relative; border-bottom: 1px solid var(--tint-border); }
.nav-links .nav-item > a {
display: flex; align-items: center; min-height: 54px; padding: 0 56px 0 18px;
font-size: 16px; font-weight: 700; color: var(--ink); border-radius: 0; background: none;
}
.nav-links .nav-item > a.is-active { background: var(--tint); color: var(--accent-darker); }
.nav-links .nav-item > a .chev { display: none; }
.nav-item__toggle {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 7px; right: 10px; width: 40px; height: 40px;
border: 0; border-radius: 12px; background: var(--tint); color: var(--muted); cursor: pointer;
transition: transform .22s ease, background .18s ease;
}
.nav-item.is-expanded .nav-item__toggle { transform: rotate(180deg); background: var(--accent); color: #fff; }
.nav-shelf {
position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; border-radius: 0; background: var(--tint);
display: block; overflow: hidden; max-height: 0; padding: 0 0 0 18px;
transition: max-height .28s ease, padding .2s ease;
}
.nav-item.is-expanded .nav-shelf { max-height: 620px; padding: 4px 18px 10px 18px; }
.nav-shelf__col { display: block; }
.nav-shelf__col + .nav-shelf__col { margin-top: 4px; border-top: 1px solid var(--tint-border); padding-top: 4px; }
.nav-shelf__head { font-size: 10.5px; letter-spacing: 1px; padding: 8px 0 2px; }
.nav-shelf a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0; font-size: 15px; }
.burger { display: flex; }
.tiles, .cards, .features { grid-template-columns: 1fr; }
.cta-band { grid-template-columns: 1fr; }
.palette { flex-direction: row; top: auto; bottom: 12px; left: 12px; transform: none; border-radius: 999px; }
.palette .palette__dot { margin: 0 4px; }
}
/* ===== Server catalog (list + compare) ===== */
.pick-surface { padding: 0; overflow: hidden; border-color: var(--tint-border); box-shadow: var(--shadow-md); }
.pick-filters { margin: 0; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { cursor: pointer; }
.pchip input { display: none; }
.pchip span {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
border: 1px solid transparent; border-radius: 10px; background: var(--tint);
font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink);
transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.pchip span img { width: 21px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(43,54,72,.18); }
.pchip input:checked + span img { box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.bmono {
display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
border-radius: 6px; background: var(--card); color: var(--accent-darker);
font-size: 11px; font-weight: 800; font-style: normal; box-shadow: 0 1px 3px rgba(43,54,72,.12);
}
.pchip input:checked + span .bmono { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.pchip:hover span { background: var(--tint-strong); transform: translateY(-1px); }
.pchip input:checked + span { background: var(--accent); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.pick { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px; background: var(--tint); }
.pick-row {
display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; gap: 18px; align-items: center;
padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 1px 4px rgba(43,54,72,.05);
transition: border-color .2s ease, box-shadow .2s ease;
}
.pick-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pick-logo { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.pick-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pick-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pick-title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick-spec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 22px; font-size: 13.5px; color: var(--muted); }
.pick-spec .ps { position: relative; white-space: nowrap; }
.pick-spec .ps + .ps::before { content: ''; position: absolute; left: -13px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--tint-border); }
.pick-type { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1; padding: 6px 9px 4px; border-radius: 999px; }
.pick-type--instant { color: var(--accent-darker); background: var(--tint); }
.pick-type--custom { color: #245c9a; background: #ecf1f8; }
.pick-type--gpu { color: #9d7c32; background: #f8f4ea; }
.pick-type--virtual { color: #266a78; background: #ecf4f5; }
.pick-type--dedicated { color: var(--dim); background: var(--tint); }
.pick-right { display: flex; align-items: center; gap: 16px; }
.pick-right .btn { min-width: 132px; justify-content: center; text-align: center; }
.pick-flags { display: inline-flex; gap: 5px; }
.pick-flags img { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.pick-badge { font-size: 12px; font-weight: 700; color: #b26a00; background: #fdf1dd; border-radius: 999px; padding: 3px 9px; }
.pick-price { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.pick-price small { font-size: 12px; font-weight: 600; color: var(--dim); margin-left: 1px; }
.pick-compare { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pick-compare input { display: none; }
.pick-compare span { width: 20px; height: 20px; border: 1px solid var(--tint-border); border-radius: 6px; background: var(--card); transition: border-color .2s ease, background .2s ease; display: block; }
.pick-compare:hover span { border-color: var(--accent); }
.pick-compare input:checked + span { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--card); }
.pick-compare input:disabled + span { opacity: .35; cursor: not-allowed; }
.compare-bar {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); z-index: 90;
display: flex; align-items: center; gap: 16px; padding: 12px 18px;
background: var(--card); border: 1px solid var(--accent); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.14);
font-size: 14px; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.compare-bar.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.compare-clear { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.compare-clear:hover { color: var(--ink); }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; background: var(--card); }
.compare-table th, .compare-table td { padding: 12px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table thead th { vertical-align: bottom; border-bottom: 2px solid var(--tint-border); }
.compare-table tbody th { font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: .8px; text-transform: uppercase; width: 180px; }
.compare-table td { font-weight: 500; }
.compare-table tr.is-same td { color: var(--dim); font-weight: 400; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.compare-name { font-weight: 700; font-size: 15px; }
.compare-price { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.compare-price small { font-size: 12px; font-weight: 600; color: var(--dim); }
.compare-remove { font-size: 12px; }
.compare-remove:hover { color: #b3261e; }
.compare-note { font-size: 12.5px; margin-top: 12px; }
@media (max-width: 860px) {
.pick { padding: 12px; }
.pick-panel { padding: 12px; }
.pick-filter { flex-direction: column; gap: 8px; }
.pick-filter__title { width: auto; padding-top: 0; }
.pick-row { grid-template-columns: 22px 44px minmax(0, 1fr); }
.pick-right { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 620px) {
/* logo left, all the text beside it, actions across the full width below */
.pick-row { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px 14px 16px; align-items: start; }
.pick-compare { position: absolute; top: 14px; right: 14px; }
/* logo sits in the corner; only the title clears it, the rest starts at the edge */
.pick-logo { position: absolute; top: 14px; left: 14px; width: 42px; height: 42px; padding: 5px; }
.pick-main { grid-column: 1 / -1; }
.pick-title { font-size: 15.5px; gap: 8px; min-height: 42px; padding: 0 34px 0 54px; margin-bottom: 8px; }
/* one spec per line, each with its own bullet */
.pick-spec { display: grid; gap: 3px; font-size: 13px; line-height: 1.5; }
.pick-spec .ps { position: relative; white-space: normal; padding-left: 15px; }
.pick-spec .ps::before, .pick-spec .ps + .ps::before {
display: block; content: ''; position: absolute; left: 2px; top: .58em;
width: 5px; height: 5px; margin: 0; border-radius: 50%; background: var(--accent); opacity: .5;
}
.pick-maxes { gap: 5px; margin-top: 2px; }
.pmax { font-size: 11px; padding: 3px 9px; }
/* flags on their own line, then price and button side by side */
.pick-right { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; margin-top: 6px; }
.pick-right .pick-flags { grid-row: 1; grid-column: 1 / -1; }
.pick-right .pick-price { grid-row: 2; grid-column: 1; justify-self: start; font-size: 22px; }
.pick-right .btn { grid-row: 2; grid-column: 2; width: 100%; min-height: 48px; }
/* the discount rides on the button's top-right corner instead of floating on its own line */
.pick-right .pick-badge {
grid-row: 2; grid-column: 2; align-self: start; justify-self: end;
position: relative; z-index: 2; margin: -9px -6px 0 0;
font-size: 11.5px; box-shadow: 0 2px 6px rgba(43,54,72,.18); border: 1.5px solid var(--card);
}
}
/* Footer headings are plain labels on desktop, accordion triggers on phones */
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-title--acc { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; }
.footer-title--acc .footer-chev { display: none; }
.footer-logo { display: block; width: 158px; height: auto; }
/* Cookie consent bar */
.cookiebar {
position: fixed; left: 20px; bottom: 20px; z-index: 96; max-width: 440px;
display: flex; align-items: center; gap: 12px; padding: 14px 16px;
background: var(--card); border: 1px solid var(--tint-border); border-radius: 16px; box-shadow: var(--shadow-md);
opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
.cookiebar.is-on { opacity: 1; transform: none; }
.cookiebar svg { width: 30px; height: 30px; color: var(--accent-dark); flex-shrink: 0; }
.cookiebar p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cookiebar a { color: var(--accent-darker); text-decoration: underline; }
.cookiebar .btn { flex-shrink: 0; padding: 9px 16px; font-size: 13px; }
@media (max-width: 720px) { .cookiebar { left: 10px; right: 10px; max-width: none; flex-wrap: wrap; } }
/* About section: story timeline + side card */
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: start; }
.about-story { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 6px 0; }
.about-story::before { content: ''; position: absolute; left: 21px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, var(--tint-border), var(--accent), var(--tint-border)); border-radius: 2px; opacity: .6; }
.about-step { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.about-step__ico {
position: relative; z-index: 1; flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: 0 3px 8px rgba(43,54,72,.07);
display: flex; align-items: center; justify-content: center; color: var(--accent-dark);
}
.about-step__ico svg { width: 20px; height: 20px; }
.about-step p { margin: 0; padding-top: 2px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.about-side { background: var(--tint); border: 1px solid var(--tint-border); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.about-side__item { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--tint-border); }
.about-side__ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--accent-dark); box-shadow: 0 2px 6px rgba(43,54,72,.07); }
.about-side__ico svg { width: 20px; height: 20px; }
.about-side__item h3 { margin: 2px 0 5px; font-size: 15.5px; }
.about-side__item p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.btn-block { width: 100%; justify-content: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
/* Advantages: horizontal cards with gradient icon tiles */
.features--adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.features--adv .feature {
display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto 1fr;
column-gap: 15px; row-gap: 2px; align-items: start;
background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
box-shadow: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.features--adv .feature .ico { grid-row: 1 / span 2; }
.features--adv .feature h3 { grid-column: 2; }
.features--adv .feature p { grid-column: 2; }
.features--adv .feature:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.features--adv .feature .ico {
flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; margin: 0;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-darker) 100%); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.features--adv .feature .ico svg { width: 21px; height: 21px; }
.features--adv .feature h3 { margin: 1px 0 6px; font-size: 15.5px; line-height: 1.3; }
.features--adv .feature p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1100px) { .features--adv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .features--adv { grid-template-columns: 1fr; } }
/* Rent types: 2x2 cards with gradient icon + arrow */
.renttypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.renttype {
display: flex; gap: 15px; align-items: flex-start; padding: 18px;
background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--text);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.renttype:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text); }
.renttype__ico {
flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-darker) 100%); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.renttype__ico svg { width: 21px; height: 21px; }
.renttype__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.renttype__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: var(--ink); }
.renttype__arrow { width: 15px; height: 15px; color: var(--accent-dark); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.renttype:hover .renttype__arrow { opacity: 1; transform: none; }
.renttype__text { font-size: 13px; line-height: 1.55; color: var(--muted); }
@media (max-width: 860px) { .renttypes { grid-template-columns: 1fr; } }
/* OS: big cards */
.oscards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.oscard {
display: flex; gap: 13px; align-items: flex-start; padding: 17px 18px;
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.oscard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43,54,72,.08); }
.oscard__ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); border: 1px solid var(--tint-border); display: flex; align-items: center; justify-content: center; color: var(--accent-dark); }
.oscard__ico svg { width: 18px; height: 18px; }
.oscard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.oscard__body b { font-size: 15px; color: var(--ink); line-height: 1.25; }
.oscard__body span { font-size: 12px; color: var(--dim); }
/* Payment methods: horizontal cards with gradient icon tiles */
.paycard {
display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px;
background: var(--card); border: 1px solid var(--line); border-radius: 16px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.paycard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.paycard__ico {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-darker) 100%); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.paycard__ico svg { width: 20px; height: 20px; }
.paycard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.paycard__body b { font-size: 14.5px; color: var(--ink); line-height: 1.25; }
.paycard__body span { font-size: 12.5px; color: var(--dim); line-height: 1.4; }
/* CTA band: checklist + live panel demo */
.cta-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.cta-checks li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255,255,255,.85); }
.cta-checks svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.pm-user .uname { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--tint-strong); color: var(--accent-darker); font-weight: 800; font-size: 12.5px; }
.pm-balance { color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-srv { background: var(--page); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.pm-srv:hover { border-color: var(--tint-border); box-shadow: var(--shadow-sm); }
.pm-srv__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.pm-srv__head b { color: var(--ink); }
.pm-srv__row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.pm-srv__row .pill b { transition: color .3s ease; }
#pmDays.pill--warn b { animation: pmpulse 1.2s ease infinite; }
@keyframes pmpulse { 50% { opacity: .45; } }
.pm-flip { animation: pmflip .45s ease; }
@keyframes pmflip { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.pm-toast {
display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto;
max-width: max-content; padding: 8px 16px; border-radius: 999px;
background: var(--tint-strong); color: var(--accent-darker); font-size: 13px; font-weight: 800;
opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.pm-toast.is-on { opacity: 1; transform: none; }
.pm-toast svg { width: 14px; height: 14px; }
@media (max-width: 720px) { .cta-checks { grid-template-columns: 1fr; } }
/* Panel demo v2 — mimics the real client panel */
.pm-balwrap { display: inline-flex; align-items: center; gap: 8px; }
.pm-topup { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.pm-srv__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pm-ok { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.pm-ok svg { width: 13px; height: 13px; }
.pm-icobtn { width: 30px; height: 30px; border: 1px solid var(--tint-border); border-radius: 9px; color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.pm-ok + .pm-icobtn { margin-left: auto; }
.pm-icobtn svg { width: 15px; height: 15px; }
.pm-srv__name { padding: 10px 14px; border-radius: 11px; background: var(--tint); border: 1px solid var(--tint-border); font-weight: 800; font-size: 13.5px; color: var(--ink); margin-bottom: 10px; }
.pm-pill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 96px; padding: 7px 13px; border-radius: 12px; }
.pm-pill span { font-size: 10.5px; opacity: .75; }
.pm-pill b { font-size: 13.5px; line-height: 1.2; white-space: nowrap; }
.pm-pill b i { font-style: normal; font-weight: 600; opacity: .55; font-size: 12px; }
.pm-pill--dark { background: var(--ink); color: #fff; }
.pm-pill--mid { background: var(--ink-2); color: #fff; }
.pm-pill--warn { background: #fdeceb; color: #b3261e; border: 1px solid #f2c4c0; }
.pm-pill--good { background: var(--tint); color: var(--accent-darker); border: 1px solid var(--tint-border); }
.pm-srv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.pm-ip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 11.5px; }
.pm-ip b { font-weight: 700; color: var(--ink); }
.pm-srv__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.pm-srv__foot b { color: var(--ink); }
#pmDays.pm-pill--warn b { animation: pmpulse 1.2s ease infinite; }
/* demo kebab menu */
.pm-icobtn { position: relative; transition: background .2s ease, transform .15s ease; }
.pm-icobtn.is-press { transform: scale(.9); background: var(--tint); }
.pm-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 195px;
display: flex; flex-direction: column; gap: 2px; padding: 6px;
background: var(--card); border: 1px solid var(--tint-border); border-radius: 12px; box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.pm-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.pm-menu__item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; transition: background .15s ease; }
.pm-menu__item svg { width: 14px; height: 14px; color: var(--accent-dark); flex-shrink: 0; }
.pm-menu__item--danger { color: #b3261e; border-top: 1px solid var(--line); margin-top: 3px; padding-top: 10px; }
.pm-menu__item--danger svg { color: #b3261e; }
.pm-menu__item.is-hl { background: var(--tint-strong); color: var(--accent-darker); }
.pm-menu__item.is-press { transform: scale(.97); background: var(--tint-strong); }
/* demo: server name is a select-like bar, click reveals the configuration */
.pm-srv__name { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; transition: border-color .2s ease; }
.pm-srv__name:hover { border-color: var(--accent); }
.pm-srv__chev { width: 12px; height: 12px; color: var(--dim); flex-shrink: 0; transition: transform .25s ease; }
.pm-srv__name.is-open { border-radius: 11px 11px 0 0; border-color: var(--accent); }
.pm-srv__name.is-open .pm-srv__chev { transform: rotate(180deg); color: var(--accent-dark); }
.pm-conf {
overflow: hidden; max-height: 0; opacity: 0;
border: 1px solid transparent; border-top: 0; border-radius: 0 0 11px 11px; background: var(--card);
transition: max-height .3s ease, opacity .3s ease, border-color .3s ease, margin-bottom .3s ease;
margin-bottom: 0;
}
.pm-srv__name.is-open + .pm-conf { max-height: 240px; opacity: 1; border-color: var(--accent); margin-bottom: 10px; }
.pm-srv__name.is-open { margin-bottom: 0; }
.pm-conf > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; font-size: 12px; border-top: 1px solid var(--line); }
.pm-conf > div:first-child { border-top: 0; }
.pm-conf span { color: var(--dim); font-weight: 800; font-size: 10px; letter-spacing: 1px; padding-top: 2px; }
.pm-conf b { color: var(--ink); font-weight: 600; text-align: right; }
/* demo: typing note */
.pm-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); min-width: 0; }
.pm-note svg { width: 13px; height: 13px; color: var(--dim); flex-shrink: 0; }
#pmNoteText { white-space: nowrap; overflow: hidden; }
#pmNoteText::after { content: ''; display: inline-block; width: 1.5px; height: 12px; background: var(--accent-dark); margin-left: 2px; vertical-align: -2px; animation: pmcaret 1s steps(2) infinite; }
@keyframes pmcaret { 50% { opacity: 0; } }
.paychips__br { flex-basis: 100%; height: 0; }
/* ===== Blog ===== */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.blog-card {
display: flex; flex-direction: column; gap: 9px; padding: 22px;
background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--text);
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text); }
.blog-card__date { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); }
.blog-card h3 { margin: 0; font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.blog-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); flex: 1; }
.blog-card__more { font-size: 13px; font-weight: 800; color: var(--accent-dark); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.blog-article { max-width: none; }
.blog-article img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-article pre { overflow-x: auto; background: var(--ink); color: #e8ecdf; padding: 16px 18px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.blog-article code { background: var(--tint); border-radius: 5px; padding: 1px 6px; font-size: 0.92em; }
.blog-article pre code { background: none; padding: 0; }
.blog-article h2, .blog-article h3 { margin: 26px 0 10px; }
.blog-article p, .blog-article li { line-height: 1.7; color: var(--muted); }
.blog-article a { color: var(--accent-darker); text-decoration: underline; }
.blog-article table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.blog-article th, .blog-article td { border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; text-align: left; }
.blog-aside { position: sticky; top: 84px; background: var(--tint); border: 1px solid var(--tint-border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.blog-aside__title { font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--accent-darker); margin-bottom: 6px; }
.blog-aside__item { padding: 8px 10px; margin: 0 -10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.blog-aside__item:hover { background: var(--card); color: var(--accent-darker); }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-layout { grid-template-columns: 1fr; } .blog-aside { position: static; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
/* catalog: filter panel (matches the home sidebar look) */
.pick-panel { background: var(--tint); border: 0; border-bottom: 1px solid var(--tint-border); border-radius: 0; padding: 14px 18px 14px; }
.pick-panel__head { display: flex; align-items: center; gap: 14px; padding: 6px 8px 10px; }
.pick-panel__title { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-darker); }
.pick-panel__count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.pick-panel__count b { color: var(--accent-darker); font-variant-numeric: tabular-nums; }
.pick-panel__reset { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--dim); cursor: pointer; transition: color .15s; }
.pick-panel__reset:hover { color: var(--accent-dark); text-decoration: underline; }
.pick-panel__grid { display: flex; flex-direction: column; gap: 8px; }
.pick-panel__row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-panel__row--sliders { display: flex; }
.pick-card--slider { flex: 1 1 0; min-width: 0; }
.pick-card--slider:first-child { flex: 0 0 auto; transition: width .35s ease; }
.pick-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pick-card__title { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.pick-panel__row:not(.pick-panel__row--sliders) .pick-card:nth-child(1) { flex: 0 0 auto; }
.pick-panel__row:not(.pick-panel__row--sliders) .pick-card:nth-child(2) { flex: 1 1 380px; min-width: 0; }
.pick-card--slider .pick-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pick-card--slider .pick-slider__head b { font-size: 12px; font-weight: 700; color: var(--accent-darker); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-card--slider .pick-slider__head .pick-card__title { margin-bottom: 0; }
.pick-card--slider .noUi-target { background: var(--tint-strong); margin: 13px 8px 3px; }
.pick-card--slider .noUi-handle { width: 15px; height: 15px; top: -5px; right: -8px; border-width: 2px; }
@media (max-width: 900px) {
.pick-panel__row, .pick-panel__row--sliders { flex-direction: column; }
.pick-card--slider:first-child { flex: 1 1 auto; width: auto !important; }
/* stacked: a flex-basis would become a fixed HEIGHT, so let cards size to content */
.pick-panel__row:not(.pick-panel__row--sliders) .pick-card:nth-child(1),
.pick-panel__row:not(.pick-panel__row--sliders) .pick-card:nth-child(2) { flex: 0 0 auto; }
}
/* catalog: max-spec pills — small, uniform, no icons */
.pick-maxes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pmax { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--tint); font-size: 10.5px; font-weight: 700; letter-spacing: .2px; color: var(--accent-darker); line-height: 1.5; }
.pmax--types { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); letter-spacing: .6px; font-size: 10px; }
/* catalog: flag tiles with hover tooltip */
.pick-flags { display: inline-flex; gap: 5px; }
.pick-flag { position: relative; display: inline-flex; padding: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 3px rgba(43,54,72,.08); }
.pick-flag img { width: 24px; height: 17px; display: block; border-radius: 4px; object-fit: cover; }
.pick-flag::after { content: attr(data-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(3px); padding: 5px 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: 7px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; pointer-events: none; z-index: 30; }
.pick-flag:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%); }
.pick-chips__sub {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap;
opacity: 0; visibility: hidden; transform: translateX(-6px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.pick-chips__sub.is-open { opacity: 1; visibility: visible; transform: none; }
.pick-chips__sep { width: 1px; height: 22px; background: var(--tint-border); margin: 0 2px; }
.pick-price em, .compare-price em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--dim); margin-right: 1px; }
.pick-gpus { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pick-gpus b { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: var(--accent-darker); margin-right: 3px; }
.btn-ghostdark { background: var(--card); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-ghostdark:hover { background: var(--tint); color: var(--ink); }
/* Mobile hard-fit fixes */
@media (max-width: 640px) {
.themepick { display: none; }
.nav { gap: 10px; }
.nav-actions { gap: 6px; }
.nav-actions .btn-primary { height: 36px; padding: 0 13px; font-size: 13px; }
.lang__cur { height: 36px; padding: 0 10px; font-size: 12px; }
.brand__mark { width: 34px; height: 34px; border-radius: 10px; }
.brand__text b { font-size: 15.5px; }
.hero-cta { flex-wrap: wrap; }
.hero-cta .btn { flex: 1 1 100%; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-stats > div { justify-content: center; padding: 10px 12px; }
.hero-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hero-stats b { min-width: 0; }
.terminal { min-width: 0; overflow: hidden; }
.hero { padding: 26px 18px; gap: 26px; }
/* all three badges stay on one line — they shrink instead of wrapping */
.hero-badges { flex-wrap: nowrap; gap: 6px; }
.hero-badge { padding: 7px 10px; font-size: 11.5px; white-space: nowrap; min-width: 0; }
.terminal-body { font-size: 11px; }
.terminal-body > div { white-space: normal; word-break: break-word; }
.footer-grid, .footer-grid--wide { grid-template-columns: 1fr; gap: 0; padding: 30px var(--pad) 24px; }
.footer-brand { padding-bottom: 20px; }
.footer-col { border-top: 1px solid rgba(255,255,255,.1); }
.footer-title--acc {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 52px; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.footer-title--acc .footer-chev {
display: block; width: 9px; height: 9px; flex: none; margin-right: 4px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px); opacity: .6; transition: transform .25s ease;
}
.footer-col.is-open .footer-chev { transform: rotate(-135deg) translate(-3px, -3px); opacity: 1; }
.footer-links { display: grid; overflow: hidden; max-height: 0; transition: max-height .3s ease, padding .3s ease; }
.footer-col.is-open .footer-links { max-height: 620px; padding-bottom: 14px; }
.footer-links a { padding: 9px 0; }
.footer-brand p { max-width: none; }
.cta-band { padding: 30px 18px; }
.panelmock { min-width: 0; }
.pm-srv__row { flex-wrap: wrap; }
.pick-panel__row--sliders { flex-direction: column; }
.pick-card--slider:first-child { width: auto !important; }
.pick-panel__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; height: auto; }
.pick-card { min-width: 0; flex: 0 0 auto; width: auto; max-width: 100%; align-self: stretch; }
/* chips wrap onto several lines — no sideways scrolling on a phone */
.pick-chips, .pick-chips--cc, .pick-chips__sub { flex-wrap: wrap; overflow: visible; }
/* the sub-row takes no space until its parent type is chosen */
.pick-chips__sub { display: none; }
.pick-chips__sub.is-open { display: inline-flex; }
.pick-chips__sep { display: none; }
.blog-layout { grid-template-columns: 1fr; }
.about-grid { grid-template-columns: 1fr; }
.renttypes, .oscards, .paycards { grid-template-columns: 1fr; }
.compare-bar { left: 10px; right: 10px; transform: none; justify-content: space-between; }
.compare-bar.is-on { transform: none; }
}
.pick-stock { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 9px; line-height: 1.3; }
.pmax--raid { background: var(--accent); color: #fff; }
@media (min-width: 861px) { .pick-chips--cc { flex-wrap: nowrap; } }
.pick-chips--cc .pchip span { padding: 0 11px; font-weight: 700; letter-spacing: .3px; }
/* ---------- Legal / informational pages ---------- */
.doc-body { padding: 38px 40px; line-height: 1.75; font-size: 15.5px; color: var(--ink); }
.doc-body > *:first-child { margin-top: 0; }
.doc-body > *:last-child { margin-bottom: 0; }
.doc-body h2 { font-size: 22px; font-weight: 800; margin: 34px 0 12px; letter-spacing: -.2px; }
.doc-body h3 { font-size: 17px; font-weight: 800; margin: 26px 0 10px; }
.doc-body h2 + p, .doc-body h3 + p { margin-top: 0; }
.doc-body p { margin: 0 0 14px; }
.doc-body a { color: var(--accent-darker); font-weight: 600; }
.doc-body strong { font-weight: 800; }
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin-bottom: 8px; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.doc-body th, .doc-body td { border: 1px solid var(--tint-border); padding: 10px 12px; text-align: left; }
.doc-body th { background: var(--tint); font-weight: 800; }
.doc-rules { list-style: none; padding: 0; counter-reset: none; }
.doc-rules li {
position: relative; margin: 0 0 10px; padding: 14px 16px 14px 18px;
background: var(--tint); border-radius: 12px; border-left: 3px solid var(--accent);
}
/* ---------- Why us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.why-card {
position: relative; padding: 26px 24px 24px; border-radius: 16px;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
}
.why-card__n {
display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px;
color: var(--accent-darker); background: var(--tint); border-radius: 8px; padding: 5px 9px; margin-bottom: 12px;
}
.why-card h3 { font-size: 17.5px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.2px; }
.why-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 640px) { .doc-body { padding: 26px 18px; font-size: 15px; } }
/* ---------- Contacts ---------- */
.ct-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--accent-darker); background: var(--tint); border-radius: 999px; padding: 9px 15px; }
.ct-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.page-head--ct { position: relative; overflow: hidden; align-items: flex-end; gap: 28px; padding-bottom: 34px; }
.page-head--ct .ct-live { display: inline-flex; margin-top: 14px; }
.page-head--ct > div:not(.head-art) { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.page-head--ct .ct-live { position: relative; z-index: 1; }
.page-head--ct h1 { margin-bottom: 6px; }
.page-head--ct .lead { max-width: 820px; margin-bottom: 0; }
.page-head--ct .ct-live { flex: none; align-self: flex-end; }
@media (max-width: 760px) {
.page-head--ct { flex-direction: column; align-items: flex-start; gap: 14px; }
.page-head--ct .ct-live { align-self: flex-start; }
}
.ct-strip {
display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 12px;
padding: 16px 22px; border-radius: 14px; background: var(--tint);
}
.ct-fact { display: flex; align-items: baseline; gap: 8px; }
.ct-fact b { font-size: 13.5px; font-weight: 800; }
.ct-fact span { font-size: 13px; color: var(--muted); }
.ct-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-tile {
position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ct-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(43,54,72,.14); }
.ct-tile__ico {
display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
border-radius: 13px; background: var(--tint); color: var(--accent-darker);
transition: background .18s ease, color .18s ease;
}
.ct-tile:hover .ct-tile__ico { background: var(--accent); color: #fff; }
.ct-tile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ct-tile__label { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.ct-tile__value { font-size: 14px; font-weight: 700; white-space: nowrap; }
.ct-tile__hours { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--accent-darker); white-space: nowrap; }
.ct-tile__hours::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .65; }
.ct-tile__act {
position: absolute; right: 16px; bottom: 12px; font-size: 11.5px; font-weight: 700; color: var(--accent-darker);
opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap;
pointer-events: none;
}
.ct-tile:hover .ct-tile__act { opacity: 1; transform: none; }
.ct-panel {
display: grid; grid-template-columns: 1.02fr 1fr; align-items: stretch;
border-radius: 18px; overflow: hidden; border: 1px solid var(--tint-border);
box-shadow: var(--shadow-md); background: var(--card);
}
.ct-panel__map { position: relative; min-height: 520px; background: var(--tint); }
.ct-panel__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9); }
.ct-addr {
position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2;
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; border-radius: 14px;
background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(43,54,72,.18);
}
.ct-addr__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-addr__text b { font-size: 15px; font-weight: 800; }
.ct-addr__text span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ct-addr__go {
display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none;
border-radius: 12px; background: var(--accent); color: #fff; transition: background .18s ease;
}
.ct-addr__go:hover { background: var(--accent-darker); }
.ct-form { padding: 32px 34px 34px; background: var(--card); }
.ct-form__title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.ct-form__lead { margin: 7px 0 20px; font-size: 13.5px; line-height: 1.6; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-field { display: block; margin-bottom: 14px; }
.ct-field > span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.ct-field input, .ct-field textarea {
width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
background: var(--tint); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px;
transition: border-color .15s ease, background .15s ease;
}
.ct-field textarea { resize: vertical; line-height: 1.6; }
.ct-field input:focus, .ct-field textarea:focus { outline: 0; background: var(--card); border-color: var(--accent); }
.ct-form .btn { width: 100%; margin-top: 4px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-msg { margin: 0 0 16px; padding: 13px 15px; border-radius: 12px; font-size: 14px; line-height: 1.6; font-weight: 600; }
.ct-msg--ok { background: var(--tint); color: var(--accent-darker); box-shadow: inset 0 0 0 1px var(--accent); }
.ct-msg--err { background: #fdf1ee; color: #a4432a; box-shadow: inset 0 0 0 1px #e8b4a4; }
.ct-guide { max-width: 760px; margin-bottom: 18px; }
.ct-guide h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 10px; }
.ct-guide__lead { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.ct-depts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ct-dept {
display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 16px;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
border-top: 3px solid var(--accent);
}
.ct-dept h3 { font-size: 17px; font-weight: 800; margin: 0 0 9px; letter-spacing: -.2px; }
.ct-dept p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.ct-dept a { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--accent-darker); overflow-wrap: anywhere; }
.ct-dept a:hover { text-decoration: underline; }
.ct-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ct-note { padding: 22px 24px; border-radius: 16px; background: var(--tint); }
.ct-note h3 { font-size: 15.5px; font-weight: 800; margin: 0 0 8px; color: var(--accent-darker); }
.ct-note p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
@media (max-width: 900px) {
.ct-panel { grid-template-columns: 1fr; }
.ct-panel__map { min-height: 340px; }
.ct-form { padding: 26px 20px 28px; }
.ct-form__row { grid-template-columns: 1fr; gap: 0; }
}
/* ---------- Promotions ---------- */
.promo-surface {
padding: 14px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border);
}
.promo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.promo-card {
display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 16px;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
}
.promo-card__v { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--accent-darker); font-variant-numeric: tabular-nums; }
.promo-card__flags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: center; }
.promo-card__flags img { width: 30px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(43,54,72,.18); }
.promo-card__l { margin: 7px 0 14px; font-size: 12.5px; color: var(--muted); }
.promo-card h3 { font-size: 16px; font-weight: 800; margin: 0 0 7px; letter-spacing: -.2px; padding-top: 13px; border-top: 1px solid var(--tint-border); }
.promo-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.promo-h { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; }
.promo-sub { margin: 0; max-width: 620px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
/* overflow: clip вместо hidden — скругление сохраняется, но sticky-фильтр внутри продолжает работать */
.promo-listsurface { padding: 0; overflow: clip; border-color: var(--tint-border); box-shadow: var(--shadow-md); }
.promo-listhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 20px 22px; background: var(--tint); border-bottom: 1px solid var(--tint-border); }
/* те же отступы, что у блока тарифов на главной (.widget-body) */
.promo-listbody { padding: 26px 30px 30px; background: var(--card); }
.promo-listbody .filter-block { margin: 0; padding: 0; }
.promo-listbody .filter-block__container { gap: 24px; }
.btn-ghost-accent { background: var(--card); color: var(--accent-darker); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-ghost-accent:hover { background: var(--tint); }
@media (max-width: 760px) { .promo-listhead { flex-direction: column; align-items: stretch; gap: 14px; } .promo-h { font-size: 22px; } }
/* ---------- Catalog: head facts + guide ---------- */
.page-head--cat { align-items: flex-end; gap: 32px; }
/* текст в шапке держим левее картинки, с воздухом между ними */
.page-head--cat > div { flex: 1 1 auto; min-width: 0; max-width: 52%; padding-right: 40px; }
.page-head--cat h1, .page-head--cat .lead { max-width: 100%; }
@media (max-width: 1300px) { .page-head--cat > div { max-width: 58%; padding-right: 28px; } }
@media (max-width: 1100px) { .page-head--cat > div { max-width: 100%; padding-right: 0; } }
.cat-nums {
flex: none; display: flex; padding: 4px; border-radius: 16px;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
}
.cat-nums span {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 12px 20px; border-radius: 12px; font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.cat-nums span + span { border-left: 1px solid var(--tint-border); }
.cat-nums b { font-size: 24px; font-weight: 800; color: var(--accent-darker); letter-spacing: -.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.cat-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.cat-note {
position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 13px;
padding: 22px 22px 20px; border-radius: 16px; overflow: hidden;
background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-note::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.cat-note:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(43,54,72,.12); }
.cat-note__ico {
grid-column: 1; grid-row: 1; align-self: center; display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex: none;
border-radius: 11px; background: var(--tint); color: var(--accent-darker);
transition: background .18s ease, color .18s ease;
}
.cat-note__ico svg { width: 19px; height: 19px; }
.cat-note:hover .cat-note__ico { background: var(--accent); color: #fff; }
.cat-note b { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 38px; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--ink); letter-spacing: -.2px; }
.cat-note p { grid-column: 1 / -1; grid-row: 2; margin: 13px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.cat-guide__h { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 16px; }
.cat-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cat-guide__card { padding: 24px 24px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md); }
.cat-guide__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--tint); color: var(--accent-darker); font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.cat-guide__card h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.2px; color: var(--ink); }
.cat-guide__card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
@media (max-width: 900px) {
.page-head--cat { flex-direction: column; align-items: stretch; gap: 16px; }
.cat-nums { width: 100%; }
.cat-nums span { flex: 1; padding: 12px 8px; }
}
@media (max-width: 760px) { .cat-guide__h { font-size: 22px; } }
/* ---------- GPU servers ---------- */
.gpu-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 20px; border-radius: 16px; background: var(--tint); border: 1px solid var(--tint-border); }
.gpu-cards__label { font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim); }
.gpu-cards__list { display: flex; flex-wrap: wrap; gap: 8px; }
.gpu-chip--soft { background: var(--tint-strong); border-style: dashed; color: var(--accent-darker); }
.gpu-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 9px; background: var(--card); border: 1px solid var(--tint-border); font-size: 13px; font-weight: 700; color: var(--ink); }
.gpu-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gpu-split__text { padding: 26px 28px; border-radius: 16px; background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md); }
.gpu-split__text p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.gpu-split__text p:last-child { margin-bottom: 0; }
.gpu-split__aside { padding: 22px 24px; border-radius: 16px; background: var(--tint); border: 1px solid var(--tint-border); }
.gpu-aside__head { font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.gpu-split__aside ul { margin: 0; padding: 0; list-style: none; }
.gpu-split__aside li { position: relative; padding: 8px 0 8px 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.gpu-split__aside li + li { border-top: 1px solid var(--tint-border); }
.gpu-split__aside li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gpu-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 32px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.gpu-cta h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.gpu-cta p { margin: 0; max-width: 720px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.gpu-cta__act { display: flex; flex-direction: column; gap: 10px; flex: none; }
@media (max-width: 900px) { .gpu-split { grid-template-columns: 1fr; } .gpu-cta { flex-direction: column; align-items: stretch; } .gpu-cta__act .btn { width: 100%; } }
/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 10px; }
.faq__item { background: var(--card); border: 1px solid var(--tint-border); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; }
.faq__item summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px; font-size: 15.5px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-darker); }
.faq__item summary i {
position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--tint);
transition: background .2s ease, transform .25s ease;
}
.faq__item summary i::before, .faq__item summary i::after {
content: ''; position: absolute; left: 50%; top: 50%; background: var(--accent-darker); border-radius: 2px; transform: translate(-50%, -50%);
}
.faq__item summary i::before { width: 11px; height: 2px; }
.faq__item summary i::after { width: 2px; height: 11px; transition: opacity .2s ease; }
.faq__item[open] summary i { background: var(--accent); transform: rotate(90deg); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: #fff; }
.faq__item[open] summary i::after { opacity: 0; }
.faq__item p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.75; color: var(--muted); max-width: 900px; }
/* GPU page: decorative card artwork behind the heading */
.gpu-hero { position: relative; overflow: hidden; }
/* внутри обёртки секция перестала быть последней на странице — убираем её нижний отступ */
.gpu-hero > section:last-of-type { padding-bottom: 0; }
.gpu-hero > section { position: relative; z-index: 1; }
.gpu-head__art {
position: absolute; z-index: 0; right: 0; top: 12px; width: min(820px, 58%); pointer-events: none;
color: var(--accent);
-webkit-mask-image: linear-gradient(200deg, #000 10%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.3) 80%, transparent 98%);
mask-image: linear-gradient(200deg, #000 10%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.3) 80%, transparent 98%);
}
.gpu-head__art svg { display: block; width: 100%; height: auto; }
/* лёгкая анимация: только CSS-трансформы, без скриптов и лишних запросов */
.gpu-fan { transform-box: fill-box; transform-origin: 50% 50%; animation: gpuSpin var(--spin, 9s) linear infinite; }
@keyframes gpuSpin { to { transform: rotate(360deg); } }
.gpu-leds circle { opacity: .25; animation: gpuBlink 2.7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes gpuBlink { 0%, 70%, 100% { opacity: .18; } 12%, 30% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .gpu-fan, .gpu-leds circle { animation: none; } }
@media (max-width: 1100px) { .gpu-head__art { width: 62%; right: -60px; opacity: .8; } }
@media (max-width: 760px) { .gpu-head__art { display: none; } }
/* ---------- Декоративные картинки в шапках страниц ---------- */
.page-head--art { position: relative; overflow: hidden; }
.page-head--art > div:not(.head-art), .page-head--art > aside, .page-head--art > a { position: relative; z-index: 1; }
.head-art {
position: absolute; z-index: 0; right: 0; top: 12px; pointer-events: none;
width: min(760px, 54%);
-webkit-mask-image: linear-gradient(200deg, #000 10%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.3) 80%, transparent 98%);
mask-image: linear-gradient(200deg, #000 10%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.3) 80%, transparent 98%);
}
.head-art svg { display: block; width: 100%; height: auto; }
.head-art--ct { width: min(680px, 48%); top: 16px; }
.ct-legal {
display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-top: 18px;
padding: 12px 18px; border-radius: 14px; background: var(--tint); border: 1px solid var(--tint-border);
font-size: 12.5px; color: var(--muted); width: max-content; max-width: 100%; white-space: nowrap;
}
.ct-legal > span { white-space: nowrap; }
.ct-legal__name { font-size: 13px; font-weight: 600; color: var(--muted); }
.ct-legal__name b { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.ct-legal b { font-weight: 700; color: var(--ink); }
.ct-legal__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .55; }
.ct-legal__addr { display: inline-flex; align-items: center; gap: 7px; }
.ct-legal__addr svg { width: 15px; height: 15px; color: var(--accent-darker); flex: none; }
@media (max-width: 1200px) { .ct-legal { font-size: 11.5px; gap: 9px; padding: 11px 14px; } }
@media (max-width: 900px) { .ct-legal { flex-wrap: wrap; white-space: normal; width: auto; gap: 6px 10px; } .ct-legal > span, .ct-legal__addr { white-space: normal; } .ct-legal__sep { display: none; } }
.head-art--cat, .head-art--promo { width: min(720px, 46%); top: 6px; }
.head-art--ins { width: min(780px, 50%); top: 8px; }
.head-art--ded { width: min(760px, 48%); top: 10px; }
.head-art--vps { width: min(800px, 55%); top: -14px; }
.head-art--st { width: min(720px, 46%); top: 10px; }
.head-art--win { width: min(740px, 47%); top: 10px; }
.head-art--nl { width: min(820px, 54%); top: -6px; }
.head-art--de { width: min(800px, 53%); top: -2px; }
.head-art--fr { width: min(800px, 53%); top: -2px; }
.head-art--uk { width: min(820px, 54%); top: -6px; }
.head-art--game { width: min(820px, 54%); top: 0; }
.head-art--gb { width: min(800px, 53%); top: 6px; }
/* график тика и стрелка спидометра */
.gm-tick { stroke-dasharray: 260; animation: gmTick 5s ease-in-out infinite; }
@keyframes gmTick { 0% { stroke-dashoffset: 260; } 45%, 100% { stroke-dashoffset: 0; } }
.gb-needle { transform-box: fill-box; transform-origin: 100% 100%; animation: gbSweep 6s ease-in-out infinite; }
@keyframes gbSweep { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(52deg); } }
@media (prefers-reduced-motion: reduce) { .gm-tick, .gb-needle { animation: none; } }
/* маяк на вершине башни и стрелки часов */
.art-beacon { animation: artBeacon 3.4s ease-in-out infinite; }
@keyframes artBeacon { 0%, 100% { opacity: .25; r: 5; } 50% { opacity: .9; r: 7; } }
.uk-hand-h, .uk-hand-m { transform-box: fill-box; transform-origin: 50% 100%; }
.uk-hand-h { animation: gpuSpin 240s linear infinite; }
.uk-hand-m { transform-origin: 0% 50%; animation: gpuSpin 40s linear infinite; }
@media (prefers-reduced-motion: reduce) { .art-beacon, .uk-hand-h, .uk-hand-m { animation: none; } }
.lv-tux { transform-box: fill-box; transform-origin: 50% 100%; animation: lvBob 6s ease-in-out infinite; }
@keyframes lvBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.lv-caret { animation: lvBlink 1.05s steps(1) infinite; }
@keyframes lvBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .08; } }
@media (prefers-reduced-motion: reduce) { .lv-caret, .lv-tux { animation: none; } }
/* знак окна: вся группа мягко покачивается, створки дышат вразнобой */
.win-mark { transform-box: fill-box; transform-origin: 50% 50%; animation: winSway 7.5s ease-in-out infinite; }
@keyframes winSway {
0%, 100% { transform: rotate(-1.5deg) translateY(2px); }
50% { transform: rotate(1.5deg) translateY(-6px); }
}
.win-mark path { animation: winPane 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.win-mark path:nth-child(2) { animation-delay: .4s; }
.win-mark path:nth-child(3) { animation-delay: .8s; }
.win-mark path:nth-child(4) { animation-delay: 1.2s; }
@keyframes winPane {
0%, 70%, 100% { opacity: .85; transform: translateY(0); }
35% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .win-mark, .win-mark path { animation: none; } }
.st-head { transform-box: fill-box; transform-origin: 92% 12%; animation: stSeek 7s ease-in-out infinite; }
@keyframes stSeek { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) { .st-head { animation: none; } }
.ded-fan { transform-box: fill-box; transform-origin: 50% 50%; animation: gpuSpin var(--spin, 10s) linear infinite; }
.ded-geo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding: 24px 26px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.ded-geo__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ded-geo__item {
display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border-radius: 12px;
background: var(--card); border: 1px solid var(--tint-border); font-size: 14px; font-weight: 700; color: var(--ink);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ded-geo__item:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(43,54,72,.12); }
.ded-geo__item img { width: 24px; height: 17px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(43,54,72,.18); }
@media (max-width: 900px) { .ded-geo { grid-template-columns: 1fr; gap: 16px; } }
/* стрелки часов: плавный непрерывный ход, у каждой свой темп */
.ins-hand { transform-box: fill-box; transform-origin: 50% 100%; animation: insSweep linear infinite; }
.ins-hand--min { animation-duration: 24s; }
.ins-hand--sec { animation-duration: 8s; }
.ins-hand--small { transform-origin: 50% 100%; animation-duration: 30s; }
.ins-hand--small-min { transform-origin: 0% 50%; animation-duration: 11s; }
.ins-hand--mid { animation-duration: 18s; }
.ins-hand--mid-sec { transform-origin: 0% 50%; animation-duration: 6.5s; }
@keyframes insSweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ins-hand { animation: none; } }
.page-head--ct .ct-live { position: relative; z-index: 1; }
/* лёгкие анимации (на контактах их нет) */
.art-leds circle { opacity: .25; animation: artBlink 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes artBlink { 0%, 70%, 100% { opacity: .2; } 12%, 32% { opacity: .9; } }
.art-waves path { animation: artWave 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes artWave { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.art-spark path { animation: artSpark 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes artSpark { 0%, 100% { opacity: .2; transform: scale(.75); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .art-leds circle, .art-waves path, .art-spark path { animation: none; } }
@media (max-width: 1000px) { .head-art { display: none; } }
/* ---------- Сравнительная таблица ---------- */
.ded-cmp { padding: 26px 28px 28px; border-radius: 18px; background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md); }
.ded-cmp__head { margin-bottom: 18px; }
.ded-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ded-table th, .ded-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--tint-border); }
.ded-table thead th { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); border-bottom-width: 2px; }
.ded-table thead th.is-primary { color: var(--accent-darker); }
.ded-table tbody th { font-weight: 700; color: var(--ink); width: 24%; }
.ded-table td { color: var(--muted); }
.ded-table td.is-primary { color: var(--ink); font-weight: 700; background: var(--tint); }
.ded-table tbody tr:last-child th, .ded-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
.ded-cmp { padding: 20px 16px 22px; }
.ded-table { font-size: 13px; }
.ded-table th, .ded-table td { padding: 10px 8px; }
.ded-table tbody th { width: 34%; }
}
/* ---------- Нидерланды ---------- */
.nl-sub { max-width: 900px; margin: -6px 0 16px; }
.nl-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px; padding: 1px; border-radius: 16px; overflow: hidden;
background: var(--tint-border); border: 1px solid var(--tint-border);
}
.nl-facts__i { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; text-align: center; padding: 18px 12px; background: var(--card); }
.nl-facts__i b { font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: var(--accent-darker); line-height: 1.1; }
.nl-facts__i span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.nl-panel { padding: 26px 28px 28px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.nl-panel__head { margin-bottom: 18px; }
.nl-panel__head .promo-sub { max-width: 900px; }
.nl-incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.nl-incl__item {
display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 13px; align-items: center;
padding: 18px 20px 17px; border-radius: 14px; background: var(--card);
border: 1px solid var(--tint-border); box-shadow: var(--shadow-md);
}
.nl-incl__ico { grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tint); color: var(--accent-darker); }
.nl-incl__ico svg { width: 17px; height: 17px; }
.nl-incl__item b { grid-column: 2; font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.nl-incl__item p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.nl-mx { padding: 26px 28px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--tint-border); box-shadow: var(--shadow-md); }
.nl-mx__head { margin-bottom: 8px; }
.nl-mx__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--tint-border); }
.nl-mx__k { font-size: 13.5px; font-weight: 800; color: var(--ink); padding-top: 6px; }
.nl-mx__v { display: flex; flex-wrap: wrap; gap: 7px; }
.nl-mx__v .gpu-chip { height: 30px; font-size: 12.5px; font-weight: 600; }
.nl-os { display: grid; gap: 12px; }
.nl-os__col { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; align-items: start; }
.nl-os__col .gpu-cards__label { padding-top: 10px; }
.nl-note {
display: flex; gap: 12px; margin: 12px 0 0; padding: 16px 20px; border-radius: 14px;
background: var(--card); border: 1px dashed var(--tint-border);
font-size: 13.5px; line-height: 1.7; color: var(--muted);
}
.nl-note::before { content: 'i'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--accent-darker); font-size: 12px; font-weight: 800; font-style: italic; }
.nl-dc { padding: 26px 28px 24px; border-radius: 18px; background: var(--tint); border: 1px solid var(--tint-border); }
.nl-dc__head { margin-bottom: 18px; }
.nl-dc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.nl-dc__col { padding: 20px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--tint-border); }
.nl-dc__col ul { margin: 0; padding: 0; list-style: none; }
.nl-dc__col li { position: relative; padding: 9px 0 9px 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.nl-dc__col li + li { border-top: 1px solid var(--tint-border); }
.nl-dc__col li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nl-dc__note { margin: 18px 0 0; font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 1000px; }
@media (max-width: 760px) {
.nl-panel { padding: 20px 16px 22px; }
.nl-os__col { grid-template-columns: 1fr; gap: 8px; }
.nl-os__col .gpu-cards__label { padding-top: 0; }
.nl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl-facts__i { padding: 15px 8px; }
.nl-facts__i b { font-size: 18px; }
.nl-mx { padding: 20px 16px 6px; }
.nl-mx__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
.nl-mx__k { padding-top: 0; }
/* на телефоне списки вариантов длинные — показываем их сплошным текстом через точку */
.nl-mx__v { gap: 0 8px; }
.nl-mx__v .gpu-chip { height: auto; padding: 0; background: none; border: 0; font-size: 13px; font-weight: 600; line-height: 1.85; color: var(--ink); }
.nl-mx__v .gpu-chip:not(:last-child)::after { content: '·'; margin-left: 4px; color: var(--dim); font-weight: 700; }
.nl-mx__v .gpu-chip--soft { color: var(--accent-darker); }
.nl-dc { padding: 20px 16px 20px; }
.nl-dc__col { padding: 16px 16px; }
}
/* форма обратной связи: состояние отправки */
.ct-form button.is-busy { opacity: .6; pointer-events: none; }
.ct-msg-slot[hidden] { display: none; }
/* ---------- «Смотрите также» ---------- */
.rel__h { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 14px; }
.rel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rel__item {
display: block; padding: 15px 17px; border-radius: 14px; background: var(--card);
border: 1px solid var(--tint-border); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rel__item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(43,54,72,.10); }
.rel__item b { display: block; font-size: 14.5px; font-weight: 700; color: var(--accent-darker); margin-bottom: 3px; }
.rel__item span { display: block; font-size: 13px; line-height: 1.55; color: var(--muted); }
@media (max-width: 600px) { .rel__grid { grid-template-columns: 1fr; } }
/* кнопка «назад в каталог» на странице сравнения */
.btn-back { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 9px 15px 9px 12px; font-size: 13.5px; }
.btn-back svg { width: 15px; height: 15px; transition: transform .18s ease; }
.btn-back:hover svg { transform: translateX(-3px); }
/* Заглушка на месте каталога, когда база тарифов недоступна */
.catalog-stub { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 48px 24px; border: 1px dashed var(--tint-border); border-radius: 16px; background: var(--card); text-align: center; }
.catalog-stub svg { width: 40px; height: 40px; color: var(--dim); }
.catalog-stub h3 { margin: 0; font-size: 18px; color: var(--ink); }
.catalog-stub p { margin: 0; max-width: 46ch; color: var(--dim); font-size: 14px; line-height: 1.6; }
.catalog-stub__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
/* =====================================================================
Вход в кабинет. Цвета берём только из тем сайта (--accent и родня),
поэтому окно перекрашивается вместе с выбранной палитрой.
===================================================================== */
.lmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lmodal[hidden] { display: none; }
.lmodal__backdrop { position: absolute; inset: 0; background: rgba(43, 54, 72, .45); backdrop-filter: blur(3px); }
.lmodal__dialog {
position: relative; width: 100%; max-width: 390px; max-height: calc(100vh - 40px); overflow-y: auto;
background: var(--card); border-radius: 16px; box-shadow: 0 24px 60px rgba(43, 54, 72, .28);
transform: translateY(10px); opacity: 0; transition: transform .18s ease, opacity .18s ease;
}
.lmodal.is-open .lmodal__dialog { transform: none; opacity: 1; }
/* Шапка: замок стоит в строке с заголовком, без переноса — иначе окно раздувается */
.lmodal__head { display: flex; align-items: center; gap: 11px; padding: 14px 20px; background: var(--accent); border-radius: 16px 16px 0 0; }
.lmodal__lock { width: 19px; height: 19px; color: #fff; flex: none; }
.lmodal__headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lmodal__title { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.lmodal__host { font-size: 12px; color: rgba(255, 255, 255, .8); margin-top: 1px; }
.lmodal__close { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 8px; color: rgba(255, 255, 255, .85); cursor: pointer; transition: background .15s, color .15s; }
.lmodal__close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.lmodal__close svg { width: 18px; height: 18px; }
.lmodal__form { display: flex; flex-direction: column; gap: 13px; padding: 22px 24px 4px; }
.lfield { display: block; }
.lfield > span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.lfield input {
width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
background: var(--tint); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px;
transition: border-color .15s ease, background .15s ease;
}
.lfield input:focus { outline: 0; background: var(--card); border-color: var(--accent); }
.lmodal__err { margin: 0; font-size: 13.5px; line-height: 1.5; color: #a4432a; }
.lmodal__form .btn { width: 100%; margin-top: 3px; }
.lmodal__form .btn:disabled { opacity: .6; cursor: default; }
/* Виджет Google жёстко 304px и не тянется — центрируем, а на узких экранах ужимаем целиком,
иначе он вылезает за края и появляется горизонтальная прокрутка */
.lmodal__captcha { display: flex; justify-content: center; }
.lmodal__captcha[hidden] { display: none; }
.lmodal__foot { display: flex; justify-content: space-between; gap: 14px; padding: 14px 24px 20px; font-size: 13.5px; }
.lmodal__foot a { color: var(--accent-dark); }
.lmodal__foot a:hover { color: var(--accent-darker); }
body.lmodal-open { overflow: hidden; }
@media (max-width: 420px) {
.lmodal { padding: 12px; }
.lmodal__form { padding: 20px 18px 4px; }
.lmodal__foot { padding: 14px 18px 18px; flex-direction: column; gap: 8px; }
.lmodal__captcha { transform: scale(.86); transform-origin: center; height: 66px; }
}
/* Имя вошедшего клиента вместо кнопки входа (см. inc/layout.php) */
.nav-user { gap: 7px; max-width: 190px; }
.nav-user svg { flex: none; }
/* ==========================================================================
Каталог: карточка с именованными колонками (перенос дизайна с .cloud).
Всё на переменных темы — перекрашивается вместе с [data-theme], как и сайт.
========================================================================== */
.pick-row{
grid-template-columns:26px 56px minmax(0,1fr) 240px;
gap:20px;align-items:stretch;padding:20px 24px;
}
.pick-main{display:flex;flex-direction:column;gap:13px;min-width:0;}
.pick-title{margin-bottom:0;}
/* старые строки-фишки в каталоге больше не выводятся */
.pick-row .pick-spec,.pick-row .pick-gpus,.pick-row .pick-maxes{display:none;}
.pv-cols{
display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
gap:10px 30px;
}
.pv-col{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pv-l{
font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.pv-v{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.35;}
.pv-x{font-size:11.5px;color:var(--dim);font-style:italic;}
.pv-x--up{color:var(--accent-dark);font-style:normal;font-weight:700;}
.pick-right{
display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
gap:10px;border-left:1px dashed var(--line);padding:2px 0 2px 22px;min-width:0;
}
.pick-right > *{flex:none;}
.pick-flags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:100%;}
.pick-price{white-space:nowrap;display:flex;align-items:baseline;gap:5px;}
.pick-price .pick-badge{margin-right:4px;}
@media (max-width:900px){
.pick-row{grid-template-columns:22px 44px minmax(0,1fr);}
.pick-right{
grid-column:1 / -1;flex-direction:row;align-items:center;
border-left:0;border-top:1px dashed var(--line);padding:14px 0 0;
}
.pick-price{margin-right:auto;}
.pv-cols{grid-template-columns:1fr 1fr;}
}
/* Каталог: доводка карточки до макета — колонки не расползаются по всей ширине,
правый столбик собран по центру, заголовок весомее. */
.pick-row{align-items:center;}
.pick-compare{align-self:center;padding-top:0;}
.pick-title{font-size:17px;font-weight:800;letter-spacing:-.2px;}
.pv-cols{
grid-template-columns:repeat(auto-fit,minmax(160px,205px));
justify-content:start;gap:12px 40px;
}
.pick-right{
justify-content:center;gap:9px;align-self:stretch;
}
@media (max-width:900px){
.pick-right{justify-content:flex-start;}
}
/* «Hard RAID в подарок» — тёплая подарочная плашка с бантиком, а не служебный штамп */
.pick-raid svg{flex:none;}
.pick-raid em{font-style:normal;font-weight:600;opacity:.85;}
/* Одна страна — флаг с названием, а не одинокий флажок */
.pick-flags--one{display:inline-flex;align-items:center;gap:7px;}
.pick-cname{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;}
/* «без видеокарты» — тихим текстом, не как характеристика */
.pv-v--dim{color:var(--dim);font-weight:500;font-style:italic;}
/* Страна под ценой — тише, вспомогательной строкой */
.pick-cname{font-size:12px;font-weight:600;color:var(--dim);}
.pick-flags--one .pick-flag img{width:18px;height:13px;}
/* Мобильный блок каталога — намеренно в самом конце файла: правила выше
добавлялись позже старого мобильного блока и перекрывали его, из-за чего
на телефоне карточка держала десктопную сетку и распирала страницу. */
@media (max-width: 900px){
.pick-row{
grid-template-columns:22px 44px minmax(0,1fr);
gap:12px 14px;padding:16px 16px;align-items:start;
}
.pick-logo{width:44px;height:44px;}
.pick-title{font-size:15px;}
.pv-cols{grid-template-columns:1fr 1fr;gap:10px 16px;justify-content:stretch;}
.pick-right{
grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:flex-start;gap:8px 14px;
border-left:0;border-top:1px dashed var(--line);padding:12px 0 0;margin-top:2px;
}
.pick-right .pick-price{margin-right:auto;order:1;}
.pick-right .pick-flags{order:2;}
.pick-right .btn{order:3;width:100%;justify-content:center;}
}
/* ==========================================================================
Вариант 1: чипы с иконками; страны — в строке заголовка справа.
========================================================================== */
.pick-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pick-geo{margin-left:auto;display:inline-flex;flex-wrap:wrap;gap:6px 14px;}
.pick-geo__c{
display:inline-flex;align-items:center;gap:6px;
font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;
}
.pick-geo__c img{width:19px;height:13px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(43,54,72,.15);}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;}
.pcC{
display:inline-flex;align-items:center;gap:9px;
background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:7px 13px 7px 8px;min-width:0;
}
.pcC-ic{
width:30px;height:30px;flex:none;border-radius:9px;
display:flex;align-items:center;justify-content:center;
background:var(--tint);color:var(--accent-dark);
}
.pcC-ic svg{width:16px;height:16px;}
.pcC-tx{min-width:0;}
.pcC-tx b{display:block;font-size:13.5px;font-weight:700;line-height:1.25;color:var(--text);}
.pcC-tx i{display:block;font-style:normal;font-size:12px;line-height:1.7;}
.pcC-tx i.up{color:var(--accent-dark);font-weight:400;}
.pcC-tx i.dim{color:var(--dim);font-style:italic;}
.pcC--dim .pcC-ic{opacity:.55;}
.pcC--dim .pcC-tx b{color:var(--dim);font-weight:600;font-style:italic;}
/* правый столбик стал уже: только цена и кнопка */
.pick-row{grid-template-columns:26px 56px minmax(0,1fr) 200px;}
/* мобильный блок — в конце, чтобы ничего его не перекрыло */
@media (max-width: 900px){
.pick-row{
grid-template-columns:22px 44px minmax(0,1fr);
gap:12px 14px;padding:16px;align-items:start;
}
.pick-geo{margin-left:0;flex-basis:100%;}
.pc-chips .pcC{flex:1 1 46%;}
.pick-right{
grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;
justify-content:flex-start;gap:8px 14px;
border-left:0;border-top:1px dashed var(--line);padding:12px 0 0;margin-top:2px;
}
.pick-right .pick-price{margin-right:auto;}
.pick-right .btn{width:100%;justify-content:center;}
}
/* Плашка Hard RAID — той же геометрии и типографики, что плашки типа:
отличается только янтарным цветом и значком подарка */
/* Тихая пометка, а не кричащая плашка: контурная, без заливки —
заметна тому, кто читает карточку, и не спорит с типом сервера */
.pick-raid{
display:inline-flex;align-items:center;gap:5px;
font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
line-height:1;padding:5px 9px 3px;border-radius:999px;margin-left:0;vertical-align:0;
color:#9c7736;background:transparent;border:1px dashed #e0c99c;box-shadow:none;
}
.pick-raid svg{width:10px;height:10px;margin-top:-1px;}
.pick-raid em{font-style:normal;font-weight:700;opacity:.8;letter-spacing:.6px;}
/* И «в наличии» заодно в ту же линейку */
.pick-stock{
display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:1.2px;
text-transform:uppercase;line-height:1;padding:6px 9px 4px;border-radius:999px;
color:#4e6a35;background:var(--tint-strong);
}
/* плашки заголовка не переносятся внутри себя */
.pick-raid,.pick-stock,.pick-type{white-space:nowrap;}
/* финальная фиксация плашек заголовка: одна геометрия, без переносов */
.pick-title .pick-type,.pick-title .pick-raid,.pick-title .pick-stock{
display:inline-flex;white-space:nowrap;
}
/* Чипы одной высоты независимо от числа строк текста */
.pcC{min-height:46px;}
/* ==========================================================================
Вариант C «Глубина и свет» — принят. Кнопки не трогаем.
========================================================================== */
.pick-row{
background:linear-gradient(180deg,#fff 0%,#fdfefb 100%);
position:relative;
}
/* тонкий световой луч по верхней кромке */
.pick-row::after{
content:"";position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--tint-strong) 30%,var(--accent) 50%,var(--tint-strong) 70%,transparent);
opacity:.45;pointer-events:none;
}
/* объёмные иконки: радиальный свет + внутренняя обводка */
.pcC-ic{
background:radial-gradient(120% 120% at 20% 15%,#fff 0%,var(--tint) 45%,var(--tint-strong) 100%);
box-shadow:inset 0 0 0 1px #e0e8d6,0 1px 2px rgba(43,54,72,.08);
}
/* чипы отвечают на наведение */
.pcC{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.pcC:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(43,54,72,.10);border-color:#c7d2bd;}
/* разделитель тает к краям (только на широком экране) */
@media (min-width:901px){
.pick-right{border-left:0;position:relative;padding-left:24px;}
.pick-right::before{
content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;
background:linear-gradient(180deg,transparent,var(--line) 30% 70%,transparent);
}
}
/* Страны — шильдиками: флаг и имя на маленькой табличке */
.pick-geo{gap:6px;}
.pick-geo__c{
background:#fff;border:1px solid var(--line);border-radius:8px;
padding:3px 9px 3px 5px;font-size:12px;box-shadow:0 1px 2px rgba(43,54,72,.05);
}
.pick-geo__c img{width:17px;height:12px;}
/* Несколько стран — один шильдик с рядом флагов, названия во всплывашке */
.pick-geo__c--flags{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:10px;}
.pick-geo__c--flags img{display:block;width:21px;height:14px;border-radius:2.5px;
box-shadow:0 0 0 1px rgba(43,54,72,.12);transition:transform .13s ease;cursor:default;}
.pick-geo__c--flags img:hover{transform:scale(1.35);}
/* Всплывашка: один элемент на страницу, позицию считает скрипт */
.tip{
position:fixed;z-index:120;pointer-events:none;
background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px;
padding:6px 11px;border-radius:9px;box-shadow:0 10px 26px rgba(43,54,72,.30);
opacity:0;transform:translateY(4px);transition:opacity .13s ease,transform .13s ease;
white-space:nowrap;
}
.tip.on{opacity:1;transform:translateY(0);}
.tip::after{
content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);
width:8px;height:8px;background:var(--ink);border-radius:1px;
}
/* Чип локации. Селекторы с .pcC-tx — иначе общий «.pcC-tx b{display:block}»
перебивает флекс, и флаги слипаются вплотную. */
.pcC-tx b.pcC-geo1{display:inline-flex;align-items:center;gap:7px;}
.pcC-geo1 img{width:20px;height:14px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(43,54,72,.12);}
.pcC-tx b.pcC-flags{display:inline-flex;align-items:center;gap:7px;}
.pcC-flags img{width:20px;height:14px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(43,54,72,.12);transition:transform .13s ease;cursor:default;}
.pcC-flags img:hover{transform:scale(1.3);}
.pcC-tx i.dim{color:var(--dim);font-style:italic;}
/* Логотип платформы крупнее */
.pick-logo{width:64px;height:64px;border-radius:14px;padding:9px;}
/* Флаги остаются настоящими, но приглушаются под палитру сайта —
единый спокойный тон вместо кричащих чистых цветов */
.pcC-flags img,.pcC-geo1 img{filter:saturate(.78) brightness(1.03) contrast(.95);}
/* Свои флаги: настоящие цвета, приглушённые под палитру сайта.
Единый набор, рисуется градиентами — картинок и запросов нет. */
.cflag{
display:inline-block;width:20px;height:14px;border-radius:3px;flex:none;
box-shadow:inset 0 0 0 1px rgba(43,54,72,.14);
background:#dfe3e8;color:#7b8694;font-style:normal;font-size:8px;font-weight:800;
line-height:14px;text-align:center;letter-spacing:.5px;
transition:transform .13s ease;cursor:default;overflow:hidden;
}
.pcC-flags .cflag:hover{transform:scale(1.3);}
.cflag--nl{background:linear-gradient(#b5646c 33%,#f1efe9 33% 66%,#66789b 66%);}
.cflag--de{background:linear-gradient(#454545 33%,#b45f57 33% 66%,#d9c07e 66%);}
.cflag--fr{background:linear-gradient(90deg,#5d6f9b 33%,#f1efe9 33% 66%,#b96868 66%);}
.cflag--pl{background:linear-gradient(#f1efe9 50%,#bb6a6a 50%);}
.cflag--ca{background:linear-gradient(90deg,#bb6a63 28%,#f1efe9 28% 72%,#bb6a63 72%);}
.cflag--uk{background:
linear-gradient(transparent 44%,#ad5f55 44% 56%,transparent 56%),
linear-gradient(90deg,transparent 44%,#ad5f55 44% 56%,transparent 56%),
linear-gradient(transparent 36%,#f1efe9 36% 64%,transparent 64%),
linear-gradient(90deg,transparent 36%,#f1efe9 36% 64%,transparent 64%),
linear-gradient(#54628a,#54628a);}
.cflag--us{background:
linear-gradient(90deg,#54628a 38%,transparent 38%),
repeating-linear-gradient(#b56b64 0 15%,#f1efe9 15% 30%);}
/* Гео-чип: одни флаги, по вертикальному центру напротив иконки */
.pcC--geo{align-items:center;}
.pcC--geo .pcC-tx{display:flex;align-items:center;}
/* Пара «флаг + код страны», как в фильтре: NL, FR, DE… */
.pcC-tx b.pcC-flags{gap:11px;}
.cfp{
display:inline-flex;align-items:center;gap:5px;
font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.3px;cursor:default;
}
.cfp:hover .cflag{transform:scale(1.25);}
.cfp:hover{color:var(--ink);}
/* Хвост ряда чипов (сеть + GPU + локация) — неделимый блок:
на вторую строку уходит целиком, локация одна не остаётся */
.pc-tail{display:inline-flex;flex-wrap:nowrap;gap:8px;}
@media (max-width:900px){
/* на телефоне чипы двухколоночные — там блок распускается */
.pc-tail{display:contents;}
}
/* ==========================================================================
Каталог-«стойка» (вариант 5B): рама вокруг списка, у каждой машины —
вентиляционный торец с LED наличия и номером юнита. Цвета — из темы.
========================================================================== */
.rack{
border:1px solid var(--line);border-radius:20px;background:var(--tint);
padding:10px 14px;box-shadow:inset 0 2px 8px rgba(43,54,72,.05);
}
.rack-rail{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 10px;}
.rack-rail--b{padding:10px 8px 4px;}
.rk-cap{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.rk-holes{display:flex;gap:14px;}
.rk-holes i{width:7px;height:7px;border-radius:2px;background:var(--line);box-shadow:inset 0 1px 2px rgba(43,54,72,.18);}
/* торец юнита: перфорация во всю высоту ряда, LED сверху, номер U снизу */
.pick-row{grid-template-columns:54px 64px minmax(0,1fr) 210px;overflow:hidden;}
.rk-vent{
align-self:stretch;margin:-20px 0 -20px -24px;position:relative;
display:flex;align-items:center;justify-content:center;
border-right:1px solid var(--line);border-radius:13px 0 0 13px;
background:
radial-gradient(circle at center,rgba(43,54,72,.14) 1.2px,transparent 1.6px) 0 0/8px 8px,
linear-gradient(180deg,var(--tint),var(--tint-strong));
}
.rk-vent b{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted);
transform:rotate(-90deg);white-space:nowrap;
}
.rk-led{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;}
.rk-led.on{background:#79c98b;box-shadow:0 0 7px #79c98b;}
.rk-led.off{background:#d3a15a;box-shadow:0 0 7px rgba(211,161,90,.75);}
/* чекбокс сравнения переехал под кнопку заказа */
.pick-compare--rk{display:inline-flex;align-items:center;gap:7px;margin-top:2px;}
.pick-compare--rk em{font-style:normal;font-size:11.5px;color:var(--muted);}
.pick-compare--rk:hover em{color:var(--accent-dark);}
@media (max-width:900px){
.rack{padding:8px;border-radius:16px;}
.rk-cap{font-size:9px;letter-spacing:.1em;}
.rk-holes{gap:9px;}
.pick-row{grid-template-columns:30px 44px minmax(0,1fr);}
.rk-vent{margin:-16px 0 -16px -16px;border-radius:13px 0 0 13px;}
.rk-vent b{display:none;}
.rk-led{top:8px;}
}
@media (max-width:900px){
/* мобильный чекбокс сравнения живёт в правом блоке, а не в углу карточки */
.pick-compare--rk{position:static;order:4;}
}
@media (max-width:900px){
/* На телефоне карточка двухрядная: цена с кнопкой уезжают вниз. Торец должен
идти вдоль всей карточки, поэтому занимает обе строки грида, а нижний блок
начинается со второй колонки, чтобы на него не наехать. */
.pick-row .rk-vent{grid-row:1 / -1;align-self:stretch;height:auto;}
.pick-row .pick-right{grid-column:2 / -1;}
.rack{overflow:hidden;}
}
/* ==========================================================================
Стойка, вид юнита (макет 5B): плоские стикеры вместо крупных чипов,
юниты стоят вплотную, цена и кнопка — одной строкой у правого края.
========================================================================== */
.pick{gap:8px;padding:0;background:transparent;}
.pick-row{
grid-template-columns:88px 60px minmax(0,1fr) auto;
gap:16px;padding:12px 18px 12px 0;align-items:center;
border-radius:9px;box-shadow:0 2px 6px rgba(43,54,72,.06);
}
.pick-row:hover{transform:none;box-shadow:0 5px 14px rgba(43,54,72,.11);}
.pick-row::after{display:none;} /* световой луч тут лишний: юниты стоят стопкой */
/* торец: перфорация во всю высоту, LED сверху, номер юнита снизу горизонтально */
.rk-vent{margin:-12px 0;border-radius:9px 0 0 9px;flex-direction:column;}
.rk-vent b{transform:none;position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:10px;}
.pick-logo{width:52px;height:52px;border-radius:11px;padding:7px;}
.pick-main{gap:9px;}
.pick-title{font-size:16px;}
/* стикеры: без иконок, значение и потолок апгрейда в одну строку */
.pc-chips{gap:7px;}
.pcC{
border-radius:6px;padding:6px 11px;gap:6px;min-height:0;
box-shadow:0 1.5px 0 var(--line);background:var(--card);
}
.pcC:hover{transform:none;box-shadow:0 1.5px 0 var(--line);}
.pcC-ic{display:none;}
/* всё в одну строку: значение, следом подпись — как в макете */
.pcC-tx{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.pcC-tx b{display:inline;font-size:12.5px;font-weight:700;line-height:1.35;}
.pcC-tx i{display:inline;font-size:11px;line-height:1.35;}
.pcC-tx i.up{font-weight:600;}
.pcC--geo .pcC-tx{gap:0;}
/* цена и кнопка — в строку, чекбокс сравнения следом */
.pick-right{
flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;
border-left:0;padding-left:18px;
}
.pick-right::before{display:none;}
.pick-price{white-space:nowrap;}
.pick-compare--rk{flex-direction:column;gap:3px;}
.pick-compare--rk em{font-size:10.5px;}
@media (max-width:900px){
.pick{gap:6px;}
.pick-row{grid-template-columns:34px 44px minmax(0,1fr);padding:12px 14px 12px 0;gap:10px 12px;}
.rk-vent{margin:-12px 0;}
.rk-vent b{display:none;}
.pick-right{flex-wrap:wrap;padding-left:0;justify-content:flex-start;}
}
/* подпись-факт под значением (частота процессора): серая, но без курсива —
курсивом помечены только «не меняется» и подобные пометки */
.pcC-tx b i.sub{display:inline;color:var(--dim);font-style:normal;font-weight:400;font-size:12px;}
/* замок «не меняется»: пометка вместо слов, смысл — во всплывашке */
/* строка стикера центрируется целиком, поэтому замок стоит ровно
напротив середины текста — без ручных сдвигов */
/* селектор с .pcC-tx — иначе общий «.pcC-tx i{display:inline}» побеждает
по специфичности и замок снова садится на базовую линию */
.pcC-tx i.pcC-fx{display:inline-flex;align-items:center;align-self:center;position:relative;top:-1px;
color:var(--dim);opacity:.7;cursor:help;line-height:0;}
.pcC-tx i.pcC-fx svg{display:block;}
.pcC-fx:hover{opacity:1;color:var(--muted);}
/* ==========================================================================
Стойка на телефоне — блок идёт последним, чтобы ничего его не перекрывало.
Раскладка: слева торец во всю высоту, справа две строки — «логотип + имя»
и характеристики, затем цена с кнопкой.
========================================================================== */
@media (max-width:900px){
.pick{gap:8px;padding:0;}
.pick-row{
grid-template-columns:28px 40px minmax(0,1fr);
grid-template-rows:auto auto auto;
gap:10px 10px;padding:12px 14px 12px 0;align-items:center;
}
.rk-vent{grid-column:1;grid-row:1 / -1;margin:-12px 0;border-radius:9px 0 0 9px;}
.rk-vent b{display:none;}
.rk-led{top:8px;}
.pick-logo{grid-column:1;grid-row:1;width:40px;height:40px;padding:5px;border-radius:9px;}
/* обёртка распускается, чтобы имя и характеристики стали ячейками стойки */
.pick-main{display:contents;}
.pick-title{grid-column:2;grid-row:1;font-size:14.5px;gap:7px;margin:0;
justify-content:flex-start;text-align:left;}
/* характеристики — своей строкой во всю ширину карточки */
.pc-chips{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:6px;}
.pcC{flex:0 1 auto;max-width:100%;min-width:0;}
.pcC-tx{white-space:normal;flex-wrap:wrap;}
.pcC-tx b{white-space:normal;overflow-wrap:break-word;}
.pc-tail{display:contents;}
/* цена и кнопка — нижней строкой, кнопка во всю ширину */
.pick-right{
grid-column:1 / -1;grid-row:3;
display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
border-left:0;border-top:1px dashed var(--line);padding:10px 0 0;margin-top:2px;
}
.pick-right .pick-price{margin-right:auto;}
.pick-right .btn{order:3;flex:1 1 100%;justify-content:center;}
.pick-compare--rk{order:4;flex-direction:row;gap:7px;}
}
/* Рама идёт от края до края поверхности: собственное скругление у неё убрано,
иначе по бокам от её скруглённых углов просвечивал белый фон поверхности.
Низ обрезается скруглением самой поверхности (у неё overflow:hidden). */
.rack{margin:0 -1px -1px;border-radius:0;border-left:0;border-right:0;border-bottom:0;}
@media (max-width:900px){
/* логотип на телефоне был вырван из потока старым правилом — возвращаем в сетку */
.pick-row .pick-logo{position:static;}
}
/* значок «есть другие варианты» со счётчиком: список моделей — во всплывашке */
.pcC-tx i.pcC-opt{display:inline-flex;align-items:center;align-self:center;gap:3px;position:relative;top:-1px;
color:var(--accent-dark);opacity:.85;cursor:help;line-height:0;}
.pcC-tx i.pcC-opt:hover{opacity:1;}
.pcC-tx i.pcC-opt svg{display:block;}
.pcC-tx i.pcC-opt b{font-size:11px;font-weight:700;line-height:1;}
@media (max-width:900px){
/* плашка страны на телефоне растягивается на всю ширину — содержимое по центру */
.pcC--geo{justify-content:center;}
.pcC--geo .pcC-tx{justify-content:center;width:100%;}
}
@media (max-width:900px){
/* На телефоне торец стойки только съедал ширину — прячем его, карточка
занимает весь ряд. Наличие по-прежнему видно по кнопке «Уточняйте!». */
.rk-vent{display:none;}
.pick-row{
grid-template-columns:40px minmax(0,1fr);
padding:12px 14px;gap:10px;
}
.pick-logo{grid-column:1;grid-row:1;}
.pick-title{grid-column:2;grid-row:1;}
.pc-chips{grid-column:1 / -1;grid-row:2;}
.pick-right{grid-column:1 / -1;grid-row:3;}
}
/* частота не разрывается посреди «32x 2.80GHz» */
.pcC-tx b i.sub{white-space:nowrap;}
/* значки внутри строки значения: прижаты к последнему слову, вертикально по центру */
/* значок внутри строки: середина иконки — на середине строчных букв.
vertical-align:middle сажает её чуть ниже, поэтому поднимаем на пиксель */
.pcC-tx b i.pcC-fx,.pcC-tx b i.pcC-opt{vertical-align:middle;position:relative;top:-1.5px;}
@media (max-width:900px){
/* «Сравнить» — не отдельной строкой под кнопкой, а компактной пометкой
в одной строке с ценой; кнопка заказа остаётся во всю ширину снизу. */
.pick-right{row-gap:10px;}
.pick-right .pick-price{order:1;margin-right:auto;}
.pick-compare--rk{order:2;flex-direction:row;gap:6px;margin:0;}
.pick-compare--rk em{font-size:11px;color:var(--dim);}
.pick-compare--rk span{width:17px;height:17px;border-radius:5px;}
.pick-right .btn{order:3;flex:1 1 100%;justify-content:center;}
}
@media (max-width:900px){
/* перебиваем старое «.pick-row .pick-right{grid-column:2/-1}» той же
специфичностью: нижний блок должен идти во всю ширину карточки */
.pick-row .pick-right{grid-column:1 / -1;padding-left:0;}
.pick-row .pc-chips{grid-column:1 / -1;}
.pick-row .pick-title{grid-column:2;justify-content:flex-start;}
.pick-row .pick-logo{grid-column:1;}
}
/* дублирующая точка наличия у названия — только для телефона */
.rk-led--m{display:none;}
@media (max-width:900px){
/* ── карточка плотнее ───────────────────────────────────────────── */
.pick-row{grid-template-columns:34px minmax(0,1fr);padding:10px 12px;gap:8px 10px;}
.pick-logo{width:34px;height:34px;padding:4px;border-radius:8px;}
.pick-title{font-size:14px;gap:6px;}
/* точка наличия вместо скрытого торца */
.rk-led--m{display:inline-block;position:static;transform:none;flex:none;}
/* ── стикеры: ровная сетка в две колонки одинаковой высоты ───────── */
.pick-row .pc-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch;}
.pc-chips .pcC{width:auto;max-width:none;}
.pcC--geo{grid-column:auto;}
/* ── низ карточки: цена и кнопка, без «сравнить» ─────────────────── */
.pick-compare--rk{display:none;}
.pick-right{padding-top:8px;gap:8px;}
.pick-right .btn{margin:0;}
}
@media (max-width:900px){
/* На телефоне ряд перестаёт быть сеткой: логотип и название идут одной
строкой вплотную, характеристики и низ карточки — во всю ширину.
Из-за колоночной сетки логотип «отрывался» от переносимого названия. */
.pick-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;}
.pick-logo{flex:0 0 auto;}
.pick-title{flex:1 1 auto;min-width:0;}
.pick-row .pc-chips{flex:1 1 100%;}
.pick-row .pick-right{flex:1 1 100%;}
}
/* пара «флаг + код» неразрывна: иначе код разваливался на буквы (N/L, D/E) */
.cfp{white-space:nowrap;flex:none;}
@media (max-width:900px){
/* три страны и больше — плашке нужна вся ширина карточки */
.pick-row .pcC--geo-wide{grid-column:1 / -1;}
.pcC--geo .pcC-tx b.pcC-flags{flex-wrap:wrap;justify-content:center;gap:8px 12px;}
}
@media (max-width:900px){
/* наследие вёрстки с абсолютным логотипом: отступ слева освобождал место
под картинку и теперь отрывал заголовок от бренда */
.pick-row .pick-title{padding:0;}
}
@media (max-width:900px){
/* «anywhere» рвал строку даже по неразрывному пробелу и отправлял замок
на отдельную строку; переносим только там, где слово само не влезает */
.pcC-tx b{overflow-wrap:break-word;word-break:normal;}
}
@media (max-width:900px){
/* стикер с длинным значением — во всю ширину карточки */
.pick-row .pcC--wide{grid-column:1 / -1;}
/* «Hard RAID в подарок» — компактнее, иначе заголовок целиком уезжал
под логотип: плашка задавала слишком большую минимальную ширину */
.pick-title .pick-raid{font-size:9px;padding:4px 7px;gap:4px;letter-spacing:.06em;}
.pick-title .pick-raid em{font-size:9px;}
.pick-title .pick-type,.pick-title .pick-stock{font-size:9px;padding:4px 7px;}
.pick-title{flex:1 1 150px;}
}
/* ==========================================================================
Итоговая раскладка каталога-стойки.
========================================================================== */
/* Десктоп: правый блок — столбиком. В строку он занимал под 400px и заставлял
характеристики переноситься на вторую строку задолго до нехватки места. */
@media (min-width:901px){
.pick-row{grid-template-columns:88px 56px minmax(0,1fr) 180px;}
.pick-right{
flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;
padding-left:16px;
}
.pick-right .btn{width:100%;justify-content:center;}
.pick-compare--rk{flex-direction:row;gap:6px;}
}
/* Телефон: характеристики одной колонкой — плитки разной ширины давали
«лесенку», а длинные значения всё равно не помещались в половину строки. */
@media (max-width:900px){
.pick-row .pc-chips{grid-template-columns:1fr;gap:5px;}
.pick-row .pcC--wide{grid-column:auto;}
.pcC{padding:5px 10px;}
.pcC-tx b{font-size:12px;}
.pcC-tx i{font-size:10.5px;}
.pcC-tx b i.sub{font-size:11.5px;}
/* страна — компактной строкой, содержимое слева, как у остальных плашек */
.pcC--geo{justify-content:flex-start;}
.pcC--geo .pcC-tx{justify-content:flex-start;}
}
@media (max-width:900px){
/* цена — по центру над кнопкой во всю ширину: прижатая влево она висела
в стороне от кнопки и выглядела оторванной */
.pick-right{justify-content:center;}
.pick-right .pick-price{margin-right:0;}
}
@media (max-width:900px){
/* цена занимает всю строку и центрирует содержимое: без width:100% по центру
вставал сам блок, а скидка с ценой внутри него всё равно липли влево */
.pick-right .pick-price{width:100%;margin:0;justify-content:center;}
}
@media (max-width:900px){
/* строки характеристик дышат свободнее: одна колонка позволяет более
крупные поля без роста ширины */
.pcC{padding:9px 13px;border-radius:8px;}
.pick-row .pc-chips{gap:6px;}
.pcC-tx b{font-size:12.5px;}
.pcC-tx i{font-size:11px;}
}
@media (max-width:900px){
/* наследие прежней раскладки: скидка сдвигалась вверх на угол кнопки и
теперь наезжала на пунктирную линию над ценой */
.pick-right .pick-badge{
position:static;margin:0 4px 0 0;align-self:auto;justify-self:auto;
box-shadow:none;border:0;font-size:11.5px;
}
.pick-right{padding-top:12px;}
}
/* «Сравнить» переехало в торец юнита: правый блок теперь только цена и кнопка */
.rk-vent{position:relative;}
.pick-compare--rk{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;}
.pick-compare--rk span{width:18px;height:18px;border-radius:5px;background:var(--card);}
.rk-vent b{bottom:9px;}
@media (min-width:901px){
/* без третьей строки правый блок короче — карточка ниже */
.pick-row{padding:10px 18px 10px 0;}
.pick-right{gap:9px;}
}
@media (max-width:900px){
.pick-compare--rk{display:none;}
}
/* скидка выравнивается по середине суммы, а не по базовой линии:
рядом с крупной ценой она иначе кажется просевшей вниз */
.pick-price .pick-badge{align-self:center;position:relative;top:-1px;}
/* ── левый торец юнита: читаемый чекбокс вместо теряющегося квадратика ───── */
.rk-vent{
background:
radial-gradient(circle at center,rgba(43,54,72,.13) 1.2px,transparent 1.6px) 0 0/8px 8px,
linear-gradient(180deg,var(--tint-strong),var(--tint));
transition:background .18s ease;
}
.pick-row:hover .rk-vent{
background:
radial-gradient(circle at center,rgba(122,151,87,.28) 1.3px,transparent 1.7px) 0 0/8px 8px,
linear-gradient(180deg,var(--tint-strong),var(--tint));
}
/* чекбокс — белая «кнопка» с рамкой и тенью: на перфорации он читается */
.pick-compare--rk span{
width:22px;height:22px;border-radius:6px;background:var(--card);
border:1.5px solid var(--line);box-shadow:0 1px 3px rgba(43,54,72,.14);
transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.pick-compare--rk:hover span{border-color:var(--accent);box-shadow:0 2px 7px rgba(122,151,87,.3);}
.pick-compare--rk input:checked + span{
background:var(--accent);border-color:var(--accent);
box-shadow:0 2px 8px rgba(122,151,87,.45);
}
/* номер юнита — приглушённее, чтобы не спорил с чекбоксом */
.rk-vent b{color:var(--dim);opacity:.75;}
@media (max-width:900px){
/* Фильтр на телефоне: кнопки одинаковой ширины в ровной сетке — вразнобой
они читались хуже, чем сами значения. Подгруппа типов растворяется,
чтобы её кнопки попали в ту же сетку. */
.pick-chips,.pick-chips--cc{
/* auto-fit, а не auto-fill: пустые треки схлопываются и кнопки
растягиваются на всю ширину ряда */
display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;
}
.pick-chips__sub{display:contents;}
.pick-chips__sep{display:none;}
.pchip span{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;padding:9px 6px;text-align:center;font-size:13px;
}
.pchip span img{flex:none;}
}
/* ── торец: чекбокс не мозолит глаз ──────────────────────────────────────
Постоянно видимый белый квадрат спорил с перфорацией и номером юнита.
Теперь он проявляется при наведении на юнит и остаётся видимым, если
тариф отмечен для сравнения. Подпись убрана — она наезжала на номер. */
.pick-compare--rk{opacity:0;transition:opacity .15s ease;}
.pick-row:hover .pick-compare--rk{opacity:1;}
.pick-compare--rk:has(input:checked){opacity:1;}
.pick-compare--rk::after{content:none;}
.pick-compare--rk span{
width:19px;height:19px;border-radius:5px;
border:1.5px solid var(--line);box-shadow:none;background:var(--card);
}
.pick-compare--rk:hover span{border-color:var(--accent);box-shadow:0 1px 4px rgba(122,151,87,.25);}
@media (max-width:900px){
/* «.pick-chips__sub.is-open{display:inline-flex}» специфичнее и запирал
подтипы в одну колонку сетки — перебиваем той же специфичностью */
.pick-chips__sub.is-open{display:contents;}
.pick-chips .pchip{min-width:0;}
.pchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;}
}
/* при наведении на юнит чекбокс не просто проявляется, а читается как
активный элемент: акцентная рамка, белая подложка, лёгкий подъём */
.pick-compare--rk{transform:translate(-50%,-50%) scale(.9);transition:opacity .15s ease,transform .15s ease;}
.pick-row:hover .pick-compare--rk,.pick-compare--rk:has(input:checked){transform:translate(-50%,-50%) scale(1);}
.pick-row:hover .pick-compare--rk span{
width:21px;height:21px;border-color:var(--accent);
box-shadow:0 2px 8px rgba(122,151,87,.35);
}
.pick-compare--rk:hover span{
border-color:var(--accent-dark);
box-shadow:0 3px 12px rgba(122,151,87,.5);
}
.pick-compare--rk input:checked + span{
background:var(--accent);border-color:var(--accent);
box-shadow:0 3px 10px rgba(122,151,87,.5);
}
/* ── отметка юнита вместо «приклеенного» чекбокса ────────────────────────
Кликабельна вся середина торца. В покое ничего не видно, при наведении
проступает круглая отметка в стиле решётки, отмеченный юнит — зелёный
кружок с галочкой и подкрашенный торец. */
.pick-compare--rk{
position:absolute;inset:26px 0 26px 0;left:0;top:26px;transform:none;
width:100%;height:auto;display:flex;align-items:center;justify-content:center;
opacity:1;cursor:pointer;
}
.pick-compare--rk span{
width:26px;height:26px;border-radius:50%;
border:1.5px dashed rgba(43,54,72,.28);background:rgba(255,255,255,.55);
box-shadow:none;opacity:0;transform:scale(.85);
transition:opacity .16s ease,transform .16s ease,background .16s ease,border-color .16s ease;
background-repeat:no-repeat;background-position:center;background-size:13px;
}
.pick-row:hover .pick-compare--rk span{opacity:1;transform:scale(1);border-color:var(--accent);}
.pick-compare--rk:hover span{background-color:#fff;border-style:solid;box-shadow:0 2px 9px rgba(122,151,87,.35);}
.pick-compare--rk input:checked + span{
opacity:1;transform:scale(1);border-style:solid;
background-color:var(--accent);border-color:var(--accent);
box-shadow:0 2px 9px rgba(122,151,87,.45);
background-image:url('data:image/svg+xml;utf8,');
}
/* отмеченный юнит подсвечивает свой торец целиком */
.pick-row:has(.pick-compare--rk input:checked) .rk-vent{
background:
radial-gradient(circle at center,rgba(122,151,87,.42) 1.3px,transparent 1.7px) 0 0/8px 8px,
linear-gradient(180deg,var(--tint-strong),var(--tint));
}
/* ── сравнение вернулось в правый блок, в строку с ценой ─────────────────
Все прежние правила для чекбокса в торце отменяются. */
.pick-compare--rk{
position:static;inset:auto;transform:none;width:auto;height:auto;
display:inline-flex;align-items:center;opacity:1;
}
.pick-compare--rk span{
width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);
background:var(--card);box-shadow:none;opacity:1;transform:none;
background-repeat:no-repeat;background-position:center;background-size:12px;
}
.pick-compare--rk:hover span{border-color:var(--accent);box-shadow:0 1px 5px rgba(122,151,87,.28);}
.pick-compare--rk input:checked + span{
background-color:var(--accent);border-color:var(--accent);box-shadow:none;
background-image:url('data:image/svg+xml;utf8,');
}
.pick-row:has(.pick-compare--rk input:checked) .rk-vent{background:
radial-gradient(circle at center,rgba(122,151,87,.42) 1.3px,transparent 1.7px) 0 0/8px 8px,
linear-gradient(180deg,var(--tint-strong),var(--tint));}
@media (min-width:901px){
/* строка «чекбокс + цена», под ней кнопка во всю ширину — высота прежняя */
.pick-right{
display:grid;grid-template-columns:auto minmax(0,1fr);
align-items:center;gap:8px 10px;
}
.pick-right .pick-compare--rk{grid-column:1;grid-row:1;}
.pick-right .pick-price{grid-column:2;grid-row:1;justify-content:flex-end;}
.pick-right .btn{grid-column:1 / -1;grid-row:2;width:100%;}
}
/* сравнение стоит перед названием: не влияет ни на высоту карточки,
ни на правый блок; на телефоне скрыто вместе с остальным сравнением */
.pick-title .pick-compare--rk{flex:none;margin-right:2px;}
.pick-title .pick-compare--rk span{width:17px;height:17px;border-radius:5px;}
@media (min-width:901px){
.pick-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.pick-right .pick-price{justify-content:flex-end;}
.pick-right .btn{width:100%;}
}
@media (max-width:900px){
.pick-title .pick-compare--rk{display:none;}
}
/* остатки прежней версии увеличивали чекбокс при наведении на юнит —
размер фиксированный, меняется только цвет рамки */
.pick-row:hover .pick-title .pick-compare--rk span,
.pick-title .pick-compare--rk:hover span{
width:17px;height:17px;transform:none;box-shadow:none;
}
.pick-title .pick-compare--rk:hover span{border-color:var(--accent);}
/* чекбокс выравнивается по середине строки названия, а не по её верху */
.pick-title .pick-compare--rk{align-self:center;}
.pick-title .pick-compare--rk span{display:block;position:relative;top:0;}
/* окончательно: никаких масштабирований и смены размера у чекбокса сравнения —
ни при наведении на юнит, ни при наведении на него самого */
.pick-compare--rk,
.pick-row:hover .pick-compare--rk,
.pick-compare--rk:has(input:checked){transform:none;}
.pick-compare--rk span,
.pick-row:hover .pick-compare--rk span,
.pick-compare--rk:hover span,
.pick-compare--rk input:checked + span{
width:17px;height:17px;transform:none;transition:border-color .15s ease,background-color .15s ease;
}
/* наведение на карточку чекбокса не касается: он реагирует только на курсор
над самим собой */
.pick-row:hover .pick-compare--rk span{
border-color:var(--line);box-shadow:none;background-color:var(--card);
}
.pick-row:hover .pick-compare--rk input:checked + span{
border-color:var(--accent);background-color:var(--accent);
}
.pick-compare--rk:hover span{border-color:var(--accent);}
.pick-compare--rk input:checked + span,
.pick-compare--rk:hover input:checked + span{border-color:var(--accent);background-color:var(--accent);}
/* центр строки чуть ниже оптической середины заглавных букв — поднимаем
чекбокс на пиксель, чтобы он читался ровно по линии с названием */
.pick-title .pick-compare--rk{position:relative;top:-1px;}
/* ==========================================================================
Каталог: сортировка, экономия, подсветка совпадений, плавное скрытие.
========================================================================== */
/* панель сортировки под шапкой фильтра */
.pick-sort{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-2px 0 14px;}
.pick-sort__label{
font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-right:4px;
}
.pick-sort button{
font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px;
transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.pick-sort button:hover{color:var(--accent-dark);border-color:var(--accent);}
.pick-sort button.is-on{background:var(--accent);border-color:var(--accent);color:#fff;}
/* экономия в деньгах под ценой */
.pick-save{
display:block;font-size:11.5px;font-weight:600;color:#a4691d;
text-align:right;margin-top:-2px;white-space:nowrap;
}
/* пояснение под кнопкой «Уточняйте!» */
.pick-asknote{
display:block;max-width:190px;font-size:11px;line-height:1.35;color:var(--dim);text-align:right;
}
/* плашка, по которой машина прошла фильтр */
.pcC--hit{
border-color:var(--accent);
background:linear-gradient(180deg,var(--card),var(--tint));
box-shadow:0 0 0 1px rgba(122,151,87,.25);
}
.pcC--hit .pcC-ic{color:var(--accent-darker);}
.pick-logo.is-hit{border-color:var(--accent);box-shadow:0 0 0 1px rgba(122,151,87,.25);}
/* строки уходят и приходят плавно, а не скачком */
.pick-row{transition:opacity .18s ease,transform .18s ease,border-color .2s ease,box-shadow .2s ease;}
.pick-row[hidden]{opacity:0;}
@media (max-width:900px){
.pick-sort{margin:0 0 12px;}
.pick-sort button{font-size:12.5px;padding:6px 11px;}
.pick-save,.pick-asknote{text-align:center;width:100%;max-width:none;}
}