/* Шрифты подключены -ом в каждой страницы (preconnect + stylesheet): @import здесь создавал цепочку HTML→CSS→googleapis→gstatic и давал CLS на свопе. */ /* ============================================================ Pinco AZ — «Frosted Teal Rail» Teal-graphite glass, magenta accent, fixed left nav-rail ============================================================ */ :root{ --bg-main:#141a1e; --bg-card:#1b2429; --bg-rail:rgba(20,26,30,.72); --bg-bar:#f2f6f6; /* light surface for header/footer — LOGO_TONE=dark */ --bg-bar-2:#e6eded; --accent:#e0459b; --accent-on-light:#a82d70; /* акцент для СВЕТЛЫХ поверхностей: 5.9:1 (у --accent там 3.5:1) */ --accent-2:#2fd4c4; --text-main:#eef4f5; --text-muted:#93a6ad; --text-bar:#16232a; /* text on light bars */ --text-bar-muted:#4d6570; --border:rgba(146,224,216,.16); --border-bar:rgba(20,40,48,.14); --font-head:'Archivo','Archivo Condensed',system-ui,sans-serif; --font-body:'Source Sans 3',system-ui,-apple-system,Segoe UI,sans-serif; --wrap:1120px; --gutter:clamp(1rem,3vw,2rem); --rail-w:260px; --r-card:16px; --r-btn:14px; --r-chip:14px; --r-sm:10px; --sp-sec:clamp(3rem,6vw,4.75rem); --shadow-soft:0 10px 28px rgba(6,10,12,.42); --shadow-lift:0 12px 30px rgba(224,69,155,.18); --hairline:inset 0 1px 0 rgba(47,212,196,.22); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; padding-inline-start:var(--rail-w); background: radial-gradient(1100px 620px at 12% -8%,rgba(47,212,196,.10),transparent 62%), radial-gradient(900px 560px at 96% 8%,rgba(224,69,155,.09),transparent 60%), var(--bg-main); color:var(--text-main); font-family:var(--font-body); font-size:17px; line-height:1.68; overflow-x:hidden; } img{max-width:100%} a{color:var(--accent-2);text-decoration:none} a:hover{color:var(--accent)} p{overflow-wrap:break-word} :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; letter-spacing:-.015em; line-height:1.1; margin:0 0 .6em; text-wrap:balance; } h1{font-size:clamp(2rem,4.4vw,3.15rem)} h2{font-size:clamp(1.55rem,2.9vw,2.25rem)} h3{font-size:clamp(1.15rem,1.8vw,1.4rem)} h4{font-size:1.05rem} /* ---------- container / sections ---------- */ .pxc-container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .pxc-section{padding-block:var(--sp-sec)} .pxc-section--alt{background:rgba(27,36,41,.55);border-block:1px solid var(--border)} .pxc-section__head{margin-bottom:2rem} .pxc-eyebrow{ font-family:var(--font-head); font-size:.85rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-2);margin:0 0 .7rem;font-weight:600; } .pxc-lead{color:var(--text-muted);font-size:1.08rem;margin:0 0 1.2rem} .pxc-muted{color:var(--text-muted)} /* ---------- buttons ---------- */ .pxc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:.02em; padding:.82rem 1.5rem;border-radius:var(--r-btn);border:1px solid transparent; /* начало градиента затемнено с #e0459b: белый текст на нём давал 3.8:1, стало 4.7:1 */ background:linear-gradient(135deg,#cc3688 0%,#b8367f 100%); color:#fff;cursor:pointer;line-height:1.2;text-align:center; box-shadow:0 8px 22px rgba(224,69,155,.26); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; } .pxc-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(224,69,155,.34)} .pxc-btn--ghost{ background:transparent;color:var(--accent-2);border-color:rgba(47,212,196,.42);box-shadow:none; } .pxc-btn--ghost:hover{color:#0e1518;background:var(--accent-2);box-shadow:0 10px 24px rgba(47,212,196,.24)} .pxc-btn--sm{padding:.55rem 1rem;font-size:.9rem;border-radius:var(--r-sm)} .pxc-btn--wide{width:100%} /* ---------- icons ---------- */ .pxc-icon{ width:1.5em;height:1.5em;display:inline-block;vertical-align:middle;flex-shrink:0; stroke:currentColor;fill:none;color:var(--accent-2); } .pxc-icon--lg{width:2rem;height:2rem} /* ============================================================ HEADER — fixed vertical glass rail (LIGHT surface, dark logo) ============================================================ */ .pxc-header{ position:fixed;inset-block:0;inset-inline-start:0;width:var(--rail-w); display:flex;flex-direction:column; background:linear-gradient(180deg,var(--bg-bar) 0%,var(--bg-bar-2) 100%); border-inline-end:1px solid var(--border-bar); box-shadow:6px 0 26px rgba(6,10,12,.35); z-index:900; } .pxc-header__top{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:1.1rem 1.15rem;border-bottom:1px solid var(--border-bar); } .pxc-logo{display:inline-flex;align-items:center;min-width:0} .pxc-logo__img{ display:block;height:40px;width:auto;max-width:min(45vw,180px);object-fit:contain; } .pxc-header__body{ flex:1;min-height:0;overflow-y:auto; padding:1.1rem .85rem; } .pxc-header__foot{ padding:1rem 1.15rem 1.35rem;border-top:1px solid var(--border-bar); } .pxc-header__note{ margin:.7rem 0 0;font-size:.82rem;line-height:1.45;color:var(--text-bar-muted); } /* nav */ .pxc-nav{display:block} .pxc-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem} .pxc-nav a:not(.pxc-btn){ display:block;padding:.62rem .8rem;border-radius:var(--r-sm); font-family:var(--font-head);font-weight:600;font-size:1rem;letter-spacing:.01em; color:var(--text-bar);position:relative; transition:background .16s ease,color .16s ease; } .pxc-nav a:not(.pxc-btn):hover, .pxc-nav a:not(.pxc-btn):focus-visible{background:rgba(20,40,48,.07);color:#0d1a20} .pxc-nav a:not(.pxc-btn)::after{ content:"";position:absolute;left:.8rem;right:.8rem;bottom:.34rem;height:2px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transform:scaleX(0);transform-origin:left;transition:transform .24s ease;border-radius:2px; } .pxc-nav a:not(.pxc-btn):hover::after{transform:scaleX(1)} .pxc-nav__sep{ margin:.9rem .8rem .55rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase; color:var(--text-bar-muted);font-family:var(--font-head);font-weight:600; } .pxc-nav > .pxc-btn{display:none} /* burger — hidden on the rail, shown on mobile top bar */ .pxc-burger{ display:none;flex-shrink:0;width:44px;height:44px; align-items:center;justify-content:center;flex-direction:column;gap:5px; background:transparent;border:1px solid var(--border-bar);border-radius:var(--r-sm); cursor:pointer;padding:0; } .pxc-burger span{ display:block;width:22px;height:2px;background:var(--text-bar);border-radius:2px; transition:transform .2s ease,opacity .2s ease; } .pxc-header.is-open .pxc-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .pxc-header.is-open .pxc-burger span:nth-child(2){opacity:0} .pxc-header.is-open .pxc-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile: rail collapses to a top bar with burger */ @media (max-width:959px){ body{padding-inline-start:0;padding-top:66px} /* фактическая высота бара 64px (её задаёт бургер 44px) */ .pxc-header{ /* inset-block-end:auto ОБЯЗАТЕЛЕН: базовое правило задаёт inset-block:0 (и top, и bottom), и при height:auto фикс-шапка растягивалась на 100vh, перекрывая всю страницу. */ position:fixed;inset-block-start:0;inset-block-end:auto;inset-inline:0;width:auto;height:auto; flex-direction:row;flex-wrap:wrap;align-items:center; border-inline-end:0;border-bottom:1px solid var(--border-bar); box-shadow:0 6px 22px rgba(6,10,12,.35); } .pxc-header__top{ flex:1;min-width:0;padding:.6rem var(--gutter);border-bottom:0; } .pxc-logo__img{height:34px;max-width:min(45vw,150px)} .pxc-burger{display:flex} .pxc-header__body{ display:none;flex-basis:100%;width:100%;order:3; max-height:calc(100vh - 66px);padding:.6rem var(--gutter) 1.1rem; border-top:1px solid var(--border-bar); } .pxc-header__foot{display:none} .pxc-header.is-open .pxc-header__body{display:block} .pxc-nav{display:block} .pxc-nav > .pxc-btn{display:block;width:100%;margin-top:.9rem} .pxc-header__cta{display:none} } @media (min-width:960px){ .pxc-header__body{display:block !important} } /* ============================================================ HERO ============================================================ */ .pxc-hero{position:relative} .pxc-hero__inner{position:relative} .pxc-hero__img{ display:block;width:100%;height:auto;max-height:70vh; aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-card); } .pxc-hero__visual{ border-radius:var(--r-card);overflow:hidden; background:linear-gradient(135deg,rgba(47,212,196,.24),rgba(224,69,155,.22)); aspect-ratio:3/2;border:1px solid var(--border); } /* HOME hero — STACKED pattern: text block first, visual full width below */ .pxc-hero--home{padding-block:clamp(2.75rem,6vw,4.5rem) var(--sp-sec)} .pxc-hero--home .pxc-hero__inner{display:flex;flex-direction:column;gap:clamp(1.75rem,4vw,2.75rem)} .pxc-hero--home .pxc-hero__text{max-width:62ch} .pxc-hero--home h1{margin-bottom:.45em} .pxc-hero--home .pxc-hero__sub{ font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--text-muted);margin:0 0 1.6rem; } .pxc-hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} .pxc-hero__note{margin:1.1rem 0 0;font-size:.85rem;color:var(--text-muted)} .pxc-hero--home .pxc-hero__media{width:100%} .pxc-hero--home .pxc-hero__img, .pxc-hero--home .pxc-hero__visual{box-shadow:var(--shadow-soft)} /* INNER hero — compact page-header band */ .pxc-hero--inner{ position:relative;overflow:hidden; min-height:180px;display:flex;align-items:center; padding-block:clamp(1.4rem,3vw,2.1rem); background:linear-gradient(115deg,rgba(47,212,196,.14) 0%,rgba(27,36,41,.9) 46%,rgba(224,69,155,.16) 100%); border-bottom:1px solid var(--border); } .pxc-hero--inner .pxc-hero__inner{ width:100%; padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter))); } .pxc-hero--inner .pxc-hero__img{ position:absolute;inset:0;width:100%;height:100%;max-height:none; aspect-ratio:auto;object-fit:cover;border-radius:0;z-index:0; } .pxc-hero--inner .pxc-hero__inner::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(10,15,18,.92) 0%,rgba(10,15,18,.78) 52%,rgba(10,15,18,.58) 100%); } :where(.pxc-hero--inner .pxc-hero__inner > :not(.pxc-hero__img)){position:relative;z-index:2} .pxc-hero--inner h1{margin-bottom:.25em;font-size:clamp(1.7rem,3.4vw,2.45rem)} .pxc-hero--inner .pxc-hero__sub{margin:0;color:var(--text-muted);max-width:70ch} /* ---------- breadcrumb / page-header ---------- */ .pxc-breadcrumb{font-size:.82rem;color:var(--text-muted);margin:0 0 .55rem} .pxc-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0} .pxc-breadcrumb li+li::before{content:"/";margin-inline-end:.4rem;color:var(--border);color:rgba(146,166,173,.6)} .pxc-breadcrumb a{color:var(--text-muted)} .pxc-breadcrumb a:hover{color:var(--accent-2)} .pxc-page-header{ position:relative;padding-block:clamp(1.6rem,3.4vw,2.4rem); border-bottom:1px solid var(--border);background:rgba(27,36,41,.6); } .pxc-page-header h1{margin-bottom:.2em} /* ============================================================ CONTENT COMPONENTS ============================================================ */ /* overview */ .pxc-overview p{margin:0 0 1.05rem} .pxc-overview__grid{display:grid;gap:1.4rem} .pxc-overview__grid > *{min-width:0} /* feature-cards — GRID pattern */ .pxc-features{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))} .pxc-features > *{min-width:0} .pxc-feature{ position:relative;overflow:hidden;background:var(--bg-card); border:1px solid var(--border);border-radius:var(--r-card); padding:clamp(1.15rem,2vw,1.6rem); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .pxc-feature::after{ content:"";position:absolute;left:0;bottom:0;height:3px;width:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transform:scaleX(0);transform-origin:left;transition:transform .35s ease; } .pxc-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:rgba(47,212,196,.3)} .pxc-feature:hover::after{transform:scaleX(1)} .pxc-feature__icon{ display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:var(--r-chip);margin-bottom:.9rem; background:rgba(47,212,196,.12);border:1px solid rgba(47,212,196,.24);color:var(--accent-2); } .pxc-feature h3{margin-bottom:.4em} .pxc-feature p{margin:0;color:var(--text-muted);font-size:.97rem} /* cards-grid */ .pxc-cards{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))} .pxc-cards > *{min-width:0} .pxc-card{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card); padding:clamp(1.1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:.6rem; transition:transform .2s ease,box-shadow .2s ease; } .pxc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .pxc-card h3{margin:0} .pxc-card p{margin:0;color:var(--text-muted);font-size:.97rem} .pxc-card__meta{margin-top:auto;padding-top:.5rem;font-size:.85rem;color:var(--accent-2);font-family:var(--font-head);letter-spacing:.04em} /* two-cols */ .pxc-two{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:start} .pxc-two > *{min-width:0} @media (min-width:860px){.pxc-two{grid-template-columns:1.15fr .85fr}} .pxc-two__text p{margin:0 0 1rem} /* content-panel */ .pxc-panel{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card); padding:clamp(1.1rem,2.2vw,1.6rem);box-shadow:var(--shadow-soft); } .pxc-panel__title{ font-family:var(--font-head);font-size:1.05rem;font-weight:700;margin:0 0 1rem; padding-bottom:.65rem;border-bottom:1px solid var(--border); } .pxc-facts{margin:0} .pxc-facts__row{ display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding:.6rem 0;border-bottom:1px dashed var(--border); } .pxc-facts__row:last-child{border-bottom:0;padding-bottom:0} .pxc-facts__row dt{color:var(--text-muted);font-size:.9rem;margin:0} .pxc-facts__row dd{margin:0;font-weight:600;text-align:end;font-size:.95rem} .pxc-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} .pxc-checklist li{display:flex;gap:.65rem;align-items:flex-start;font-size:.96rem;color:var(--text-muted)} .pxc-checklist .pxc-icon{color:var(--accent-2);margin-top:.15em} .pxc-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:.7rem} .pxc-mini > *{min-width:0} .pxc-mini__tile{ background:rgba(47,212,196,.07);border:1px solid var(--border);border-radius:var(--r-chip); padding:.8rem .9rem; } .pxc-mini__val{font-family:var(--font-head);font-size:1.35rem;font-weight:800;color:var(--accent-2);line-height:1.1} .pxc-mini__label{font-size:.76rem;color:var(--text-muted);letter-spacing:.04em} .pxc-score{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap} .pxc-score__val{font-family:var(--font-head);font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1} .pxc-score__stars{display:flex;gap:.15rem;color:var(--accent-2)} .pxc-score__stars .pxc-icon{width:1.1em;height:1.1em;fill:currentColor} .pxc-score__label{font-size:.85rem;color:var(--text-muted)} /* stats-bar — STRIP pattern */ .pxc-stats{ display:flex;flex-wrap:wrap; background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card); box-shadow:var(--shadow-soft);overflow:hidden; } .pxc-stats__item{ flex:1 1 180px;min-width:0;padding:1.1rem 1.25rem; border-inline-start:1px solid var(--border); } .pxc-stats__item:first-child{border-inline-start:0} .pxc-stats__val{ font-family:var(--font-head);font-weight:800;line-height:1.05; font-size:clamp(1.5rem,2.6vw,2rem);color:var(--text-main); } .pxc-stats__val em{font-style:normal;color:var(--accent)} .pxc-stats__label{ margin-top:.3rem;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted); } /* categories-bar */ .pxc-cats{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0;list-style:none} .pxc-cats > *{min-width:0} .pxc-chip{ display:inline-flex;align-items:center;gap:.45rem; padding:.5rem .95rem;border-radius:var(--r-chip); background:rgba(47,212,196,.08);border:1px solid var(--border); color:var(--text-main);font-size:.92rem;font-weight:600; transition:background .18s ease,border-color .18s ease,transform .18s ease; } .pxc-chip:hover{background:rgba(224,69,155,.14);border-color:rgba(224,69,155,.38);color:var(--text-main);transform:translateY(-2px)} .pxc-chip .pxc-icon{width:1.05em;height:1.05em} /* numbered-list */ .pxc-steps{list-style:none;counter-reset:pxc-step;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem} .pxc-steps li{ counter-increment:pxc-step;position:relative; padding:0 0 0 3.4rem;min-height:2.4rem; } .pxc-steps li::before{ content:counter(pxc-step,decimal-leading-zero); position:absolute;inset-inline-start:0;top:0; width:2.4rem;height:2.4rem;border-radius:var(--r-chip); display:flex;align-items:center;justify-content:center; font-family:var(--font-head);font-weight:800;font-size:.95rem; color:var(--accent-2);background:rgba(47,212,196,.1);border:1px solid rgba(47,212,196,.26); } .pxc-steps h3{margin:0 0 .3em;font-size:1.08rem} .pxc-steps p{margin:0;color:var(--text-muted)} /* data-table / payments-table */ .pxc-table-wrap{overflow-x:auto;max-width:100%;margin-block:1.5rem;border-radius:var(--r-card);border:1px solid var(--border);background:var(--bg-card)} .pxc-table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px} .pxc-table th,.pxc-table td{padding:.85rem 1.05rem;text-align:start;border-bottom:1px solid var(--border)} .pxc-table th{ white-space:nowrap;font-family:var(--font-head);font-weight:700;font-size:.82rem; letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2); background:rgba(47,212,196,.06); } .pxc-table tbody tr:last-child td{border-bottom:0} .pxc-table tbody tr:hover{background:rgba(224,69,155,.06)} .pxc-table td strong{color:var(--text-main)} .pxc-pay__name{display:flex;align-items:center;gap:.6rem;font-weight:600;white-space:nowrap} .pxc-pay__name .pxc-icon{color:var(--accent)} /* toc */ .pxc-toc{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card); padding:1.2rem 1.4rem; } .pxc-toc__title{font-family:var(--font-head);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .8rem} .pxc-toc ol,.pxc-toc ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} .pxc-toc li{min-width:0} .pxc-toc a{color:var(--text-main);font-size:.95rem;border-bottom:1px solid transparent} .pxc-toc a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)} /* FAQ — SINGLE pattern */ .pxc-faq{display:block} .pxc-faq details{border-bottom:1px solid var(--border)} .pxc-faq summary{cursor:pointer;padding:1rem 0;font-weight:600;list-style:none;font-family:var(--font-head);font-size:1.05rem} .pxc-faq summary::-webkit-details-marker{display:none} .pxc-faq summary::before{content:'+';margin-right:.5rem;transition:transform .2s;color:var(--accent-2);font-weight:700} .pxc-faq details[open] summary::before{content:'−'} .pxc-faq details > :not(summary){padding:.5rem 0 1rem;color:var(--text-muted)} .pxc-faq details > :not(summary):last-child{margin-bottom:0} /* legal-body */ .pxc-legal{counter-reset:pxc-legal} .pxc-legal h2{counter-increment:pxc-legal;margin-top:2.2rem} .pxc-legal h2::before{ content:counter(pxc-legal) ". ";color:var(--accent-2);font-weight:700; } .pxc-legal h3{margin-top:1.6rem} .pxc-legal p,.pxc-legal li{color:var(--text-muted)} .pxc-legal ul,.pxc-legal ol{padding-inline-start:1.3rem} .pxc-legal li{margin-bottom:.5rem} /* cta-block */ .pxc-cta{ padding-block:var(--sp-sec); background: radial-gradient(700px 300px at 20% 0%,rgba(224,69,155,.18),transparent 65%), linear-gradient(135deg,rgba(27,36,41,.96),rgba(20,26,30,.96)); border-block:1px solid var(--border); } .pxc-cta__inner{display:flex;flex-direction:column;gap:1rem;text-align:center;align-items:center} .pxc-cta__inner h2{margin:0;max-width:22ch} .pxc-cta__inner p{margin:0;color:var(--text-muted)} .pxc-cta__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center} .pxc-cta__fine{font-size:.82rem;color:var(--text-muted)} /* rtp-grid */ .pxc-rtp{display:grid;gap:clamp(.6rem,1.5vw,1rem);grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:640px){.pxc-rtp{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:960px){.pxc-rtp{grid-template-columns:repeat(4,minmax(0,1fr))}} .pxc-rtp-item{ position:relative;overflow:hidden;min-width:0;border-radius:var(--r-card); border:1px solid var(--border);background:var(--bg-card); transition:transform .2s ease,box-shadow .2s ease; } .pxc-rtp-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .pxc-rtp-item__thumb{ aspect-ratio:3/2;position:relative; background:linear-gradient(135deg,rgba(47,212,196,.22),rgba(224,69,155,.2)); } .pxc-rtp-item__thumb img{width:100%;height:100%;object-fit:cover;display:block} .pxc-rtp-item__name{ display:block;padding:.6rem .7rem;font-size:.9rem;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .pxc-rtp-tooltip{ position:absolute;bottom:0;left:0;right:0;opacity:0;transition:opacity .2s; padding:.55rem .7rem;font-size:.82rem;color:#fff; background:linear-gradient(0deg,rgba(10,15,18,.94),rgba(10,15,18,.6)); } .pxc-rtp-item:hover .pxc-rtp-tooltip{opacity:1} /* sticky-nav и chat-widget удалены: разметки нет ни на одной странице, а их `body{padding-bottom:64px}` давал 64px пустоты внизу всех мобильных страниц. */ /* ============================================================ FOOTER — light surface (LOGO_TONE=dark) ============================================================ */ .pxc-footer{ background:linear-gradient(180deg,var(--bg-bar) 0%,var(--bg-bar-2) 100%); color:var(--text-bar); border-top:1px solid var(--border-bar); } .pxc-footer__grid{ display:grid;gap:clamp(1.5rem,3vw,2.5rem); padding-block:clamp(2.2rem,4.5vw,3.2rem); grid-template-columns:1fr; } .pxc-footer__grid > *{min-width:0} @media (min-width:760px){.pxc-footer__grid{grid-template-columns:1.4fr 1fr 1fr}} .pxc-footer__brand p{color:var(--text-bar-muted);font-size:.92rem;margin:.9rem 0 0;max-width:44ch} .pxc-footer__title{ font-family:var(--font-head);font-size:.84rem;letter-spacing:.13em;text-transform:uppercase; color:var(--text-bar-muted);margin:0 0 .85rem;font-weight:700; } .pxc-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .pxc-footer__list a{color:var(--text-bar);font-size:.95rem} .pxc-footer__list a:hover{color:var(--accent-on-light);text-decoration:underline} .pxc-footer__legal{ border-top:1px solid var(--border-bar); padding-block:1.3rem 1.6rem; display:flex;flex-direction:column;gap:.8rem; } .pxc-footer__age{ display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start; font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.06em; padding:.3rem .7rem;border-radius:var(--r-sm); background:rgba(224,69,155,.12);border:1px solid rgba(224,69,155,.32);color:#96256a; } .pxc-footer__disclaimer{margin:0;font-size:.84rem;line-height:1.6;color:var(--text-bar-muted)} .pxc-footer__copy{margin:0;font-size:.82rem;color:var(--text-bar-muted)} /* reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* sa-responsive-net */ table th{white-space:nowrap} figure,blockquote,dl,dd,fieldset{margin:0} /* sa-logo-chip */ .pxc-footer .pxc-logo__img{filter:none;background:transparent;padding:0} .pxc-footer .pxc-footer__logo-chip{background:transparent;padding:0} /* sa-logo-fit */ .pxc-logo__img{object-fit:contain} /* sa-ph-media */ .pxc-page-header:has(.pxc-hero__img){position:relative;overflow:hidden;isolation:isolate;min-height:clamp(200px,30vh,300px);display:flex;flex-direction:column;justify-content:center} .pxc-page-header:has(.pxc-hero__img) .pxc-hero__img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;margin:0;z-index:0} .pxc-page-header:has(.pxc-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(.pxc-page-header:has(.pxc-hero__img)>:not(.pxc-hero__img)){position:relative} .pxc-page-header:has(.pxc-hero__img)>:not(.pxc-hero__img){z-index:2} .pxc-page-header:has(.pxc-hero__img),.pxc-page-header:has(.pxc-hero__img) h1,.pxc-page-header:has(.pxc-hero__img) a,.pxc-page-header:has(.pxc-hero__img) p,.pxc-page-header:has(.pxc-hero__img) li,.pxc-page-header:has(.pxc-hero__img) span{color:#fff} /* sa-hero-media */ .pxc-hero:has(>.pxc-hero__img){position:relative;isolation:isolate} .pxc-hero:has(>.pxc-hero__img)>.pxc-hero__img{z-index:0} .pxc-hero:has(>.pxc-hero__img)::after{z-index:1} :where(.pxc-hero:has(>.pxc-hero__img)>:not(.pxc-hero__img)){position:relative} .pxc-hero:has(>.pxc-hero__img)>:not(.pxc-hero__img){z-index:2} /* sa-rhythm */ :where(.pxc-table-wrap){margin-block:1.5rem} :where(main) :where(ul,ol,table,.pxc-table-wrap)+p{margin-block-start:1rem} /* sa-slot-link */ .pxc-rtp-item,.pxc-rtp-item:hover,.pxc-rtp-item:focus{color:inherit;text-decoration:none;cursor:pointer} /* ============================================================ A11Y / TOUCH / MOBILE — правки по ревью ============================================================ */ /* Ссылки внутри текста отличались от текста ТОЛЬКО цветом (a{text-decoration:none}). Кнопки, чипы и карточки-ссылки исключены — у них своя аффорданс-форма. */ main p a:not(.pxc-btn):not(.pxc-chip):not(.pxc-rtp-item), .pxc-legal li a, .pxc-faq details a{ text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px; } /* Тач-таргеты: ссылка-хвостик карточки была 17px, пункт футера — 22px (норма 44). */ .pxc-card__meta a, .pxc-footer__list a, .pxc-logo{display:inline-flex;align-items:center;min-height:44px} .pxc-footer__list{gap:0} .pxc-breadcrumb ol{align-items:center} .pxc-breadcrumb a{display:inline-flex;align-items:center;min-height:36px} .pxc-toc a{display:inline-flex;align-items:center;min-height:40px} /* Полоса статистики: разделитель задан как border-inline-start под ГОРИЗОНТАЛЬНУЮ раскладку; когда элементы переносятся в столбик, он остаётся вертикальной палкой слева. */ @media (max-width:639px){ .pxc-stats__item{ border-inline-start:0;border-block-start:1px solid var(--border); padding:.95rem 1.1rem; } .pxc-stats__item:first-child{border-block-start:0} } @media (max-width:767px){ :root{--sp-sec:2.5rem} /* было до 4.75rem — на мобиле копились пустоты */ .pxc-btn--sm{padding:.72rem 1.1rem} /* было 37px высоты */ .pxc-hero--home{padding-block:clamp(1.75rem,5vw,2.5rem) clamp(1.75rem,5vw,2.5rem)} .pxc-eyebrow{letter-spacing:.1em} } /* Таблица уезжает вправо в скролл-контейнере без единого намёка, что она продолжается. */ .pxc-table-wrap{ background: linear-gradient(90deg,var(--bg-card) 30%,rgba(27,36,41,0)) left/28px 100% no-repeat, linear-gradient(90deg,rgba(27,36,41,0),var(--bg-card) 70%) right/28px 100% no-repeat, radial-gradient(farthest-side at 0 50%,rgba(6,10,12,.5),rgba(6,10,12,0)) left/14px 100% no-repeat, radial-gradient(farthest-side at 100% 50%,rgba(6,10,12,.5),rgba(6,10,12,0)) right/14px 100% no-repeat, var(--bg-card); background-attachment:local,local,scroll,scroll,local; } /* Таблица «ключ → значение» (2 колонки) не нуждается в min-width:520px — на узком экране она просто переносит текст вместо горизонтального скролла. */ .pxc-table--kv{min-width:0} @media (max-width:560px){ .pxc-table--kv th,.pxc-table--kv td{white-space:normal;padding:.7rem .85rem} .pxc-table--kv th[scope="row"]{width:44%} }