/* Шрифты подключены -ами в каждой страницы (@import добавлял
лишний последовательный запрос уже после разбора этого файла). */
/* ==========================================================================
Irwin Casino PL — "Brass Atelier"
indigo-brass on paper · strips archetype · glass surfaces · sharp 2px
========================================================================== */
:root{
--bg-main:#F4F3EF;
/* alt-полоса заметно темнее main: раньше разница была 1.06:1 и чередование
секций не читалось, а карточки на alt-фоне совпадали с ним один-в-один */
--bg-alt:#EAE8E0;
--bg-card:#FBFAF7;
--accent:#B8892F; /* заливки, линейки, декор */
--accent-text:#7A5A14; /* тот же акцент для ТЕКСТА: 5.7:1 на бумаге */
--accent-btn:#8A6318; /* заливка кнопки: белый текст даёт 5.4:1 */
--accent-2:#3A3F72;
--text-main:#16171C;
--text-muted:#63677A;
--border:rgba(58,63,114,0.28);
--glass:rgba(251,250,247,0.88);
--glass-deep:rgba(251,250,247,0.95);
--brass-line:rgba(184,137,47,0.55);
--brass-soft:rgba(184,137,47,0.12);
--indigo-soft:rgba(58,63,114,0.06);
--wrap:1280px;
--gutter:clamp(1.1rem,4vw,2.25rem);
--rail:0px;
--measure:68ch;
--r:2px;
--r-lg:2px;
--gap-xs:.5rem;
--gap-sm:.9rem;
--gap-md:1.6rem;
--gap-lg:2.6rem;
--section-pad:clamp(2.5rem,7.5vw,6.5rem);
--font-head:'Space Grotesk','Segoe UI',Arial,sans-serif;
--font-body:'Source Serif 4',Georgia,'Times New Roman',serif;
--font-util:'Space Grotesk','Segoe UI',Arial,sans-serif;
--header-h:74px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
padding-inline-start:var(--rail);
overflow-x:hidden;
background:var(--bg-main);
color:var(--text-main);
font-family:var(--font-body);
font-size:clamp(1rem,.97rem + .2vw,1.075rem);
line-height:1.72;
/* было `anywhere` — рвало слова посреди в узких колонках таблиц и панелей */
overflow-wrap:break-word;
hyphens:auto;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
font-family:var(--font-head);
font-weight:600;
line-height:1.14;
letter-spacing:-.015em;
margin:0 0 .6em;
text-wrap:balance;
}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.35rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.25rem)}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.5rem)}
h4{font-size:1.06rem}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--accent-2);text-decoration:none;text-underline-offset:.22em}
/* было var(--accent): при наведении контраст падал с 8.9:1 до 2.8:1 */
a:hover{color:var(--accent-text);text-decoration:underline}
:focus-visible{
outline:2px solid var(--accent-2);
outline-offset:3px;
}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--border);margin-block:var(--gap-md)}
strong,b{font-weight:600}
small{font-size:.86rem}
/* --------------------------------------------------------------- layout */
.icp-container{
width:100%;
max-width:var(--wrap);
margin-inline:auto;
padding-inline:var(--gutter);
}
/* strips archetype: full-bleed bands, container holds the measure */
.icp-section{
padding-block:var(--section-pad);
background:var(--bg-main);
position:relative;
}
.icp-section--alt{background:var(--bg-alt);border-block:1px solid var(--border)}
.icp-section--tint{background:linear-gradient(180deg,var(--indigo-soft),transparent 70%),var(--bg-main)}
.icp-section > .icp-container{
display:flex;
flex-direction:column;
gap:var(--gap-lg);
}
.icp-section > .icp-container > *{min-width:0}
.icp-stack{display:flex;flex-direction:column;gap:var(--gap-sm)}
/* gap-контейнеры: собственные margin детей складывались с gap и ритм плавал
(eyebrow→h2 20px, h2→p 35px, p→p 32px внутри одного .icp-stack) */
.icp-stack > *,
.icp-hero__content > *,
.icp-cta__inner > *,
.icp-footer__brand > *,
.icp-panel > *,
.icp-verdict > *,
.icp-methodology > *{margin-block:0}
/* мера строки: без неё проза шла на все 1208px ≈ 145 знаков в строке */
.icp-stack > p,
.icp-overview p,
.icp-overview li,
.icp-legal p,
.icp-legal li,
.icp-hero__sub,
.icp-cta p,
.icp-section > .icp-container > p{max-width:var(--measure)}
/* ----------------------------------------------------- eyebrow / labels */
.icp-eyebrow{
font-family:var(--font-util);
font-size:.82rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-text);
margin:0;
display:flex;
align-items:center;
gap:.55rem;
}
.icp-eyebrow::before{
content:"";
width:22px;
height:2px;
background:var(--accent);
flex-shrink:0;
}
.icp-note{
font-family:var(--font-util);
font-size:.85rem;
line-height:1.6;
color:var(--text-muted);
max-width:var(--measure);
}
.icp-badge{
display:inline-flex;
align-items:center;
gap:.4rem;
font-family:var(--font-util);
font-size:.74rem;
font-weight:600;
letter-spacing:.09em;
text-transform:uppercase;
padding:.3rem .6rem;
border:1px solid var(--border);
border-radius:var(--r);
color:var(--accent-2);
background:var(--brass-soft);
}
.icp-badge--age{border-color:var(--brass-line);color:var(--accent-text)}
/* ------------------------------------------------------------- buttons */
.icp-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
font-family:var(--font-util);
font-size:.92rem;
font-weight:600;
letter-spacing:.02em;
line-height:1.1;
padding:.85rem 1.5rem;
border-radius:var(--r);
border:1px solid var(--accent-btn);
background:var(--accent-btn);
color:#fff;
text-decoration:none;
cursor:pointer;
transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.icp-btn:hover{
background:#6E4E12;
border-color:#6E4E12;
color:#fff;
text-decoration:none;
transform:translateY(-1px);
}
.icp-btn--outline{
background:transparent;
border-color:var(--accent-text);
color:var(--accent-text);
}
.icp-btn--outline:hover{
background:var(--brass-soft);
color:#6E4E12;
}
.icp-actions{
display:flex;
flex-wrap:wrap;
gap:var(--gap-sm);
align-items:center;
}
/* -------------------------------------------------------------- icons */
.icp-icon{
width:1.5em;
height:1.5em;
display:inline-block;
vertical-align:middle;
flex-shrink:0;
stroke:currentColor;
fill:none;
color:var(--accent-text);
}
/* -------------------------------------------------------------- header */
.icp-header{
position:sticky;
top:0;
z-index:900;
background:var(--glass);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid var(--border);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icp-header::after{
content:"";
position:absolute;
left:0;right:0;bottom:-1px;
height:1px;
background:linear-gradient(90deg,var(--brass-line),rgba(184,137,47,0) 60%);
}
.icp-header__bar{
max-width:var(--wrap);
margin-inline:auto;
padding:.85rem var(--gutter);
display:flex;
align-items:center;
gap:.75rem;
min-height:var(--header-h);
}
.icp-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.icp-logo__img{
display:block;
height:40px;
width:auto;
max-width:200px;
object-fit:contain;
}
.icp-nav{margin-inline-start:auto}
.icp-nav__list{
display:flex;
align-items:center;
gap:clamp(.5rem,1.4vw,1.4rem);
list-style:none;
margin:0;
padding:0;
}
.icp-nav a:not(.icp-btn){
position:relative;
display:block;
font-family:var(--font-util);
font-size:.88rem;
font-weight:500;
/* было font-variant-caps:all-small-caps — у Space Grotesk нет реального smcp,
браузер синтезировал капитель высотой ~9px с истончёнными штрихами */
letter-spacing:.02em;
color:var(--text-main);
padding:.45rem .1rem;
text-decoration:none;
}
.icp-nav a:not(.icp-btn)::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:2px;
background:var(--accent);
transform:scaleX(0);
transform-origin:left;
transition:transform .2s ease;
}
.icp-nav a:not(.icp-btn):hover{color:var(--accent-2);text-decoration:none}
.icp-nav a:not(.icp-btn):hover::after,
.icp-nav a:not(.icp-btn)[aria-current="page"]::after{transform:scaleX(1)}
.icp-nav a:not(.icp-btn)[aria-current="page"]{color:var(--accent-2)}
.icp-header__cta{flex-shrink:0}
.icp-burger{
display:none;
flex-shrink:0;
width:44px;
height:44px;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
padding:0;
border:1px solid var(--border);
border-radius:var(--r);
background:var(--bg-alt);
cursor:pointer;
}
.icp-burger span{
display:block;
width:22px;
height:2px;
background:var(--accent-2);
transition:transform .2s ease,opacity .2s ease;
}
.icp-header.is-open .icp-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.icp-header.is-open .icp-burger span:nth-child(2){opacity:0}
.icp-header.is-open .icp-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* брейкпоинт поднят с 1023.98px: шесть пунктов меню («Logowanie i rejestracja»,
«Bonus bez depozytu») не помещались в строку на 1024–1150px и переносились
в две строки, раздувая шапку выше зашитых --header-h:74px */
@media (max-width:1149.98px){
.icp-burger{display:flex}
/* нав уходит из флекса (display:none), и его margin-inline-start:auto больше
не отталкивает CTA с бургером вправо — переносим auto на сам CTA */
.icp-header__cta{margin-inline-start:auto}
.icp-nav{
display:none;
position:absolute;
left:0;right:0;
top:100%;
margin:0;
background:var(--glass-deep);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border-top:1px solid var(--brass-line);
border-bottom:1px solid var(--border);
padding:.5rem var(--gutter) 1.1rem;
max-height:calc(100vh - var(--header-h));
overflow-y:auto;
}
.icp-header.is-open .icp-nav{display:flex}
.icp-nav__list{
flex-direction:column;
align-items:stretch;
gap:0;
width:100%;
}
.icp-nav__list li{border-bottom:1px solid var(--border)}
.icp-nav a:not(.icp-btn){padding:.85rem .2rem;font-size:.95rem}
.icp-nav a:not(.icp-btn)::after{display:none}
/* было .6rem/.8rem → высота 35px, ниже минимальной тач-цели 44px */
.icp-header__cta{padding:.8rem 1rem;font-size:.85rem;min-height:44px}
.icp-logo__img{height:auto;max-height:34px;max-width:min(38vw,132px)}
}
@media (max-width:400px){
.icp-header__bar{gap:.5rem;padding-inline:1rem}
.icp-header__cta{padding:.75rem .7rem;font-size:.78rem;letter-spacing:0}
}
/* ---------------------------------------------------------------- hero */
.icp-hero{position:relative;background:var(--bg-main)}
.icp-hero__img{
display:block;
width:100%;
height:auto;
max-height:70vh;
aspect-ratio:3/2;
object-fit:cover;
border-radius:var(--r);
border:1px solid var(--border);
}
.icp-hero__visual{
position:relative;
min-width:0;
}
.icp-hero__visual:not(:has(.icp-hero__img))::before{
content:"";
display:block;
aspect-ratio:3/2;
border-radius:var(--r);
border:1px solid var(--border);
background:
linear-gradient(140deg,rgba(58,63,114,.22),rgba(184,137,47,.28) 55%,rgba(251,250,247,.9)),
var(--bg-alt);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
/* HOME hero — split: text left, visual right */
.icp-hero--home{
padding-block:clamp(3rem,6vw,5.5rem);
border-bottom:1px solid var(--border);
background:
radial-gradient(120% 80% at 12% 0%,rgba(58,63,114,.08),transparent 60%),
var(--bg-main);
}
.icp-hero--home .icp-hero__inner{
display:grid;
grid-template-columns:1fr;
gap:var(--gap-lg);
align-items:center;
}
.icp-hero--home .icp-hero__inner > *{min-width:0}
.icp-hero--home .icp-hero__content{
display:flex;
flex-direction:column;
gap:var(--gap-sm);
text-align:left;
}
.icp-hero--home h1{margin:0}
.icp-hero--home .icp-hero__sub{
font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
color:var(--text-muted);
margin:0;
max-width:var(--measure);
}
.icp-hero--home .icp-hero__actions{
display:flex;
flex-wrap:wrap;
gap:var(--gap-sm);
margin-top:.4rem;
}
@media (min-width:900px){
.icp-hero--home .icp-hero__inner{grid-template-columns:1.1fr .9fr}
}
/* INNER hero — compact page-header band */
.icp-hero--inner,
.icp-page-header{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
min-height:200px;
border-bottom:1px solid var(--border);
background:
linear-gradient(90deg,rgba(58,63,114,.10),rgba(184,137,47,.08) 70%,transparent),
var(--bg-alt);
}
.icp-hero--inner .icp-hero__inner,
.icp-page-header .icp-page-header__inner{
position:relative;
width:100%;
display:flex;
flex-direction:column;
gap:var(--gap-xs);
padding-block:2rem;
padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));
}
.icp-hero--inner h1,
.icp-page-header h1{
margin:0;
font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);
text-wrap:balance;
}
.icp-hero--inner .icp-hero__sub{margin:0;color:var(--text-muted);max-width:var(--measure)}
.icp-hero--inner .icp-hero__img{
position:absolute;
inset:0;
width:100%;
height:100%;
max-height:none;
aspect-ratio:auto;
object-fit:cover;
border:0;
border-radius:0;
z-index:0;
}
.icp-hero--inner:has(.icp-hero__img) .icp-hero__inner::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg,rgba(12,13,20,.92) 0%,rgba(12,13,20,.78) 50%,rgba(12,13,20,.56) 100%);
}
:where(.icp-hero--inner .icp-hero__inner > :not(.icp-hero__img)){position:relative;z-index:2}
/* .icp-note («Minimalna wpłata 50 zł. Wymóg obrotu x45… 18+») раньше не входил
в этот список и оставался --text-muted поверх затемнения rgba(12,13,20,.92) —
3.2:1 при 13px на пяти страницах */
.icp-hero--inner:has(.icp-hero__img) h1,
.icp-hero--inner:has(.icp-hero__img) .icp-hero__sub,
.icp-hero--inner:has(.icp-hero__img) .icp-note,
.icp-hero--inner:has(.icp-hero__img) p,
.icp-hero--inner:has(.icp-hero__img) .icp-breadcrumb,
.icp-hero--inner:has(.icp-hero__img) .icp-breadcrumb a,
.icp-hero--inner:has(.icp-hero__img) .icp-breadcrumb li{color:#F7F6F2}
.icp-hero--inner:has(.icp-hero__img) .icp-breadcrumb a:hover{color:#E7C87E}
/* на тёмной подложке тёмное золото --accent-text даёт 2.8:1 — возвращаем светлое */
.icp-hero--inner:has(.icp-hero__img) .icp-eyebrow{color:#E7C87E}
.icp-hero--inner:has(.icp-hero__img) .icp-eyebrow::before{background:#E7C87E}
/* --------------------------------------------------------- breadcrumb */
.icp-breadcrumb{
font-family:var(--font-util);
font-size:.78rem;
letter-spacing:.05em;
color:var(--text-muted);
}
.icp-breadcrumb ol{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:.4rem;
margin:0;
padding:0;
}
.icp-breadcrumb li:not(:last-child)::after{content:"/";margin-inline-start:.4rem;color:var(--accent)}
.icp-breadcrumb a{color:var(--text-muted);display:inline-block;padding-block:.35rem}
.icp-breadcrumb a:hover{color:var(--accent-text)}
/* ---------------------------------------------------------- stats-bar */
/* STATS_PATTERN = strip */
.icp-stats{
display:flex;
flex-wrap:wrap;
align-items:stretch;
gap:0;
border-block:1px solid var(--border);
padding-block:1.2rem;
}
.icp-stats__item{
flex:1 1 170px;
min-width:0;
padding:.35rem clamp(.9rem,2.2vw,1.8rem);
border-inline-start:1px solid var(--border);
}
.icp-stats__item:first-child{border-inline-start:0;padding-inline-start:0}
/* полоса была прижата влево (первый элемент заподлицо) и отбита справа */
.icp-stats__item:last-child{padding-inline-end:0}
/* при переносе строк :first-child сбрасывал бордер только у первого в DOM,
а не у первого в строке: элементы 2–4 уезжали с чёрточкой и отступом,
первый стоял заподлицо, а gap:0 склеивал строки между собой */
@media (max-width:767.98px){
.icp-stats{
display:grid;
grid-template-columns:1fr;
padding-block:0;
}
.icp-stats__item{
padding:.9rem 0;
border-inline-start:0;
border-block-end:1px solid var(--border);
}
.icp-stats__item:last-child{border-block-end:0}
}
.icp-stats__value{
display:block;
font-family:var(--font-util);
font-size:clamp(1.4rem,1.1rem + 1.1vw,1.95rem);
font-weight:700;
line-height:1.05;
color:var(--accent-2);
letter-spacing:-.02em;
}
.icp-stats__label{
display:block;
margin-top:.35rem;
font-family:var(--font-util);
font-size:.8rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-muted);
}
/* --------------------------------------------------- feature-cards (grid) */
.icp-features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
gap:var(--gap-md);
}
.icp-features > *{min-width:0}
.icp-feature{
display:flex;
flex-direction:column;
gap:.7rem;
padding:clamp(1.3rem,2.4vw,1.9rem);
background:var(--bg-card);
border:1px solid var(--border);
border-top:1px solid var(--brass-line);
border-radius:var(--r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(22,23,28,.07);
}
.icp-feature__icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:1px solid var(--brass-line);
border-radius:var(--r);
background:var(--brass-soft);
color:var(--accent-text);
flex-shrink:0;
}
.icp-feature h3{margin:0;font-size:1.1rem}
.icp-feature p{margin:0;color:var(--text-muted);font-size:.97rem}
/* ---------------------------------------------------------- cards-grid */
.icp-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
gap:var(--gap-md);
}
.icp-cards > *{min-width:0}
.icp-card{
display:flex;
flex-direction:column;
gap:.7rem;
padding:clamp(1.3rem,2.4vw,1.8rem);
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(22,23,28,.07);
}
.icp-card__title,.icp-card h3{margin:0;font-size:1.08rem}
.icp-card p{margin:0;color:var(--text-muted);font-size:.97rem}
.icp-card--accent{border-top:2px solid var(--accent)}
/* auto-fit давал «сироту»: 5 карточек → 4 в ряд и 1 одинокая в четверть ширины
(главная), 5 «фич» на 768px → 2+2+1. Фиксируем число колонок и растягиваем
последний элемент, если он остаётся в ряду один. */
@media (min-width:640px){
.icp-cards,
.icp-features{grid-template-columns:repeat(2,minmax(0,1fr))}
.icp-cards > :last-child:nth-child(odd),
.icp-features > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:1024px){
.icp-cards,
.icp-features{grid-template-columns:repeat(3,minmax(0,1fr))}
.icp-cards > :last-child:nth-child(odd),
.icp-features > :last-child:nth-child(odd){grid-column:auto}
.icp-cards > :last-child:nth-child(3n+1),
.icp-features > :last-child:nth-child(3n+1){grid-column:span 2}
}
/* ------------------------------------------------------------- tables */
.icp-table-wrap{
overflow-x:auto;
overscroll-behavior-x:contain;
max-width:100%;
margin-block:1.5rem;
border:1px solid var(--border);
border-radius:var(--r);
background:var(--bg-card);
/* подсказка о горизонтальной прокрутке: на iOS/macOS скроллбар скрыт и
о том, что таблица уезжает вправо, узнать было неоткуда */
background-image:
linear-gradient(to right,var(--bg-card) 30%,rgba(251,250,247,0)),
linear-gradient(to right,rgba(251,250,247,0),var(--bg-card) 70%),
linear-gradient(to right,rgba(22,23,28,.16),rgba(22,23,28,0)),
linear-gradient(to left,rgba(22,23,28,.16),rgba(22,23,28,0));
background-position:0 0,100% 0,0 0,100% 0;
background-repeat:no-repeat;
background-size:36px 100%,36px 100%,14px 100%,14px 100%;
background-attachment:local,local,scroll,scroll;
}
.icp-table{
width:100%;
border-collapse:collapse;
font-family:var(--font-util);
font-size:.92rem;
}
.icp-table th,
.icp-table td{
padding:.85rem 1rem;
text-align:start;
border-bottom:1px solid var(--border);
vertical-align:top;
}
.icp-table th{
white-space:nowrap;
font-weight:600;
font-size:.76rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-2);
background:var(--indigo-soft);
border-bottom:1px solid var(--brass-line);
}
.icp-table tbody tr:nth-child(even){background:rgba(58,63,114,.03)}
.icp-table tbody tr:last-child td{border-bottom:0}
.icp-table td strong{color:var(--accent-2)}
.icp-bonus-table .icp-table td:first-child,
.icp-data-table .icp-table td:first-child{font-weight:600;color:var(--text-main)}
.icp-table__num{
font-family:var(--font-util);
font-weight:700;
color:var(--accent-text);
white-space:nowrap;
}
/* -------------------------------------------------------- numbered-list */
/* signature: outlined brass numerals bleeding off the strip's left edge */
.icp-numbered{
list-style:none;
counter-reset:icp-step;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:var(--gap-md);
}
.icp-numbered > li{
counter-increment:icp-step;
position:relative;
padding-inline-start:clamp(3.2rem,7vw,5.4rem);
min-height:3rem;
}
.icp-numbered > li::before{
content:counter(icp-step,decimal-leading-zero);
position:absolute;
inset-inline-start:calc(-1 * clamp(.4rem,1.6vw,1.4rem));
top:-.35em;
font-family:var(--font-util);
font-size:clamp(3rem,7vw,5.5rem);
font-weight:700;
line-height:1;
letter-spacing:-.04em;
color:transparent;
-webkit-text-stroke:1px var(--accent-text);
opacity:.85;
pointer-events:none;
}
.icp-numbered > li h3{margin:0 0 .35rem}
.icp-numbered > li p{margin:0;color:var(--text-muted);max-width:var(--measure)}
/* на 320px цифра выносилась за контейнер и вставала в 11px от края экрана,
а текст начинался только с 51px — мера строки съедалась на 18% */
@media (max-width:479.98px){
.icp-numbered > li{padding-inline-start:2.6rem;min-height:0}
.icp-numbered > li::before{
inset-inline-start:0;
top:-.2em;
font-size:2.4rem;
}
}
/* ---------------------------------------------------------------- toc */
.icp-toc{
padding:clamp(1.2rem,2.4vw,1.7rem);
background:var(--glass);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border:1px solid var(--border);
border-top:1px solid var(--brass-line);
border-radius:var(--r);
}
.icp-toc__title{
font-family:var(--font-util);
font-size:.82rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-text);
margin:0 0 .8rem;
}
.icp-toc ol,.icp-toc ul{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
gap:.1rem 1.6rem;
}
.icp-toc li{min-width:0}
/* было inline: тач-цель ≈25px при зазоре 7px — на 320px семь ссылок подряд
с шагом ~32px, мимо которых легко промахнуться пальцем */
.icp-toc a{
display:block;
padding-block:.6rem;
font-family:var(--font-util);
font-size:.9rem;
color:var(--text-main);
border-bottom:1px solid transparent;
}
.icp-toc a:hover{color:var(--accent-2);border-bottom-color:var(--accent);text-decoration:none}
/* ------------------------------------------------------------ overview */
.icp-overview p{max-width:none}
.icp-overview ul,
.icp-overview ol,
.icp-legal ul,
.icp-legal ol{padding-inline-start:1.15rem;margin:0 0 1.05em}
.icp-overview li,
.icp-legal li{margin-bottom:.45rem}
.icp-overview li::marker{color:var(--accent-text)}
/* ------------------------------------------------------- categories-bar */
.icp-cats{
display:flex;
flex-wrap:wrap;
gap:.6rem;
margin:0;
padding:0;
list-style:none;
}
.icp-pill{
display:inline-flex;
align-items:center;
gap:.45rem;
padding:.5rem .9rem;
font-family:var(--font-util);
font-size:.84rem;
letter-spacing:.03em;
color:var(--text-main);
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
text-decoration:none;
}
/* hover только там, где есть курсор: категории — это , а не ссылки,
и подсветка при тапе обещала переход, которого не будет */
@media (hover:hover){
a.icp-pill:hover{
border-color:var(--accent);
background:var(--brass-soft);
color:var(--accent-2);
text-decoration:none;
}
}
.icp-pill.is-active{
border-color:var(--accent);
background:var(--brass-soft);
color:var(--accent-2);
text-decoration:none;
}
/* ------------------------------------------------------------ rtp-grid */
.icp-rtp{
display:grid;
gap:clamp(.6rem,1.5vw,1rem);
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){.icp-rtp{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.icp-rtp{grid-template-columns:repeat(4,minmax(0,1fr))}}
.icp-rtp-item{
position:relative;
overflow:hidden;
min-width:0;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
}
.icp-rtp-item__thumb{
display:block;
aspect-ratio:3/2;
position:relative;
background:linear-gradient(135deg,rgba(58,63,114,.22),rgba(184,137,47,.3));
}
.icp-rtp-item__thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.icp-rtp-item__name{
display:block;
padding:.6rem .7rem;
font-family:var(--font-util);
font-size:.84rem;
font-weight:600;
color:var(--text-main);
border-top:1px solid var(--border);
}
.icp-rtp-item__meta{
display:block;
padding:0 .7rem .6rem;
font-family:var(--font-util);
font-size:.76rem;
color:var(--text-muted);
}
.icp-rtp-tooltip{
position:absolute;
bottom:0;
left:0;
right:0;
opacity:0;
transition:opacity .2s;
padding:.55rem .7rem;
font-family:var(--font-util);
font-size:.78rem;
color:#F7F6F2;
background:rgba(12,13,20,.88);
}
.icp-rtp-item:hover .icp-rtp-tooltip,
.icp-rtp-item:focus-within .icp-rtp-tooltip{opacity:1}
/* ------------------------------------------------------------ payments */
.icp-payments-strip{
display:flex;
flex-wrap:wrap;
gap:.6rem;
list-style:none;
margin:0;
padding:0;
}
.icp-payments-strip li{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.55rem .9rem;
min-width:0;
font-family:var(--font-util);
font-size:.86rem;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icp-payments-strip .icp-icon{width:1.15em;height:1.15em;color:var(--accent-2)}
/* было white-space:nowrap — «Kryptowaluty (USDT, BTC, ETH)» держал 230px из 285
доступных на 320px, а колонка «Uwagi» схлопывалась до полусотни пикселей */
.icp-payments .icp-table td:first-child{min-width:9ch}
/* ------------------------------------------------------------ two-cols */
.icp-two-cols{
display:grid;
grid-template-columns:1fr;
gap:var(--gap-lg);
align-items:start;
}
.icp-two-cols > *{min-width:0}
@media (min-width:900px){
.icp-two-cols{grid-template-columns:1.35fr .9fr}
}
/* -------------------------------------------------------- content panel */
.icp-panel{
display:flex;
flex-direction:column;
gap:var(--gap-sm);
padding:clamp(1.3rem,2.6vw,1.9rem);
background:var(--glass);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border:1px solid var(--border);
border-top:1px solid var(--brass-line);
border-radius:var(--r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icp-panel__title{
margin:0;
font-family:var(--font-util);
font-size:.85rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-text);
}
.icp-facts{margin:0;display:flex;flex-direction:column}
.icp-facts__row{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:.4rem 1rem;
padding:.65rem 0;
border-bottom:1px solid var(--border);
}
.icp-facts__row:last-child{border-bottom:0}
.icp-facts dt{
font-family:var(--font-util);
font-size:.8rem;
letter-spacing:.05em;
color:var(--text-muted);
margin:0;
}
.icp-facts dd{
margin:0;
font-family:var(--font-util);
font-size:.9rem;
font-weight:600;
color:var(--text-main);
text-align:end;
}
.icp-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.icp-checklist li{
display:flex;
align-items:flex-start;
gap:.6rem;
font-size:.95rem;
min-width:0;
}
.icp-checklist .icp-icon{width:1.2em;height:1.2em;margin-top:.25em;color:var(--accent-text)}
/* ---------------------------------------------------------- pros-cons */
.icp-proscons{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
gap:var(--gap-md);
}
.icp-proscons > *{min-width:0}
.icp-pros,.icp-cons{
padding:clamp(1.2rem,2.4vw,1.7rem);
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
}
.icp-pros{border-top:2px solid var(--accent)}
.icp-cons{border-top:2px solid var(--accent-2)}
.icp-pros h3,.icp-cons h3{
margin:0 0 .8rem;
font-family:var(--font-util);
font-size:.85rem;
letter-spacing:.1em;
text-transform:uppercase;
}
.icp-pros h3{color:var(--accent-text)}
.icp-cons h3{color:var(--accent-2)}
.icp-pros ul,.icp-cons ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.icp-pros li,.icp-cons li{position:relative;padding-inline-start:1.2rem;font-size:.96rem}
.icp-pros li::before,.icp-cons li::before{
content:"";
position:absolute;
inset-inline-start:0;
top:.62em;
width:.5rem;
height:.5rem;
}
.icp-pros li::before{background:var(--accent)}
.icp-cons li::before{background:transparent;border:1px solid var(--accent-2)}
/* -------------------------------------------------------- verdict-box */
.icp-verdict{
display:flex;
flex-direction:column;
gap:var(--gap-sm);
padding:clamp(1.4rem,2.8vw,2rem);
background:var(--bg-card);
border:1px solid var(--border);
border-inline-start:3px solid var(--accent);
border-radius:var(--r);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icp-verdict h2,.icp-verdict h3{margin:0}
.icp-verdict p{margin:0}
/* -------------------------------------------------------- quote-cards */
.icp-quotes{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
gap:var(--gap-md);
}
.icp-quotes > *{min-width:0}
.icp-quote{
position:relative;
margin:0;
padding:clamp(1.3rem,2.5vw,1.8rem);
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
}
.icp-quote::before{
content:"„";
display:block;
font-family:var(--font-util);
font-size:2.4rem;
line-height:.6;
color:var(--accent);
margin-bottom:.5rem;
}
.icp-quote p{margin:0 0 .8rem;font-style:italic}
/* здесь в figcaption не имя автора, а опровержение на 15–20 слов: капслок
12.5px с трекингом делал самый смысловой фрагмент нечитаемым */
.icp-quote figcaption,
.icp-quote__author{
font-family:var(--font-util);
font-size:.92rem;
line-height:1.55;
letter-spacing:0;
color:var(--text-main);
}
/* -------------------------------------------------------- methodology */
.icp-methodology{
padding:clamp(1.4rem,2.8vw,2.1rem);
background:var(--glass);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border:1px solid var(--border);
border-top:1px solid var(--brass-line);
border-radius:var(--r);
display:flex;
flex-direction:column;
gap:var(--gap-sm);
}
.icp-methodology__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
gap:var(--gap-md);
}
.icp-methodology__grid > *{min-width:0}
.icp-methodology h3{margin:0 0 .3rem;font-size:1rem}
.icp-methodology p{margin:0;color:var(--text-muted);font-size:.94rem}
/* --------------------------------------------------------- quick-facts */
/* auto-fit давал 3 колонки при 4 плитках (примерно 580–790px), и две пустые
ячейки во второй строке показывали фон-разделитель контейнера как
тонированный прямоугольник на 2/3 ширины */
.icp-quick-facts{
display:grid;
grid-template-columns:1fr;
gap:1px;
background:var(--border);
border:1px solid var(--border);
border-radius:var(--r);
overflow:hidden;
}
@media (min-width:420px){.icp-quick-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.icp-quick-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.icp-quick-facts > *{min-width:0}
.icp-quick-facts__item{
background:var(--bg-card);
padding:1.1rem 1.2rem;
display:flex;
flex-direction:column;
gap:.3rem;
}
.icp-quick-facts__label{
font-family:var(--font-util);
font-size:.8rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-muted);
}
.icp-quick-facts__value{
font-family:var(--font-util);
font-size:1.02rem;
font-weight:600;
color:var(--text-main);
}
/* ---------------------------------------------------------------- faq */
/* FAQ_PATTERN = boxed */
.icp-faq__list{display:flex;flex-direction:column;gap:.8rem}
.icp-faq details{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--r);
padding:0 clamp(1rem,2vw,1.4rem);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icp-faq details[open]{border-top:1px solid var(--brass-line)}
.icp-faq summary{
cursor:pointer;
padding:1rem 0;
font-weight:600;
list-style:none;
font-family:var(--font-util);
font-size:1rem;
color:var(--text-main);
display:flex;
align-items:baseline;
}
.icp-faq summary::-webkit-details-marker{display:none}
.icp-faq summary::before{
content:'+';
margin-right:.5rem;
transition:transform .2s;
color:var(--accent-text);
font-weight:700;
}
.icp-faq details[open] summary::before{content:'−'}
.icp-faq details > :not(summary){
padding:.5rem 0 1rem;
color:var(--text-muted);
max-width:var(--measure);
}
.icp-faq details > :not(summary) p{margin:0 0 .8em}
/* ---------------------------------------------------------- cta-block */
/* полоса отличалась от соседних секций на ~3% и не читалась как точка
конверсии — усиливаем заливку и оставляем брасс-линейки */
.icp-cta{
padding-block:var(--section-pad);
background:
linear-gradient(120deg,rgba(58,63,114,.16),rgba(184,137,47,.26)),
var(--bg-alt);
border-block:2px solid var(--brass-line);
}
.icp-cta__inner{
display:flex;
flex-direction:column;
gap:var(--gap-sm);
align-items:flex-start;
text-align:left;
}
.icp-cta h2{margin:0}
.icp-cta p{margin:0;color:var(--text-muted);max-width:var(--measure)}
.icp-cta .icp-actions{margin-top:.4rem}
.icp-cta--center .icp-cta__inner{align-items:center;text-align:center}
.icp-cta--center .icp-actions{justify-content:center}
.icp-cta__fine{
font-family:var(--font-util);
font-size:.8rem;
color:var(--text-muted);
}
/* -------------------------------------------------------- legal-body */
.icp-legal{counter-reset:icp-legal}
.icp-legal > section,
.icp-legal__block{margin-bottom:var(--gap-lg)}
.icp-legal h2{
counter-increment:icp-legal;
display:flex;
gap:.7rem;
align-items:baseline;
font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);
padding-top:1.2rem;
border-top:1px solid var(--border);
}
.icp-legal h2::before{
content:counter(icp-legal);
font-family:var(--font-util);
font-size:.9em;
color:transparent;
-webkit-text-stroke:1px var(--accent-text);
font-weight:700;
flex-shrink:0;
}
/* первый блок шёл сразу под hero и получал лишнюю линейку сверху */
.icp-legal > :first-child h2{border-top:0;padding-top:0}
.icp-legal h3{margin-top:1.6rem}
.icp-legal p,
.icp-legal li{color:var(--text-main)}
.icp-legal address{font-style:normal;color:var(--text-muted)}
/* ------------------------------------------------------------- footer */
.icp-footer{
background:var(--bg-alt);
border-top:1px solid var(--brass-line);
color:var(--text-main);
padding-top:clamp(2.6rem,5vw,4rem);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icp-footer__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
gap:var(--gap-lg);
padding-bottom:var(--gap-lg);
}
.icp-footer__grid > *{min-width:0}
.icp-footer__brand{
display:flex;
flex-direction:column;
gap:.85rem;
}
.icp-footer__about{font-size:.94rem;color:var(--text-muted);margin:0}
.icp-footer__col h3{
margin:0 0 .6rem;
font-family:var(--font-util);
font-size:.82rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--accent-text);
}
.icp-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
/* было inline при gap .55rem: тач-цель ≈25px, зазор ≈9px */
.icp-footer__col a{
display:block;
padding-block:.6rem;
font-family:var(--font-util);
font-size:.9rem;
color:var(--text-main);
}
.icp-footer__col a:hover{color:var(--accent-text);text-decoration:none}
.icp-footer__legal{
display:flex;
flex-direction:column;
gap:.9rem;
padding-block:var(--gap-md);
border-top:1px solid var(--border);
}
.icp-footer__legal p{
margin:0;
font-family:var(--font-util);
font-size:.81rem;
line-height:1.65;
color:var(--text-muted);
}
.icp-footer__flags{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.icp-footer__bottom{
padding-block:1.2rem;
border-top:1px solid var(--border);
font-family:var(--font-util);
font-size:.79rem;
letter-spacing:.04em;
color:var(--text-muted);
display:flex;
flex-wrap:wrap;
gap:.5rem 1.2rem;
justify-content:space-between;
align-items:center;
}
/* --------------------------------------------------------- utilities */
.icp-visually-hidden{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}
/* skip-link: утилита была объявлена, но не использовалась — клавиатурному
пользователю приходилось протабывать всю шапку на каждой странице */
.icp-skip-link:focus{
position:fixed;
top:.5rem;
inset-inline-start:.5rem;
z-index:1000;
width:auto;height:auto;
margin:0;
padding:.7rem 1.1rem;
clip:auto;
background:var(--bg-card);
border:2px solid var(--accent-2);
border-radius:var(--r);
color:var(--text-main);
font-family:var(--font-util);
font-size:.9rem;
}
/* стеклянные поверхности рассчитаны на backdrop-filter; где его нет,
шапка и мобильное меню просвечивали проезжающим контентом */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.icp-header{background:var(--bg-card)}
.icp-nav,
.icp-toc,
.icp-panel,
.icp-methodology{background:var(--bg-card)}
}
/* на 320px каждая из 14 секций главной давала 56px сверху и снизу —
112px пустоты между блоками */
@media (max-width:639.98px){
:root{--gap-lg:1.8rem;--gap-md:1.25rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.icp-btn:hover{transform:none}
}
/* sa-responsive-net */
table th{white-space:nowrap}
figure,blockquote,dl,dd,fieldset{margin:0}
/* sa-logo-chip */
.icp-footer .icp-logo__img{filter:none;background:transparent;padding:0}
.icp-footer .icp-footer__logo-chip{background:transparent;padding:0}
/* sa-logo-fit */
.icp-logo__img{object-fit:contain}
/* sa-ph-media */
.icp-page-header:has(.icp-hero__img){position:relative;overflow:hidden;isolation:isolate;min-height:clamp(200px,30vh,300px);display:flex;flex-direction:column;justify-content:center}
.icp-page-header:has(.icp-hero__img) .icp-hero__img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;margin:0;z-index:0}
.icp-page-header:has(.icp-hero__img)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,12,18,.72),rgba(10,12,18,.5))}
:where(.icp-page-header:has(.icp-hero__img)>:not(.icp-hero__img)){position:relative}
.icp-page-header:has(.icp-hero__img)>:not(.icp-hero__img){z-index:2}
.icp-page-header:has(.icp-hero__img),.icp-page-header:has(.icp-hero__img) h1,.icp-page-header:has(.icp-hero__img) a,.icp-page-header:has(.icp-hero__img) p,.icp-page-header:has(.icp-hero__img) li,.icp-page-header:has(.icp-hero__img) span{color:#fff}
/* sa-hero-media */
.icp-hero:has(>.icp-hero__img){position:relative;isolation:isolate}
.icp-hero:has(>.icp-hero__img)>.icp-hero__img{z-index:0}
.icp-hero:has(>.icp-hero__img)::after{z-index:1}
:where(.icp-hero:has(>.icp-hero__img)>:not(.icp-hero__img)){position:relative}
.icp-hero:has(>.icp-hero__img)>:not(.icp-hero__img){z-index:2}
/* sa-rhythm */
:where(.icp-table-wrap){margin-block:1.5rem}
:where(main) :where(ul,ol,table,.icp-table-wrap)+p{margin-block-start:1rem}
/* sa-slot-link */
.icp-rtp-item,.icp-rtp-item:hover,.icp-rtp-item:focus{color:inherit;text-decoration:none;cursor:pointer}
/* sa-rtp-touch */
.icp-rtp-item__thumb{display:block}
/* тултип переводится в поток и теряет тёмную подложку, но раньше не сбрасывался
color:#F7F6F2 из базового правила — белый текст на #FBFAF7 = 1.04:1, то есть
под каждым из 12 слотов на главной висели две строки пустоты */
@media (hover:none){.icp-rtp-item__thumb{aspect-ratio:auto;overflow:visible}.icp-rtp-item__thumb img{height:auto}.icp-rtp-tooltip{position:static;opacity:1;background:transparent;color:var(--text-muted);border-top:0;padding:.4rem .7rem .6rem;font-size:.78rem;line-height:1.35}.icp-rtp-item__name{padding-top:.35rem}.icp-rtp-item__meta{padding-bottom:0}}
/* sa-sticky-pad */