/* ============================================================ main.css — полный стиль (грузится async) Токены и критический каркас — инлайном в . ============================================================ */ /* ---------- база ---------- */ ::selection{background:rgba(62,92,118,.18);} .section--dark ::selection{background:rgba(233,237,234,.25);} a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ---------- секции ---------- */ .section{padding-block:calc(var(--gap-section) / 2);} .section + .section{border-top:1px solid var(--line);} main > .section:first-of-type{border-top:1px solid var(--line);} /* координатный индекс секции */ .idx{ display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:var(--track-index); text-transform:uppercase; color:var(--ink-3); margin-bottom:clamp(28px,5vw,48px); } .idx::after{ content:""; display:inline-block; width:32px;height:1px; background:var(--line); margin-left:12px; vertical-align:3px; } h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.85rem,1.3rem + 2.6vw,2.9rem); line-height:1.15; letter-spacing:-.015em; margin-bottom:clamp(28px,5vw,48px); max-width:24ch; } h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.25rem,1.1rem + .7vw,1.5rem); line-height:1.25; } /* мостик — крупнее обычного тела, editorial */ #bridge .col p{ font-size:clamp(1.125rem,1rem + .6vw,1.3125rem); line-height:1.55; } /* ---------- манифест: инверсная тёмная секция ---------- */ .section--dark{ background:var(--dark); color:var(--dark-ink); padding-block:calc(var(--gap-section) / 1.6); } .section + .section--dark{border-top:none;} .section--dark + .section{border-top:none;} .section--dark .idx{color:var(--dark-ink-2);} .section--dark .idx::after{background:var(--dark-line);} .manifest p{ font-family:var(--serif); font-weight:400; font-size:clamp(1.3125rem,1.05rem + 1.4vw,1.75rem); line-height:1.45; } .manifest p + p{margin-top:1.1em;} /* ---------- что я делаю: три опорные точки ---------- */ .triad{position:relative;} .triad-item{position:relative;padding-left:24px;} .triad-item + .triad-item{margin-top:clamp(40px,8vw,64px);} /* вертикальная связующая линия (мобайл) — чертёжный коннектор, dashed */ .triad::before{ content:""; position:absolute; left:3.5px;top:8px;bottom:8px; width:0; border-left:1px dashed var(--line); } .vertex{ display:block; margin-bottom:14px; text-transform:uppercase; } .vertex::before{ content:""; position:absolute; left:0; margin-top:3px; width:8px;height:8px; background:var(--bg); border:1px solid var(--ink-3); } .triad-item h3{margin-bottom:.6em;max-width:28ch;} .triad-item p{max-width:66ch;} /* ---------- когда меня зовут ---------- */ .fit-no{margin-top:2em;margin-bottom:.6em;} /* ---------- кейсы ---------- */ .section--cases{position:relative;} .case{ border-top:1px solid var(--line); position:relative; } .case:last-of-type{border-bottom:1px solid var(--line);} /* угловая засечка-крестик на пересечении хайрлайнов */ .case::before, .case:last-of-type::after{ content:""; position:absolute; top:-3.5px;left:-3.5px; width:7px;height:7px; background: linear-gradient(var(--ink-3),var(--ink-3)) center/1px 100% no-repeat, linear-gradient(var(--ink-3),var(--ink-3)) center/100% 1px no-repeat; opacity:.5; } .case:last-of-type::after{top:auto;bottom:-3.5px;} .case summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:16px; padding-block:clamp(20px,4vw,28px); } .case summary::-webkit-details-marker{display:none;} .case summary::after{ content:"+"; margin-left:auto; font-family:var(--mono); font-size:1.1rem; color:var(--ink-3); flex-shrink:0; transition:transform .18s ease; } .case[open] summary::after{transform:rotate(45deg);} .case-idx{position:relative;padding-left:16px;flex-shrink:0;} /* треугольный маркер у числа кейса — единственное место акцента кроме CTA */ .case-idx::before{ content:""; position:absolute; left:0;top:50%; transform:translateY(-58%); width:8px;height:8px; background:var(--accent); clip-path:polygon(50% 0,100% 100%,0 100%); } .case h3{max-width:30ch;} .case-wip{ font-style:normal; font-family:var(--mono); font-size:.75rem; letter-spacing:var(--track-label); color:var(--ink-2); text-transform:uppercase; white-space:nowrap; } .case-body{ padding-bottom:clamp(24px,4vw,36px); max-width:66ch; } .case-body strong{font-weight:560;} .nda{margin-top:1.4em;color:var(--ink-2);} /* ---------- FAQ ---------- */ .qa{border-top:1px solid var(--line);} .qa:last-of-type{border-bottom:1px solid var(--line);} .qa summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:16px; padding-block:clamp(18px,3.5vw,24px); } .qa summary::-webkit-details-marker{display:none;} .qa summary::after{ content:"+"; margin-left:auto; font-family:var(--mono); font-size:1.1rem; color:var(--ink-3); flex-shrink:0; transition:transform .18s ease; } .qa[open] summary::after{transform:rotate(45deg);} .qa h3{ font-family:var(--sans); font-weight:480; font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem); line-height:1.4; } .qa-body{padding-bottom:clamp(20px,3.5vw,28px);} .qa-body p{color:var(--ink-2);} /* ---------- контакты / форма ---------- */ .section--contact{padding-bottom:calc(var(--gap-section) / 1.4);} .contact-form{ margin-top:clamp(36px,6vw,56px); max-width:560px; } .field + .field{margin-top:24px;} .field label{ display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-2); margin-bottom:8px; } .field input[type="text"], .field textarea{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--bg); border:none; border-bottom:1px solid var(--ink-3); border-radius:0; padding:10px 2px; min-height:48px; transition:border-color .18s ease; } .field textarea{resize:vertical;min-height:96px;} .field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--accent); } .field input:user-invalid, .field textarea:user-invalid{ border-bottom:2px solid var(--ink); } .field--consent{ display:flex; gap:12px; align-items:flex-start; margin-top:28px; } .field--consent input{ width:22px;height:22px; margin-top:2px; flex-shrink:0; accent-color:var(--accent); } .field--consent label{ text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:.875rem; color:var(--ink-2); margin:0; padding-block:4px; } .cta--submit{ border:none; background:var(--accent); color:var(--bg); cursor:pointer; margin-top:32px; min-width:200px; } .cta--submit:hover{background:var(--ink);color:var(--bg);} .form-status{ margin-top:16px; font-size:.9375rem; color:var(--ink-2); min-height:1.4em; } .direct-line{ margin-top:20px; font-size:.9375rem; color:var(--ink-2); } .direct-line a{text-underline-offset:3px;} /* ---------- футер ---------- */ .footer{ border-top:1px solid var(--line); padding-block:32px calc(32px + 64px); /* запас под sticky CTA на мобиле */ } .footer-line{text-transform:none;letter-spacing:var(--track-label);} .footer a{color:var(--ink-2);text-decoration:none;} .footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} /* ---------- sticky CTA (мобайл) ---------- */ .sticky-cta{ position:fixed; left:0;right:0;bottom:0; z-index:20; display:flex; align-items:stretch; background:var(--bg); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); transform:translateY(102%); transition:transform .25s ease; } .sticky-cta.show{transform:none;} .sticky-cta-link{ flex:1; display:flex; align-items:center; justify-content:center; min-height:52px; font-weight:500; font-size:1rem; text-decoration:none; color:var(--accent); } .sticky-cta-close{ width:52px; border:none; border-left:1px solid var(--line); background:none; font-size:1.25rem; color:var(--ink-3); cursor:pointer; } /* ---------- reveal: нативный scroll-driven, фолбэк — IO ---------- */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .reveal{ animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 50%; } } /* класс .io ставит JS только при отсутствии поддержки scroll-driven */ .io .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; } .io .reveal.in{opacity:1;transform:none;} } @keyframes rise{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} } @media (prefers-reduced-motion: reduce){ .reveal{animation:none !important;opacity:1 !important;transform:none !important;} html{scroll-behavior:auto;} } /* ---------- десктоп ---------- */ @media (min-width: 768px){ .footer{padding-block:40px;} .sticky-cta{display:none;} /* кейсы: асимметрия 5/12 + 7/12 */ .case summary{gap:24px;} .case-body{ display:grid; grid-template-columns:5fr 7fr; column-gap:clamp(32px,5vw,64px); max-width:none; } .case-body > p{grid-column:2;max-width:66ch;} .case-body > p:first-child{grid-column:1;grid-row:1 / span 4;} /* десктоп: аккордеон нейтрализуется JS (все открыты) */ .case.static summary{cursor:default;} .case.static summary::after{display:none;} .section--contact .wrap{ display:grid; grid-template-columns:5fr 7fr; column-gap:clamp(48px,6vw,96px); } .section--contact .idx{grid-column:1 / -1;} .section--contact h2{grid-column:1;} .section--contact .col{grid-column:1;} .section--contact .contact-form{grid-column:2;grid-row:2 / span 2;margin-top:0;} .section--contact .direct-line{grid-column:2;} } @media (min-width: 1024px){ .hero-sub{max-width:40ch;} /* триада горизонтально: три вершины, связанные линией */ .triad{ --triad-gap:clamp(32px,4vw,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--triad-gap); } .triad::before{ left:4px;right:auto;top:7px;bottom:auto; width:calc(66.666% + .666 * var(--triad-gap) + 4px); height:0; border-left:none; border-top:1px dashed var(--line); } .triad-item + .triad-item{margin-top:0;} .triad-item{padding-left:0;padding-top:28px;} .vertex::before{left:0;top:3px;margin-top:0;} }