/* шрифты подключены в каждой страницы (preconnect + link) — @import здесь создавал цепочку HTML → CSS → fonts.css → шрифт и давал CLS на подмене */ /* ============================================================ Pinco AZ — Mobil hub (attachmentawareschools.com) namespace: pxb · lang: az · archetype: magazine ============================================================ */ :root{ /* ---- palette (accent-lock: Pinco red + gold) ---- */ --bg-main:#0F0E0E; --bg-card:#1A1717; --bg-alt:#151212; --accent:#FF0123; --accent-cta:#D80020; /* белый текст на нём — 5.33:1 (AA) */ --accent-cta-h:#B80018; --accent-on-light:#C4001A; /* красный на светлых полосах — 5.4–6.3:1 (AA) */ --accent-2:#E9C05F; --text-main:#FCFCFC; --text-muted:#A69FA0; --border:#292525; /* logo tone = dark → these two surfaces stay LIGHT */ --bar-bg:#FCFCFC; --bar-bg-2:#F1EDED; --bar-text:#171213; --bar-muted:#5C5455; --bar-border:#DFD8D8; /* ---- type ---- */ --font-head:'Oswald','Roboto',system-ui,Arial,sans-serif; --font-body:'Roboto',system-ui,Arial,sans-serif; --font-label:'Oswald','Roboto',system-ui,Arial,sans-serif; /* ---- geometry (SHAPE=sharp → 3px; density=dense) ---- */ --r:3px; --r-sm:2px; --wrap:1280px; --gutter:20px; --sec-pad:clamp(40px,5.2vw,64px); --gap:clamp(14px,1.8vw,22px); --hdr-h:68px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body{ margin:0; overflow-x:hidden; background:var(--bg-main); color:var(--text-main); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } img{max-width:100%} h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.12; letter-spacing:.005em; margin:0 0 .6em; text-wrap:balance; } h1{font-size:clamp(1.9rem,4.4vw,3rem)} h2{font-size:clamp(1.45rem,2.9vw,2.1rem)} h3{font-size:clamp(1.1rem,1.8vw,1.35rem)} h4{font-size:1.02rem} p{margin:0 0 1rem} p:last-child{margin-bottom:0} a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline} /* ссылка в тексте должна отличаться не только цветом */ main p a:not(.pxb-btn):not(.pxb-card__link), main li a:not(.pxb-btn):not(.pxb-card__link):not(.pxb-cat){ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; } :focus-visible{outline:2px solid var(--accent-2);outline-offset:2px} /* на светлых полосах золотое кольцо невидимо (1.7:1) */ .pxb-header :focus-visible,.pxb-footer :focus-visible{outline-color:#171213} ul,ol{margin:0 0 1rem;padding-inline-start:1.15rem} li{margin-bottom:.4rem} strong{color:var(--text-main);font-weight:700} small{font-size:.84rem} hr{border:0;border-top:1px solid var(--border);margin:2rem 0} /* ---------- container / sections (magazine archetype) ---------- */ .pxb-container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .pxb-section{padding-block:var(--sec-pad);position:relative} .pxb-section--alt{background:var(--bg-alt)} .pxb-section--tight{padding-block:calc(var(--sec-pad) * .62)} /* magazine: asymmetric heading block, offset rule */ .pxb-sec-head{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--gap); align-items:end; margin-bottom:clamp(20px,2.6vw,32px); padding-bottom:14px; border-bottom:1px solid var(--border); } .pxb-sec-head > *{min-width:0} .pxb-sec-head h2,.pxb-sec-head h3{margin:0} .pxb-sec-head p{color:var(--text-muted);margin:0;font-size:.95rem} @media (max-width:860px){ .pxb-sec-head{grid-template-columns:1fr;align-items:start;gap:10px} } .pxb-eyebrow{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:500; color:var(--accent); display:block; margin-bottom:.5rem; } .pxb-eyebrow--gold{color:var(--accent-2)} .pxb-lede{font-size:1.06rem;color:var(--text-muted)} .pxb-muted{color:var(--text-muted)} /* magazine pull-quote */ .pxb-pull{ font-family:var(--font-head); font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.3; color:var(--text-main); border-inline-start:3px solid var(--accent); padding:.2rem 0 .2rem 1rem; margin:1.6rem 0; } /* ---------- buttons ---------- */ .pxb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.07em; font-weight:600; font-size:.92rem; line-height:1; padding:.86rem 1.5rem; min-height:44px; border-radius:var(--r); border:1px solid var(--accent-cta); background:var(--accent-cta); color:#fff; cursor:pointer; text-decoration:none; transition:background .18s,border-color .18s,color .18s,transform .18s; } .pxb-btn:hover{background:var(--accent-cta-h);border-color:var(--accent-cta-h);color:#fff;text-decoration:none;transform:translateY(-1px)} .pxb-btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent)} .pxb-btn--ghost:hover{background:var(--accent-cta);border-color:var(--accent-cta);color:#fff} .pxb-btn--gold{background:var(--accent-2);border-color:var(--accent-2);color:#171213} .pxb-btn--gold:hover{background:#D9AF4C;border-color:#D9AF4C;color:#171213} .pxb-btn--sm{padding:.6rem 1rem;font-size:.8rem;min-height:44px} .pxb-btn--wide{width:100%} .pxb-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem} .pxb-actions > *{min-width:0} /* ---------- icons ---------- */ .pxb-icon{ width:1.5em;height:1.5em; display:inline-block; vertical-align:middle; flex-shrink:0; color:currentColor; stroke:currentColor; fill:none; } .pxb-icon--lg{width:1.9em;height:1.9em} /* ============================================================ HEADER — light bar (LOGO_TONE = dark) ============================================================ */ .pxb-header{ position:sticky; top:0; z-index:900; background:var(--bar-bg); border-bottom:1px solid var(--bar-border); } .pxb-header__bar{ max-width:var(--wrap); margin-inline:auto; padding:10px var(--gutter); min-height:var(--hdr-h); display:flex; align-items:center; gap:clamp(10px,2vw,28px); } .pxb-header__bar > *{min-width:0} .pxb-logo{ display:inline-flex; align-items:center; flex-shrink:0; text-decoration:none; line-height:0; } .pxb-logo__img{ display:block; height:40px; width:auto; max-width:220px; object-fit:contain; } .pxb-nav{ display:flex; align-items:center; gap:clamp(6px,1.4vw,18px); margin-inline-start:auto; flex-wrap:nowrap; } .pxb-nav ul{ display:flex; align-items:center; gap:clamp(6px,1.4vw,18px); list-style:none; margin:0; padding:0; flex-wrap:nowrap; } .pxb-nav li{margin:0} .pxb-nav a:not(.pxb-btn){ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; font-weight:500; color:var(--bar-text); padding:.5rem .1rem; display:block; white-space:nowrap; border-bottom:2px solid transparent; text-decoration:none; transition:color .15s,border-color .15s; } .pxb-nav a:not(.pxb-btn):hover, .pxb-nav a:not(.pxb-btn):focus-visible{ color:var(--accent-on-light); border-bottom-color:var(--accent-on-light); text-decoration:none; } .pxb-nav a:not(.pxb-btn)[aria-current="page"]:not(.pxb-btn){color:var(--accent-on-light);border-bottom-color:var(--accent-on-light)} /* single CTA, standalone, outside nav — visible at every width */ .pxb-header__cta{flex-shrink:0} /* burger */ .pxb-burger{ display:none; flex-shrink:0; width:44px;height:44px; padding:0; margin-inline-start:auto; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:transparent; border:1px solid var(--bar-border); border-radius:var(--r); cursor:pointer; } .pxb-burger span{ display:block; width:22px; height:2px; background:var(--bar-text); transition:transform .2s,opacity .2s; } .pxb-header.is-open .pxb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .pxb-header.is-open .pxb-burger span:nth-child(2){opacity:0} .pxb-header.is-open .pxb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:940px){ .pxb-burger{display:flex} .pxb-nav{ display:none; position:absolute; inset-inline:0; top:100%; flex-direction:column; align-items:stretch; gap:0; margin-inline-start:0; padding:8px var(--gutter) 18px; background:var(--bar-bg); border-bottom:1px solid var(--bar-border); box-shadow:0 18px 32px rgba(0,0,0,.28); max-height:calc(100vh - var(--hdr-h)); overflow-y:auto; } .pxb-header.is-open .pxb-nav{display:flex} .pxb-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%} .pxb-nav a:not(.pxb-btn){ padding:.85rem .2rem; font-size:.95rem; border-bottom:1px solid var(--bar-border); } .pxb-nav a:not(.pxb-btn):hover{border-bottom-color:var(--accent-on-light)} .pxb-logo__img{height:32px;max-width:min(40vw,170px)} /* CTA не ужимаем ниже 44px — место берём у логотипа */ .pxb-header__cta{padding:.7rem 1rem;font-size:.8rem;letter-spacing:.05em} } @media (max-width:400px){ .pxb-header__bar{gap:8px;padding-inline:14px} .pxb-logo__img{height:28px;max-width:min(38vw,130px)} .pxb-header__cta{padding:.7rem .85rem;font-size:.76rem} } /* ============================================================ HERO — home: mirror-split (visual LEFT, text RIGHT) ============================================================ */ .pxb-hero{position:relative} .pxb-hero__inner{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); position:relative; } .pxb-hero__eyebrow{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--accent); display:block; margin-bottom:.7rem; } .pxb-hero h1{margin-bottom:.5rem;text-wrap:balance} .pxb-hero__sub{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--text-muted);max-width:56ch} .pxb-hero__img{ display:block; width:100%; height:auto; max-height:70vh; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); } .pxb-hero__visual{ position:relative; min-width:0; border-radius:var(--r); overflow:hidden; } /* fallback when no is injected */ .pxb-hero__visual:empty::before, .pxb-hero__ph{ content:""; display:block; aspect-ratio:3/2; border-radius:var(--r); border:1px solid var(--border); background: radial-gradient(120% 90% at 12% 8%, rgba(255,1,35,.34) 0%, rgba(255,1,35,0) 58%), radial-gradient(90% 80% at 88% 92%, rgba(233,192,95,.24) 0%, rgba(233,192,95,0) 60%), linear-gradient(155deg,#1A1717 0%,#0F0E0E 100%); } /* ---- home hero only ---- */ .pxb-hero--home{ padding-block:clamp(38px,5vw,66px); background: radial-gradient(70% 120% at 88% 0%, rgba(255,1,35,.14) 0%, rgba(255,1,35,0) 62%), linear-gradient(180deg,#151212 0%,var(--bg-main) 100%); border-bottom:1px solid var(--border); } .pxb-hero--home .pxb-hero__inner{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(22px,3.4vw,48px); align-items:center; } .pxb-hero--home .pxb-hero__visual{grid-column:1;grid-row:1} .pxb-hero--home .pxb-hero__text{grid-column:2;grid-row:1;min-width:0} @media (max-width:900px){ .pxb-hero--home .pxb-hero__inner{grid-template-columns:1fr} .pxb-hero--home .pxb-hero__visual, .pxb-hero--home .pxb-hero__text{grid-column:1;grid-row:auto} /* на телефоне первым экраном идёт оффер, картинка — под ним */ .pxb-hero--home .pxb-hero__text{order:1} .pxb-hero--home .pxb-hero__visual{order:2} } /* hero mini-badges (mobil/app vibe) */ .pxb-hero__badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; padding:0; list-style:none; } .pxb-hero__badges li{ margin:0; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:var(--text-muted); border:1px solid var(--border); border-radius:var(--r); padding:.36rem .6rem; background:var(--bg-card); } /* ---- inner page header (compact band) ---- */ .pxb-hero--inner{ position:relative; overflow:hidden; min-height:230px; display:flex; align-items:center; padding-block:32px; background: linear-gradient(90deg, rgba(255,1,35,.16) 0%, rgba(255,1,35,0) 46%), var(--bg-alt); border-bottom:1px solid var(--border); border-radius:0; } /* без изображения полоса не должна занимать столько же места */ .pxb-hero--inner:not(:has(.pxb-hero__img)){min-height:0;padding-block:clamp(24px,3.4vw,36px)} .pxb-hero--inner .pxb-hero__inner{ padding-inline:max(var(--gutter), calc((100% - var(--wrap))/2 + var(--gutter))); max-width:none; width:100%; } .pxb-hero--inner h1{font-size:clamp(1.6rem,3.2vw,2.35rem);margin-bottom:.35rem} .pxb-hero--inner .pxb-hero__sub{font-size:1rem} .pxb-hero--inner .pxb-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; } .pxb-hero--inner .pxb-hero__inner::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.74) 48%, rgba(10,10,10,.5) 100%); pointer-events:none; } :where(.pxb-hero--inner .pxb-hero__inner > :not(.pxb-hero__img)){position:relative;z-index:2} @media (max-width:640px){ .pxb-hero--inner{min-height:190px} } /* ---------- breadcrumb ---------- */ .pxb-breadcrumb{ font-size:.8rem; color:var(--text-muted); margin-bottom:.2rem; /* ссылки внутри получили padding-block .45rem */ font-family:var(--font-label); letter-spacing:.04em; } .pxb-breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; } .pxb-breadcrumb li{margin:0;display:flex;align-items:center;gap:.4rem} .pxb-breadcrumb li+li::before{content:"/";color:var(--border)} .pxb-breadcrumb a{color:var(--text-muted);display:inline-block;padding-block:.45rem} .pxb-breadcrumb a:hover{color:var(--accent-2)} /* ============================================================ OVERVIEW / two-cols / panels ============================================================ */ /* строка в 150 символов не читается — держим 72ch */ .pxb-overview p{max-width:72ch} .pxb-overview__grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; } .pxb-overview__grid > *{min-width:0} @media (max-width:860px){.pxb-overview__grid{grid-template-columns:1fr}} /* two-cols — magazine asymmetry 1.35fr / 1fr */ .pxb-two-cols{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start; } .pxb-two-cols > *{min-width:0} .pxb-two-cols--rev .pxb-two-cols__main{order:2} .pxb-two-cols--rev .pxb-panel{order:1} @media (max-width:860px){ .pxb-two-cols{grid-template-columns:1fr} .pxb-two-cols--rev .pxb-two-cols__main, .pxb-two-cols--rev .pxb-panel{order:0} } /* content panel */ .pxb-panel{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:clamp(18px,2.2vw,24px); position:relative; } .pxb-panel::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:2px; background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%); border-start-start-radius:var(--r); border-start-end-radius:var(--r); } .pxb-panel__title{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; font-weight:600; color:var(--accent-2); margin:0 0 1rem; } /* quick facts dl */ .pxb-facts{margin:0} .pxb-facts__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--border); } .pxb-facts__row:last-child{border-bottom:0;padding-bottom:0} .pxb-facts dt{ color:var(--text-muted); font-size:.86rem; margin:0; min-width:0; } .pxb-facts dd{ margin:0; font-weight:500; text-align:end; min-width:0; } /* на узком экране пара «параметр — значение» не должна разъезжаться зигзагом */ @media (max-width:480px){ .pxb-facts__row{flex-direction:column;gap:.15rem} .pxb-facts dd{text-align:start} } /* checklist */ .pxb-checklist{list-style:none;margin:0;padding:0} .pxb-checklist li{ display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; margin:0; border-bottom:1px solid var(--border); } .pxb-checklist li:last-child{border-bottom:0} .pxb-checklist .pxb-icon{color:var(--accent);margin-top:.15rem} /* mini stat tiles inside a panel */ .pxb-minitiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr)); gap:10px; } .pxb-minitiles > *{min-width:0} .pxb-minitiles + p{margin-top:1rem} /* подпись прилипала к сетке плиток */ .pxb-minitile{ background:var(--bg-main); border:1px solid var(--border); border-radius:var(--r); padding:.8rem .7rem; } .pxb-minitile__val{ font-family:var(--font-head); font-size:1.3rem; color:var(--accent-2); line-height:1.1; display:block; } .pxb-minitile__lbl{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.07em; font-size:.78rem; color:var(--text-muted); display:block; margin-top:.25rem; } /* score badge */ /* ============================================================ FEATURE CARDS — icon-rows pattern (list, not grid) ============================================================ */ .pxb-features{ display:flex; flex-direction:column; gap:0; list-style:none; margin:0; padding:0; } .pxb-feature{ display:flex; align-items:flex-start; gap:clamp(12px,1.8vw,20px); padding:clamp(16px,2vw,22px) 0; margin:0; border-bottom:1px solid var(--border); min-width:0; } .pxb-feature:first-child{padding-top:0} .pxb-feature:last-child{border-bottom:0;padding-bottom:0} .pxb-feature__icon{ flex-shrink:0; width:clamp(42px,5vw,54px); height:clamp(42px,5vw,54px); display:flex; align-items:center; justify-content:center; border-radius:var(--r); background:rgba(255,1,35,.12); border:1px solid rgba(255,1,35,.35); color:var(--accent); } .pxb-feature__icon .pxb-icon{width:1.5em;height:1.5em} .pxb-feature__body{min-width:0;flex:1} .pxb-feature__title{ font-family:var(--font-head); font-size:1.08rem; font-weight:600; margin:0 0 .3rem; line-height:1.25; } .pxb-feature__body p{color:var(--text-muted);margin:0;font-size:.96rem} .pxb-feature--gold .pxb-feature__icon{ background:rgba(233,192,95,.12); border-color:rgba(233,192,95,.38); color:var(--accent-2); } /* ============================================================ CARDS GRID ============================================================ */ .pxb-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:var(--gap); } .pxb-cards > *{min-width:0} .pxb-card{ position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:clamp(18px,2.2vw,24px); display:flex; flex-direction:column; gap:.55rem; transition:border-color .18s,transform .18s; } /* карточка реагирует на ховер целиком — значит и кликается целиком */ .pxb-card__title a::after, .pxb-card > .pxb-card__link::after{content:"";position:absolute;inset:0;border-radius:var(--r)} .pxb-card:hover{border-color:var(--accent);transform:translateY(-2px)} .pxb-card__title{ font-family:var(--font-head); font-size:1.1rem; margin:0; line-height:1.25; } .pxb-card__title a{color:var(--text-main)} .pxb-card__title a:hover{color:var(--accent-2);text-decoration:none} .pxb-card p{color:var(--text-muted);margin:0;font-size:.95rem} .pxb-card__meta{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.07em; font-size:.78rem; color:var(--accent-2); } .pxb-card__link{ margin-top:auto; margin-bottom:-.4rem; /* тач-паддинг не должен раздувать низ карточки */ padding-block:.5rem; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:var(--accent); } .pxb-card .pxb-icon{color:var(--accent)} /* ============================================================ STATS BAR — counters pattern (bare oversized numbers) ============================================================ */ .pxb-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px); } .pxb-stats > *{min-width:0} .pxb-stat{min-width:0} .pxb-stat__value{ display:block; font-family:var(--font-head); font-weight:600; font-size:clamp(2.2rem,5vw,3.5rem); line-height:1; color:var(--accent); letter-spacing:-.01em; } .pxb-stat--gold .pxb-stat__value{color:var(--accent-2)} .pxb-stat__label{ display:block; margin-top:.5rem; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--text-muted); line-height:1.35; } /* ============================================================ NUMBERED LIST (CSS counters) ============================================================ */ .pxb-steps{ list-style:none; counter-reset:pxbstep; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); } .pxb-steps > li{ counter-increment:pxbstep; position:relative; margin:0; padding-inline-start:clamp(52px,6vw,64px); min-height:40px; } .pxb-steps > li::before{ content:counter(pxbstep,decimal-leading-zero); position:absolute; inset-inline-start:0; top:0; width:clamp(38px,4.6vw,46px); height:clamp(38px,4.6vw,46px); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:1rem; font-weight:600; color:var(--accent-2); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); } .pxb-steps__title{ font-family:var(--font-head); font-size:1.06rem; margin:0 0 .25rem; line-height:1.3; } .pxb-steps > li p{color:var(--text-muted);margin:0;font-size:.96rem} /* ============================================================ TABLES ============================================================ */ .pxb-table-wrap{ overflow-x:auto; max-width:100%; margin-block:1.5rem; border:1px solid var(--border); border-radius:var(--r); -webkit-overflow-scrolling:touch; } .pxb-table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px; } /* таблицы «параметр — значение» вмещаются в 320px без бокового скролла */ @media (max-width:560px){ .pxb-table{min-width:0} .pxb-table th{white-space:normal} .pxb-payments .pxb-table{min-width:520px} .pxb-payments .pxb-table th{white-space:nowrap} /* у оставшейся скроллящейся таблицы — видимая подсказка о скролле */ .pxb-payments .pxb-table-wrap{ background:radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) 100% 0/16px 100% no-repeat; } } .pxb-table caption{ caption-side:top; text-align:start; padding:.9rem 1rem; color:var(--text-muted); font-size:.85rem; border-bottom:1px solid var(--border); } .pxb-table th,.pxb-table td{ padding:.8rem 1rem; text-align:start; border-bottom:1px solid var(--border); vertical-align:top; } .pxb-table th{ white-space:nowrap; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.07em; font-size:.78rem; font-weight:600; color:var(--accent-2); background:var(--bg-card); } .pxb-table tbody tr:last-child td{border-bottom:0} .pxb-table tbody tr:hover{background:rgba(255,1,35,.05)} .pxb-table td strong{color:var(--text-main)} /* payments table */ .pxb-payments .pxb-table td:first-child{white-space:nowrap} .pxb-pay-name{display:flex;align-items:center;gap:.6rem;min-width:0} .pxb-pay-name .pxb-icon{color:var(--accent-2)} .pxb-pay-name span{font-weight:500} /* ============================================================ CATEGORIES BAR (pills) ============================================================ */ .pxb-cats{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; margin:0; padding:0; } .pxb-cats li{margin:0;min-width:0} .pxb-cat{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; min-height:44px; padding:.7rem 1rem; border:1px solid var(--border); border-radius:var(--r); background:var(--bg-card); color:var(--text-main); text-decoration:none; transition:border-color .16s,color .16s,background .16s; } .pxb-cat:hover,.pxb-cat:focus-visible{ border-color:var(--accent); color:var(--accent); text-decoration:none; } .pxb-cat .pxb-icon{width:1.1em;height:1.1em} /* ============================================================ FAQ — boxed pattern ============================================================ */ .pxb-faq{display:flex;flex-direction:column;gap:.7rem} .pxb-faq details{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:0 clamp(14px,1.8vw,20px); } .pxb-faq details[open]{border-color:rgba(255,1,35,.5)} .pxb-faq summary{ cursor:pointer; padding:1rem 0; font-weight:600; list-style:none; font-family:var(--font-head); font-size:1.02rem; line-height:1.35; color:var(--text-main); display:flex; align-items:flex-start; gap:.1rem; } .pxb-faq summary::-webkit-details-marker{display:none} .pxb-faq summary::before{ content:'+'; margin-right:.5rem; transition:transform .2s; color:var(--accent); font-family:var(--font-head); flex-shrink:0; } .pxb-faq details[open] summary::before{content:'−'} .pxb-faq details > :not(summary){ padding:.5rem 0 1rem; color:var(--text-muted); border-top:1px solid var(--border); } .pxb-faq details > :not(summary) p{margin:0 0 .8rem} .pxb-faq details > :not(summary) p:last-child{margin-bottom:0} /* ============================================================ LEGAL BODY (heading counters) ============================================================ */ .pxb-legal{counter-reset:pxbsec} .pxb-legal > section{ padding-block:clamp(14px,1.8vw,20px); border-bottom:1px solid var(--border); } .pxb-legal > section:last-child{border-bottom:0} .pxb-legal h2{ counter-increment:pxbsec; display:flex; gap:.7rem; align-items:baseline; font-size:clamp(1.2rem,2.2vw,1.55rem); } .pxb-legal h2::before{ content:counter(pxbsec) "."; color:var(--accent); font-family:var(--font-head); flex-shrink:0; } .pxb-legal h3{margin-top:1.2rem;font-size:1.05rem} .pxb-legal p,.pxb-legal li{color:var(--text-muted);max-width:72ch} .pxb-legal strong{color:var(--text-main)} /* ============================================================ CTA BLOCK ============================================================ */ .pxb-cta{ padding-block:var(--sec-pad); background: radial-gradient(80% 140% at 8% 0%, rgba(255,1,35,.2) 0%, rgba(255,1,35,0) 60%), radial-gradient(70% 120% at 96% 100%, rgba(233,192,95,.14) 0%, rgba(233,192,95,0) 62%), var(--bg-card); border-block:1px solid var(--border); } .pxb-cta__inner{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; text-align:start; } .pxb-cta__inner > *{margin:0;min-width:0} .pxb-cta h2{font-size:clamp(1.5rem,3.2vw,2.2rem)} .pxb-cta p{color:var(--text-muted);max-width:64ch} .pxb-cta .pxb-actions{ margin-top:.3rem; justify-content:flex-start; } .pxb-cta .pxb-note{margin-top:.8rem} /* 1.8rem поверх gap 1rem давало разрыв */ .pxb-cta__fine{font-size:.82rem;color:var(--text-muted)} .pxb-cta--center .pxb-cta__inner{align-items:center;text-align:center} .pxb-cta--center .pxb-actions{justify-content:center} .pxb-cta--center p{margin-inline:auto} /* ---------- inline note (18+ / calm legal line) ---------- */ .pxb-note{ display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--text-muted); border-top:1px solid var(--border); padding-top:1rem; margin-top:1.8rem; } .pxb-note .pxb-icon{width:1.15em;height:1.15em;color:var(--accent-2);margin-top:.15rem} .pxb-badge-18{ font-family:var(--font-label); font-size:.72rem; letter-spacing:.08em; border:1px solid var(--accent); color:var(--accent); border-radius:var(--r); padding:.12rem .38rem; flex-shrink:0; } /* ============================================================ FOOTER — light bar (LOGO_TONE = dark) ============================================================ */ .pxb-footer{ background:var(--bar-bg-2); color:var(--bar-text); border-top:3px solid var(--accent); } .pxb-footer__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); padding-block:clamp(30px,4vw,46px); } .pxb-footer__top > *{min-width:0} @media (max-width:900px){ .pxb-footer__top{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} } .pxb-footer__brand p{ color:var(--bar-muted); font-size:.9rem; margin:.9rem 0 0; max-width:46ch; } .pxb-footer .pxb-logo{margin-bottom:.2rem} .pxb-footer__title{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:600; color:var(--bar-text); margin:0 0 .45rem; /* ссылки ниже получили padding-block .55rem */ padding-bottom:.5rem; border-bottom:1px solid var(--bar-border); } .pxb-footer ul{list-style:none;margin:0;padding:0} .pxb-footer li{margin:0} .pxb-footer a{ color:var(--bar-muted); font-size:.92rem; text-decoration:none; } .pxb-footer li a{display:inline-block;padding-block:.55rem} .pxb-footer a:hover{color:var(--accent-on-light);text-decoration:none} .pxb-footer__contact{color:var(--bar-muted);font-size:.9rem;margin:1.1rem 0 0} .pxb-footer__contact a{color:var(--bar-text);font-weight:500} .pxb-footer__disclaimer{ border-top:1px solid var(--bar-border); padding-block:clamp(18px,2.4vw,24px); display:flex; gap:.8rem; align-items:flex-start; } .pxb-footer__disclaimer > *{min-width:0} .pxb-footer__disclaimer p{ color:var(--bar-muted); font-size:.84rem; line-height:1.6; margin:0; } .pxb-footer__disclaimer .pxb-badge-18{ border-color:var(--accent-on-light); color:var(--accent-on-light); margin-top:.15rem; } .pxb-footer__bottom{ border-top:1px solid var(--bar-border); padding-block:16px; display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; justify-content:space-between; } .pxb-footer__bottom > *{min-width:0} .pxb-footer__bottom p{ margin:0; font-size:.82rem; color:var(--bar-muted); } /* ---------- utilities ---------- */ .pxb-visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .pxb-center{text-align:center} /* sa-responsive-net */ table th{white-space:nowrap} figure,blockquote,dl,dd,fieldset{margin:0} /* sa-logo-chip */ .pxb-footer .pxb-logo__img{filter:none;background:transparent;padding:0} .pxb-footer .pxb-footer__logo-chip{background:transparent;padding:0} /* sa-logo-fit */ .pxb-logo__img{object-fit:contain} /* sa-hero-media */ .pxb-hero:has(>.pxb-hero__img){position:relative;isolation:isolate} .pxb-hero:has(>.pxb-hero__img)>.pxb-hero__img{z-index:0} .pxb-hero:has(>.pxb-hero__img)::after{z-index:1} :where(.pxb-hero:has(>.pxb-hero__img)>:not(.pxb-hero__img)){position:relative} .pxb-hero:has(>.pxb-hero__img)>:not(.pxb-hero__img){z-index:2} /* sa-rhythm */ :where(.pxb-table-wrap){margin-block:1.5rem} :where(main) :where(ul,ol,table,.pxb-table-wrap)+p{margin-block-start:1rem}