:root{ --ground:#F7F4EF; --raised:#FFFFFF; --ink:#1A1A18; --ink-soft:#6E6A62; --gold:#BB9761; --gold-text:#8A6A38; --line:rgba(26,26,24,.13); --line-soft:rgba(26,26,24,.07); --ink-rgb:26,26,24; --gold-rgb:187,151,97; --charcoal:#1A1A18; --gold-light:#D8C3A0; --gold-dark:#8A6A38; /* The accent gold is 2.48:1 against the page — too weak for a focus ring, which WCAG holds to 3:1 as a non-text indicator. These two measure 4.6:1 on the light ground and 9.9:1 on the dark one. */ --focus:#8A6A38; --ease:cubic-bezier(.4,0,.2,1); color-scheme:light; --f-display:'Geist',system-ui,-apple-system,sans-serif; --f-body:'Inter',system-ui,-apple-system,sans-serif; --f-mono:'PlexMono',ui-monospace,'SFMono-Regular',monospace; --s--1:clamp(.78rem,.75rem + .12vw,.85rem); --s-0:clamp(.95rem,.92rem + .16vw,1.05rem); --s-1:clamp(1.08rem,1.02rem + .3vw,1.3rem); --s-2:clamp(1.3rem,1.15rem + .68vw,1.85rem); --s-3:clamp(1.6rem,1.32rem + 1.3vw,2.6rem); --s-4:clamp(2.15rem,1.5rem + 2.9vw,4.2rem); --gut:clamp(1.15rem,5vw,3.5rem); /* the gap the floating header keeps from the top edge and the sides */ --hdr-gap:clamp(.55rem,1.4vw,1rem); /* The site's one corner radius. Small enough not to fight a squared-off design, big enough to read as a deliberate edge. Buttons and the floating header share it so they can never drift apart. */ --r:6px; --hdr-radius:var(--r); --bay:clamp(3rem,8vw,6.5rem); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:#15140F;--raised:#1D1C17;--ink:#F2EFE8;--ink-soft:#A29C90; --gold:#C9A970;--gold-text:#D5B87F;--focus:#D5B87F; --line:rgba(242,239,232,.16);--line-soft:rgba(242,239,232,.08); --ink-rgb:242,239,232;--gold-rgb:201,169,112; --charcoal:#0E0D0A;--gold-light:#8A7654; color-scheme:dark; } } :root[data-theme="dark"]{ --ground:#15140F;--raised:#1D1C17;--ink:#F2EFE8;--ink-soft:#A29C90; --gold:#C9A970;--gold-text:#D5B87F; --line:rgba(242,239,232,.16);--line-soft:rgba(242,239,232,.08); --ink-rgb:242,239,232;--gold-rgb:201,169,112; --charcoal:#0E0D0A;--gold-light:#8A7654; color-scheme:dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* The UA stylesheet's [hidden]{display:none} loses to any explicit display on the element itself, so a component with display:flex stayed visible after JS set hidden on it. Three of them did. This settles the whole class. */ [hidden]{display:none !important} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--f-body);font-size:var(--s-0);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* The legacy stylesheet carries .single{margin-top:-80px;padding-bottom:5px} and .blog{margin-top:-80px}, written for a fixed 80px bar that no longer exists. WordPress puts both of those words on as body classes, so on every service page and every article the entire document was pulled up by exactly one header height: the hero began at y=0, its whole top padding sat behind the island, and the breadcrumb came out flush against the glass. .search{margin-top:-65px;margin-bottom:95px} is the same trap on the search results page. Scoped to body so the legacy sections that really do carry class="single" / class="blog" (page.php, category.php) keep their own rules. */ body.single,body.blog{margin-top:0;padding-bottom:0} body.search{margin-top:0;margin-bottom:0} h1,h2,h3,h4{font-family:var(--f-display);margin:0;font-weight:500;letter-spacing:-.022em;line-height:1.08;text-wrap:balance} p{margin:0} ul{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px} /* Breakpoint ladder. Component-level on purpose — each block changes where its own content needs to, not at a house-wide device width. The rungs: 40rem 640 large phone, landscape 44rem 704 two columns become readable 48rem 768 tablet portrait 60rem 960 small laptop 64rem 1024 three columns become readable 70rem 1120 the full header row fits (measured, see the header block) */ .wrap{width:100%;max-width:78rem;margin:0 auto;padding-inline:var(--gut)} .eyebrow{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.15em; text-transform:uppercase;color:var(--ink-soft); } .rule{display:flex;align-items:center;gap:.9rem} .rule::after{content:"";flex:1;height:1px;background:var(--line);max-width:9rem} /* ================= header ================= */ /* A floating island rather than a bar fastened to the top edge. It stays sticky rather than becoming fixed: in flow, no template has to know the header's height, and the eight page templates keep working untouched. body carries the gap above it, and once the page scrolls the island sticks at that same gap with the content passing under the glass. */ .hdr{ position:sticky;top:0;z-index:60; padding:calc(env(safe-area-inset-top,0px) + var(--hdr-gap)) clamp(.75rem,2.6vw,2.25rem) 0; /* the gutter either side of the island is empty space, and empty space should not eat clicks meant for the page underneath */ pointer-events:none; } /* The row is deliberately unshrinkable: brand and nav both keep their intrinsic width, so if the three of them ever stop fitting the row overflows measurably instead of letting the brand collapse under the menu — which is exactly what it used to do in Russian. */ .hdr__in{ pointer-events:auto; display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem);min-height:64px; max-width:78rem;margin-inline:auto; padding-inline:clamp(.9rem,2vw,1.4rem); background:color-mix(in srgb,var(--ground) 74%,transparent); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); border:1px solid var(--line-soft); border-radius:var(--hdr-radius); box-shadow:0 10px 30px -12px color-mix(in srgb,var(--ink) 22%,transparent); } /* Safari before 18 has no backdrop-filter on an element that also has a translucent background in some compositing paths; an opaque-ish fallback is better than text on top of moving content. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr__in{background:color-mix(in srgb,var(--ground) 96%,transparent)} } .brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;min-height:44px;flex:none} /* The inline SVG carries a viewBox but no width/height attribute, so width:auto resolves to 0 inside the flex row and the mark disappeared. aspect-ratio gives it an intrinsic size to work from. */ .brand svg{ height:32px;width:auto;flex:none; aspect-ratio:1297/1614; color:var(--gold); } /* Two lines rather than one: the mark is portrait, so a single line of type beside it made the glyph look bigger than its own name. Stacked, the words stand about as tall as the mark. */ .brand__n{ display:flex;flex-direction:column; font-family:var(--f-display);font-size:.9rem;font-weight:400; letter-spacing:.012em;line-height:1.12;white-space:nowrap; } /* The second word takes the mark's colour, in the variant meant for text - the mark's own gold is a graphic tone and does not carry enough contrast at this size. */ .brand__n .brand__b{color:var(--gold-text)} @media (max-width:47.99rem){ .brand svg{height:24px} .brand__n{font-size:.94rem} } .nav{display:none} .nav a{ position:relative; display:inline-flex;align-items:center;min-height:44px; font-size:clamp(.72rem,.62rem + .18vw,.82rem); letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; font-family:var(--f-mono);color:var(--ink-soft); transition:color .2s var(--ease); } .nav a:hover,.nav a[aria-current="page"]{color:var(--ink)} /* underline drawn from the left, retracted to the right */ .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:9px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .34s cubic-bezier(.16,1,.3,1); } .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .hdr__util{display:flex;align-items:center;gap:.45rem} .lang{display:flex;align-items:center;gap:.15rem} /* Utility controls are the one place the sharp geometry relaxes: a pill for the active language, a circle for the theme. They read as instruments rather than as content, which is exactly the distinction on-ity draws. */ .lang a{ position:relative; font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em; color:var(--ink-soft);padding:.34rem .5rem;border-radius:999px; display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem; transition:color .2s var(--ease),background .2s var(--ease); } /* The visible pill is deliberately small; the target underneath it is not. */ .lang a::after{content:"";position:absolute;inset:-.45rem -.15rem} .hdr__util .icon-btn::after{content:"";position:absolute;inset:-3px} .hdr__util .icon-btn{position:relative} .lang a[aria-current="true"]{ /* gold-on-gold-tint measured 4.07:1, below the 4.5 floor for 11.5px text. The tint still carries the state; the label takes the ink colour. */ color:var(--ink); background:color-mix(in srgb,var(--gold) 16%,transparent); } .lang a:hover{color:var(--gold-text)} .icon-btn{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none; background:none;border:0;cursor:pointer;color:var(--ink-soft); transition:color .2s var(--ease); } .hdr__util .icon-btn{ width:38px;height:38px;border:1px solid var(--line);border-radius:50%; transition:color .2s var(--ease),border-color .2s var(--ease); } .hdr__util .icon-btn:hover{border-color:var(--gold)} .icon-btn:hover{color:var(--gold-text)} .icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5} .sun{display:block}.moon{display:none} :root[data-theme="dark"] .sun{display:none} :root[data-theme="dark"] .moon{display:block} /* Same selectors as above, deliberately placed after them: at equal specificity the later rule wins, and this has to win once the row has to share space with the burger on the narrowest phones instead of getting its own strip above. */ @media (max-width:26.5rem){ .hdr__in{gap:.55rem} .hdr__util{gap:.3rem} .lang{gap:.05rem} .lang a{font-size:.66rem;padding:.3rem .4rem;min-width:1.7rem} .hdr__util .icon-btn{width:34px;height:34px} } /* Scoped with .hdr so these win over the later .btn/.icon-btn display rules — at equal specificity the button block would otherwise unhide them on mobile. */ .hdr .hdr__cta{display:none} .hdr .burger{display:flex} .burger svg{width:20px;height:20px} /* ================= side menu ================= A panel that slides in from the right over a dimmed page, rather than a full-screen takeover. Two screens live inside it: the main list, and a services screen that replaces it in place. The head swaps between the brand and a back control, which is the only thing telling you which screen you are on, so it carries the current screen's name. */ /* Затемнение лежит ПОД панелью (69 против 70), поэтому backdrop-filter панели размывает не страницу, а страницу, уже затемнённую этой шторкой. При .5 сквозь панель просвечивала ровная серая муть - оттого меню и читалось плоской серой плитой, а не стеклом. .32 хватает, чтобы фон ощущался выключенным, но сквозь панель уже видно очертания страницы. */ .drawer__scrim{ position:fixed;inset:0;z-index:69; background:rgba(0,0,0,.32); opacity:0;pointer-events:none; transition:opacity .25s var(--ease); } .drawer__scrim[data-open="true"]{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;bottom:0;z-index:70; width:min(85vw,24rem); display:flex;flex-direction:column;overflow:hidden; /* Те же три значения, что у островка шапки (.hdr__in), - панель должна быть из того же стекла, а не из своего. Было 88% и blur(30), из-за чего она выглядела плотнее и глуше островка. */ background:color-mix(in srgb,var(--ground) 74%,transparent); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); border-left:1px solid var(--line-soft); /* тень тоже по образцу островка: мягкая и на цвете чернил, а не чёрный дым, который добавлял панели серости у левого края */ box-shadow:-10px 0 30px -12px color-mix(in srgb,var(--ink) 22%,transparent); transform:translateX(100%); /* visibility is delayed off the transition so the panel is not focusable while it is sliding away, but is present the instant it slides in */ visibility:hidden; transition:transform .3s cubic-bezier(.32,.72,0,1),visibility 0s .3s; } .drawer[data-open="true"]{ transform:none;visibility:visible; transition:transform .3s cubic-bezier(.32,.72,0,1); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .drawer{background:color-mix(in srgb,var(--ground) 96%,transparent)} } /* В тёмной теме те же 74% работают иначе. Стекло видно там, где сквозь него пробивается разница в яркости; когда и панель, и страница под ней почти чёрные, разнице взяться неоткуда - и панель читается глухой плитой. Поэтому в тёмной теме обе стеклянные поверхности - островок шапки и меню - становятся заметно прозрачнее, а затемнение под меню слабее: чёрное поверх чёрного ничего не добавляет, кроме глухоты. Значения у островка и меню остаются одинаковыми - это по-прежнему одно стекло. */ :root[data-theme="dark"] .hdr__in, :root[data-theme="dark"] .drawer, :root:not([data-theme="light"]) .hdr__in, :root:not([data-theme="light"]) .drawer{ background:color-mix(in srgb,var(--ground) 58%,transparent); } :root[data-theme="dark"] .drawer__scrim, :root:not([data-theme="light"]) .drawer__scrim{ background:rgba(0,0,0,.2); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .hdr__in, :root:not([data-theme="dark"]) .drawer{ background:color-mix(in srgb,var(--ground) 74%,transparent); } :root:not([data-theme="dark"]) .drawer__scrim{background:rgba(0,0,0,.32)} } @media (prefers-reduced-motion:reduce){ .drawer{transition:visibility 0s .01s} .drawer[data-open="true"]{transition:none} .drawer__scrim{transition:none} } .drawer__head{ flex:none;display:flex;align-items:center;gap:.75rem; min-height:4.5rem; padding:calc(env(safe-area-inset-top,0px) + 1.25rem) 1.25rem 1rem; border-bottom:1px solid var(--line-soft); } .drawer__brand,.drawer__back{ display:flex;align-items:center;gap:.6rem; min-height:44px;margin-right:auto; background:none;border:0;padding:0;cursor:pointer; font-family:var(--f-display);font-size:1.02rem;font-weight:500;letter-spacing:-.015em; color:var(--ink); transition:color .2s var(--ease); } .drawer__brand svg{height:26px;width:auto;flex:none;aspect-ratio:1297/1614;color:var(--gold)} .drawer__brand .brand__n{font-size:.94rem} .drawer__back svg{width:18px;height:18px;flex:none} .drawer__brand:hover,.drawer__back:hover,.drawer__back:focus-visible{color:var(--gold-text)} .drawer[data-level="1"] .drawer__back{display:none} .drawer[data-level="2"] .drawer__brand{display:none} .drawer__body{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:1.25rem 1.25rem 1.5rem; } .drawer__search{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem} .drawer__search input{ font:inherit;font-size:16px;min-height:48px;padding:0 .9rem; background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:0; } .drawer[data-level="2"] .drawer__search{display:none} /* --- the two screens --- */ .dnav__l1,.dnav__l2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem} .drawer[data-level="2"] .dnav__l1{display:none} .dnav__i{ display:flex;align-items:center;justify-content:space-between;gap:1rem; width:100%;min-height:48px;padding:.6rem .7rem; background:none;border:0;cursor:pointer;text-align:left; font-family:var(--f-display);font-size:var(--s-1);font-weight:500;letter-spacing:-.02em; color:var(--ink); transition:background-color .2s var(--ease),color .2s var(--ease); } .dnav__i:hover,.dnav__i:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--gold-text)} .dnav__i[aria-current="page"]{color:var(--gold-text);background:color-mix(in srgb,var(--ink) 4%,transparent)} .dnav__c{width:16px;height:16px;flex:none;opacity:.5} .dnav__i:hover .dnav__c{opacity:1} .dnav__i--all{ font-size:var(--s-0);color:var(--gold-text); border-bottom:1px solid var(--line-soft);margin-bottom:.6rem; } /* --- service groups, the level-2 accordion --- */ .dgrp__t{ display:flex;align-items:center;justify-content:space-between;gap:1rem; width:100%;min-height:44px;padding:.55rem .7rem; background:none;border:0;cursor:pointer;text-align:left; font-family:var(--f-body);font-size:var(--s-0);font-weight:500; color:var(--ink); transition:background-color .2s var(--ease),color .2s var(--ease); } .dgrp__t:hover,.dgrp__t:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent)} .dgrp__c{width:16px;height:16px;flex:none;opacity:.5;transition:transform .2s var(--ease)} .dgrp__t[aria-expanded="true"]{color:var(--gold-text)} .dgrp__t[aria-expanded="true"] .dgrp__c{transform:rotate(180deg);opacity:1} .dgrp__l{list-style:none;margin:0 0 .35rem;padding:0 0 0 .7rem;display:flex;flex-direction:column} .dgrp__l a{ display:flex;align-items:center;min-height:44px;padding:.4rem .7rem; font-size:var(--s--1);line-height:1.4;color:var(--ink-soft); border-left:1px solid var(--line-soft); transition:color .2s var(--ease),border-color .2s var(--ease); } .dgrp__l a:hover,.dgrp__l a:focus-visible{color:var(--ink);border-left-color:var(--gold)} /* --- foot --- */ .drawer__foot{ flex:none;display:flex;flex-direction:column;gap:.55rem; border-top:1px solid var(--line-soft); padding:1rem 1.25rem calc(env(safe-area-inset-bottom,0px) + 1rem); } .dphone{ position:relative;display:flex;align-items:center;gap:.5rem; min-height:48px;padding:.5rem .5rem .5rem .8rem; border:1px solid var(--line); margin-bottom:.35rem; } .dphone__n{ flex:1;font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.04em; color:var(--ink);transition:color .2s var(--ease); } .dphone__n:hover{color:var(--gold-text)} .dphone__c{ flex:none;display:flex;align-items:center;justify-content:center; width:40px;height:40px;background:none;border:0;cursor:pointer; color:var(--ink-soft);transition:color .2s var(--ease); } .dphone__c:hover,.dphone__c:focus-visible{color:var(--gold-text)} .dphone__c svg{width:19px;height:19px} /* The confirmation covers the number rather than sitting beside it: the row is already tight, and a message that appears next to the number pushes the copy button under the thumb that just pressed it. */ .dphone__ok{ position:absolute;inset:1px 46px 1px 1px; display:flex;align-items:center;padding-left:.7rem; background:var(--ground);color:var(--gold-text); font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.04em; opacity:0;pointer-events:none;transition:opacity .2s var(--ease); } .dphone.is-copied .dphone__ok{opacity:1} .drawer__cta{width:100%;justify-content:center} /* One row for everything, on-ity style: brand, menu, theme, language, call. That only fits because the two longest menu labels were shortened — with «Условия сотрудничества» in it the row needed a viewport of about 1400px. fitHeader() re-checks the real widths once the display font has swapped in and hands the menu back to the burger if anything still overflows. */ @media (min-width:48rem){ .hdr__util .lang{display:flex} } @media (min-width:70rem){ .nav{display:flex;flex:none;gap:clamp(.85rem,1.25vw,1.3rem)} .hdr .hdr__cta{display:inline-flex} .hdr .burger{display:none} } .hdr__in.hdr--compact .nav{display:none} .hdr__in.hdr--compact .burger{display:flex} /* ================= buttons ================= */ .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0 1.5rem;border-radius:var(--r); font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase; border:1px solid var(--ink);background:var(--ink);color:var(--ground); cursor:pointer;transition:opacity .2s var(--ease),background .2s var(--ease),color .2s var(--ease); } .btn:hover{opacity:.85} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--ink);opacity:1} .btn--gold{background:var(--gold);border-color:var(--gold);color:#1A1A18} .btn--gold:hover{opacity:.9} /* ================= hero ================= */ .hero{position:relative;isolation:isolate;overflow:hidden} #flow{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero__veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(175deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 80%,transparent) 45%,color-mix(in srgb,var(--ground) 55%,transparent) 100%); } @media (min-width:60rem){ .hero__veil{background:linear-gradient(100deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 78%,transparent) 38%,color-mix(in srgb,var(--ground) 12%,transparent) 68%,transparent 100%)} } .hero__in{position:relative;z-index:2;padding-block:clamp(3.5rem,13vw,8rem) clamp(3rem,9vw,6rem)} .hero h1{font-size:var(--s-4);max-width:14ch;margin-top:clamp(1.4rem,4vw,2.2rem)} .hero h1 em{font-style:normal;color:var(--gold-text)} .hero__sub{margin-top:clamp(1.3rem,3.5vw,2rem);max-width:42ch;font-size:var(--s-1);color:var(--ink-soft);line-height:1.5} .hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.9rem,5vw,2.8rem)} .hero__cta .btn{flex:1 1 auto;min-width:14rem} @media (min-width:40rem){.hero__cta .btn{flex:0 0 auto;min-width:0}} /* ================= facts ================= */ .facts{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--line-soft);border-block:1px solid var(--line-soft); } @media (min-width:60rem){.facts{grid-template-columns:repeat(4,1fr)}} .fact{background:var(--ground);padding:clamp(1.3rem,4vw,2.2rem) clamp(1rem,3vw,1.6rem)} .fact__n{ font-family:var(--f-display);font-size:var(--s-3);font-weight:500; letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums; } .fact__n--word{font-size:var(--s-2)} .fact__l{margin-top:.55rem;font-size:var(--s--1);color:var(--ink-soft);line-height:1.4} /* ================= sections ================= */ .sec{padding-block:var(--bay);border-bottom:1px solid var(--line-soft)} .sec--dark{background:#1A1A18;color:#F2EFE8;border-bottom:0} :root[data-theme="dark"] .sec--dark{background:#0E0D0A} .sec--dark .eyebrow,.sec--dark .card__d{color:rgba(242,239,232,.62)} .sec--dark .rule::after{background:rgba(242,239,232,.2)} .sec__head{margin-bottom:clamp(1.8rem,5vw,3rem)} .sec__head h2{font-size:var(--s-3);max-width:18ch;margin-top:1.1rem} .sec__lede{margin-top:1rem;max-width:46ch;color:var(--ink-soft);font-size:var(--s-1);line-height:1.5} /* cards grid */ .grid{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} @media (min-width:44rem){.grid--2{grid-template-columns:repeat(2,1fr)}} @media (min-width:44rem){.grid--3{grid-template-columns:repeat(2,1fr)}} @media (min-width:64rem){.grid--3{grid-template-columns:repeat(3,1fr)}} .card{background:var(--ground);padding:clamp(1.3rem,3.5vw,2rem);display:flex;flex-direction:column;gap:.6rem} .sec--dark .card{background:#1A1A18} :root[data-theme="dark"] .sec--dark .card{background:#0E0D0A} .card__k{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;color:var(--gold-text)} .card h3{font-size:var(--s-1)} .card__d{font-size:var(--s--1);color:var(--ink-soft);line-height:1.6} /* service groups */ .svc{border-top:1px solid var(--line)} .svc__row{ display:grid;grid-template-columns:1fr;gap:.5rem; padding-block:clamp(1.15rem,3.5vw,1.7rem);border-bottom:1px solid var(--line-soft); } @media (min-width:48rem){.svc__row{grid-template-columns:14rem 1fr;gap:2rem;align-items:baseline}} .svc__t{font-family:var(--f-display);font-size:var(--s-1);font-weight:500;letter-spacing:-.02em} .svc__d{ display:block;margin-top:.45rem; font-family:var(--f-body);font-size:var(--s--1);font-weight:400; letter-spacing:0;color:var(--ink-soft);line-height:1.55; } .svc__more{margin-top:2rem} /* Adjacent links with only a flex gap between them read as one run-on phrase — "Налоговый аудит Инициативный аудит" with no visible break. A small neutral dot in the gap marks the boundary without competing with the gold accent used for real emphasis elsewhere. */ .svc__l{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0} .svc__l a{ display:inline-flex;align-items:center;min-height:44px; font-size:var(--s--1);color:var(--ink-soft); border-bottom:1px solid transparent; transition:color .2s var(--ease),border-color .2s var(--ease); } .svc__l a:not(:last-child)::after{ content:"";display:inline-block;flex:none; width:3px;height:3px;border-radius:50%; margin:0 .8rem;background:var(--line); vertical-align:middle; } .svc__l a:hover{color:var(--ink);border-bottom-color:var(--gold)} /* steps */ .steps{ counter-reset:st;display:grid;gap:1px; background:var(--line-soft);border:1px solid var(--line-soft); /* it is an

; it should not shout */ .pkg__t strong{font-weight:500} .pkg__from{margin-top:.3rem;font-size:var(--s--1);color:var(--ink-soft)} .pkg__from b{ font-family:var(--f-display);font-size:var(--s-2);font-weight:500; letter-spacing:-.02em;color:var(--ink); } .pkg__per{display:block;font-size:var(--s--1);color:var(--ink-soft)} .pkg__more{ margin-top:.5rem;font-family:var(--f-mono);font-size:var(--s--1); letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text); display:inline-flex;align-items:center;gap:.5rem; } .pkg__more::after{content:"→";transition:transform .2s var(--ease)} .pkg__head:hover .pkg__more::after{transform:translateX(3px)} .pkg.is-open .pkg__more{display:none} .pkg:not(.is-open) .pkg__body{display:none} .pkg__body{padding:0 clamp(1.1rem,3vw,1.7rem) clamp(1.1rem,3vw,1.7rem)} .tiers{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} @media (min-width:48rem){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}} .tier{background:var(--ground);padding:clamp(1rem,2.5vw,1.35rem);display:flex;flex-direction:column;gap:.5rem} .tier{transition:background-color .25s var(--ease)} .tier:hover{background:color-mix(in srgb,var(--gold) 5%,var(--ground))} .tier--best{box-shadow:inset 0 2px 0 0 var(--gold)} .tier__go{margin-top:auto;padding-top:.9rem} .tier__go .btn{width:100%;justify-content:center;min-height:44px;padding-inline:1rem} .tier__n{font-family:var(--f-display);font-size:var(--s-0);font-weight:500;color:var(--ink)} .tier__best{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em; text-transform:uppercase;color:var(--gold-text); } .tier__p{font-size:var(--s--1);color:var(--ink-soft)} .tier__p b{font-family:var(--f-display);font-size:var(--s-1);font-weight:500;color:var(--ink);letter-spacing:-.02em} .tier__l{display:grid;gap:.45rem;margin:.2rem 0 0;padding:0;list-style:none} .tier__l li{position:relative;padding-left:1.2rem;font-size:var(--s--1);color:var(--ink-soft);line-height:1.5} .tier__l li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--gold)} .tier__rest{margin-top:.2rem} .tier__rest summary{ cursor:pointer;list-style:none; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em; text-transform:uppercase;color:var(--gold-text); min-height:44px;display:flex;align-items:center;gap:.4rem; } .tier__rest summary::-webkit-details-marker{display:none} .tier__rest summary::after{content:"+";font-size:1.1em;line-height:1} .tier__rest[open] summary::after{content:"−"} .tar__note{ margin-top:clamp(1.2rem,3vw,1.8rem);max-width:60ch; font-size:var(--s--1);color:var(--ink-soft);line-height:1.7; } /* one-off services */ .once{width:100%;border-collapse:collapse;border-top:1px solid var(--line)} .once th,.once td{text-align:left;padding:clamp(.85rem,2.2vw,1.15rem) 0;border-bottom:1px solid var(--line-soft);vertical-align:top} .once thead th{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em; text-transform:uppercase;color:var(--ink-soft);font-weight:400; } .once tbody th{font-weight:400;color:var(--ink);padding-right:1.5rem;line-height:1.5} .once tbody td{font-family:var(--f-mono);font-size:var(--s--1);color:var(--ink);white-space:nowrap} @media (max-width:44rem){ .once thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(100%)} .once tr{display:block;border-bottom:1px solid var(--line-soft)} .once th,.once td{display:block;border:0;padding-block:.2rem} .once tbody th{padding-top:.9rem} .once tbody td{padding-bottom:.9rem;color:var(--gold-text)} } /* publications ------------------------------------------------------------------ A list, not a card wall: three articles laid out as cards would look like a grid with pieces missing, and only two of the three carry a picture at all. */ /* Category switcher above the list. Deliberately quieter than .btn: it is a way to move sideways through the same material, not a call to act. */ .chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(1.2rem,3vw,1.8rem)} .chip{ display:inline-flex;align-items:center;min-height:2.1rem; padding:.25rem .8rem;border:1px solid var(--line);border-radius:var(--r); font-size:var(--s--1);color:var(--ink-soft); transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease); } .chip:hover{color:var(--ink);border-color:var(--ink-soft)} .chip.is-on{ background:color-mix(in srgb,var(--ink) 6%,transparent); color:var(--ink);border-color:transparent; } .arts{border-top:1px solid var(--line)} .art{ display:grid;grid-template-columns:1fr;gap:1rem; padding-block:clamp(1.4rem,4vw,2.2rem); border-bottom:1px solid var(--line-soft); } /* the picture column only exists for articles that have a picture, so one without leaves no empty gutter beside it */ @media (min-width:44rem){ .art:has(.art__img){grid-template-columns:13rem 1fr;gap:clamp(1.4rem,4vw,2.2rem);align-items:start} } .art__img{display:block;overflow:hidden;background:var(--raised);aspect-ratio:16/10} .art__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)} .art:hover .art__img img{transform:scale(1.03)} .art__d{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em;color:var(--ink-soft)} .art__t{font-size:var(--s-1);margin:.4rem 0 .5rem;line-height:1.2} .art__t a{color:var(--ink);transition:color .2s var(--ease)} .art__t a:hover{color:var(--gold-text)} .art__x{font-size:var(--s--1);color:var(--ink-soft);line-height:1.6;max-width:62ch} .art__go{margin-top:.6rem} .art__go a{ display:inline-flex;align-items:center;gap:.5rem;min-height:44px; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em; text-transform:uppercase;color:var(--gold-text); } .art__go a::after{content:"92";transition:transform .2s var(--ease)} .art__go a:hover::after{transform:translateX(3px)} .pager{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:clamp(1.5rem,4vw,2.2rem)} .pager a,.pager span{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 .6rem; font-family:var(--f-mono);font-size:var(--s--1); color:var(--ink-soft);border:1px solid var(--line); transition:color .2s var(--ease),border-color .2s var(--ease); } .pager a:hover{color:var(--ink);border-color:var(--ink-soft)} .pager .current{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);border-color:transparent} .pager .dots{border-color:transparent} /* a single article */ .single__body{max-width:72ch} .single__body h2{font-size:var(--s-2);margin-top:2.2rem} .single__body h3{font-size:var(--s-1);margin-top:1.6rem} .single__body img{max-width:100%;height:auto} .single__body table{width:100%;border-collapse:collapse;margin-top:1rem;display:block;overflow-x:auto} .single__body td,.single__body th{border:1px solid var(--line-soft);padding:.6rem .8rem;text-align:left} .single__end{ margin-top:clamp(2rem,5vw,3rem);padding-top:clamp(1.4rem,4vw,2rem); border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1rem;align-items:flex-start; } .single__back{margin-top:1.6rem} .single__back a{ display:inline-flex;align-items:center;gap:.5rem;min-height:44px; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em; text-transform:uppercase;color:var(--gold-text); } .single__back a::before{content:"90"} /* one service */ .svc__body{max-width:70ch} .svc__body h2{font-size:var(--s-2);margin-top:2rem} .svc__body h3{font-size:var(--s-1);margin-top:1.5rem} .svc__body img{max-width:100%;height:auto} .svc__body table{width:100%;border-collapse:collapse;margin-top:1rem;display:block;overflow-x:auto} .svc__body td,.svc__body th{border:1px solid var(--line-soft);padding:.6rem .8rem;text-align:left} /* search box on the results page */ .srch{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;max-width:34rem} .srch input{ flex:1 1 14rem;font:inherit;font-size:16px;min-height:48px;padding:0 .9rem; background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:0; } /* the closing block, set as a ledger entry ------------------------------------------------------------------ Rules, not boxes. The promise sits on its own ruled line with the credentials annotated in the right margin, and the undertakings run beneath it as columns divided by hairlines - the shape of a book, which is the one shape this business actually works in. Nothing here repeats the card, tile or table patterns used elsewhere on the site. */ .trust{border-top:1px solid var(--line);padding-block:clamp(2.2rem,6vw,3.6rem)} .trust__top{ display:flex;flex-wrap:wrap;gap:.6rem 1.5rem; align-items:baseline;justify-content:space-between; } .trust__cred{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.06em; color:var(--ink-soft); } .trust__line{ margin-top:clamp(1.4rem,4vw,2.2rem); padding-bottom:clamp(1.4rem,4vw,2.2rem); border-bottom:1px solid var(--line); display:grid;gap:1rem; } @media (min-width:60rem){ .trust__line{grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start} } .trust__p{ font-size:clamp(1.55rem,4.2vw,2.9rem);font-weight:500; letter-spacing:-.025em;line-height:1.08;color:var(--ink); max-width:22ch;text-wrap:balance; } .trust__lede{font-size:var(--s--1);color:var(--ink-soft);line-height:1.65;max-width:46ch} @media (min-width:60rem){.trust__lede{padding-top:.55rem}} /* Columns divided by rules rather than gaps: a gap makes four tiles, a rule makes four entries. */ .trust__grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr; } @media (min-width:40rem){.trust__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:64rem){.trust__grid{grid-template-columns:repeat(4,1fr)}} .trust__i{ display:flex;gap:.75rem;align-items:flex-start; padding:clamp(1.1rem,3vw,1.6rem) clamp(1rem,2.5vw,1.6rem) clamp(1.1rem,3vw,1.6rem) 0; border-bottom:1px solid var(--line-soft); } @media (min-width:40rem){ .trust__i{border-left:1px solid var(--line-soft);padding-left:clamp(1rem,2.5vw,1.6rem)} .trust__i:nth-child(2n+1){border-left:0;padding-left:0} } @media (min-width:64rem){ .trust__i{border-bottom:0} .trust__i:nth-child(2n+1){border-left:1px solid var(--line-soft);padding-left:clamp(1rem,2.5vw,1.6rem)} .trust__i:first-child{border-left:0;padding-left:0} } .trust__n{ flex:none;font-family:var(--f-mono);font-size:var(--s--1); letter-spacing:.1em;color:var(--gold-text);padding-top:.15em; } .trust__x{font-size:var(--s--1);line-height:1.55;color:var(--ink)} .trust__cta{margin-top:clamp(1.6rem,4vw,2.4rem)} /* a message field arriving pre-filled from a tariff card */ .fld.is-prefilled textarea{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 5%,var(--raised))} /* faq */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line-soft)} .faq summary{ display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none; min-height:60px;padding-block:1rem; font-family:var(--f-display);font-size:var(--s-1);font-weight:500;letter-spacing:-.015em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;color:var(--gold);font-weight:400;font-size:1.3rem;flex:none} .faq details[open] summary::after{content:"–"} .faq__a{padding-bottom:1.4rem;max-width:62ch} .faq__a p{font-size:var(--s--1);color:var(--ink-soft);line-height:1.7} .faq__a p+p{margin-top:.6rem} /* commitments */ .vow{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} @media (min-width:60rem){.vow{grid-template-columns:repeat(3,1fr)}} .vow__i{background:var(--ground);padding:clamp(1.3rem,3.5vw,2rem);display:flex;gap:1rem} .vow__n{font-family:var(--f-mono);font-size:var(--s--1);color:var(--gold-text);flex:none;padding-top:.15rem} .vow__t{font-size:var(--s-0);line-height:1.55} /* crowe */ .crowe{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start} @media (min-width:60rem){.crowe{grid-template-columns:1fr 1.1fr}} .crowe__mark{ font-family:var(--f-display);font-size:var(--s-3);font-weight:500;letter-spacing:.04em; color:var(--gold);border:1px solid var(--gold);padding:1.4rem 1.8rem;display:inline-block; } .crowe__t{font-size:var(--s--1);line-height:1.7;color:rgba(242,239,232,.72)} .crowe__t+.crowe__t{margin-top:.8rem} /* clients */ .cli{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)} @media (min-width:40rem){.cli{grid-template-columns:repeat(2,1fr)}} @media (min-width:64rem){.cli{grid-template-columns:repeat(3,1fr)}} .cli__i{background:var(--ground);padding:clamp(1.2rem,3vw,1.7rem)} .cli__n{font-family:var(--f-display);font-size:var(--s-0);font-weight:500;letter-spacing:-.01em} .cli__p{margin-top:.35rem;font-family:var(--f-mono);font-size:var(--s--1);color:var(--ink-soft);letter-spacing:.06em} /* testimonials */ .rev{background:var(--ground);margin:0;padding:clamp(1.4rem,3.5vw,2rem);display:flex;flex-direction:column;gap:1.1rem} .rev__q{ margin:0;font-size:var(--s-0);line-height:1.6;color:var(--ink); position:relative;padding-left:1.1rem;border-left:2px solid var(--gold); } .rev__c{display:flex;flex-direction:column;gap:.3rem;margin-top:auto} .rev__n{font-family:var(--f-display);font-size:var(--s-0);font-weight:500;letter-spacing:-.01em} .rev__p{font-family:var(--f-mono);font-size:var(--s--1);color:var(--ink-soft);letter-spacing:.05em;line-height:1.5} .rev__l{ display:inline-flex;align-items:center;min-height:44px; font-size:var(--s--1);color:var(--gold-text); border-bottom:1px solid transparent;align-self:flex-start; transition:border-color .2s var(--ease); } .rev__l:hover{border-bottom-color:var(--gold)} /* tariff picker */ .pick{display:grid;grid-template-columns:1fr;gap:.75rem;max-width:44rem} @media (min-width:44rem){.pick{grid-template-columns:repeat(2,1fr)}} .pick__o{ display:flex;flex-direction:column;gap:.3rem;text-align:left; min-height:64px;padding:1rem 1.2rem;cursor:pointer; font:inherit;color:inherit; background:var(--raised);border:1px solid var(--line); transition:border-color .2s var(--ease),background .2s var(--ease); } .pick__o:hover{border-color:var(--gold)} .pick__o[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--raised))} .pick__f{font-family:var(--f-display);font-size:var(--s-1);font-weight:500} .pick__s{font-size:var(--s--1);color:var(--ink-soft)} .pick__note{margin-top:1.4rem;font-size:var(--s--1);color:var(--ink-soft);max-width:44ch;line-height:1.6} .pick__cta{margin-top:1.6rem} /* final cta */ /* Колонки тут заведомо разной высоты: слева заголовок с подписью (~197px), справа форма из трёх полей с кнопкой (~372px). При align-items:end текст прижимался к низу, и над ним зияли 175 пустых пикселей - заголовок начинался сильно ниже первого поля формы. center делит эту разницу пополам и держится, как бы ни переносился заголовок на других ширинах. */ .fin{display:grid;gap:1.5rem;align-items:center} @media (min-width:60rem){.fin{grid-template-columns:1.2fr 1fr}} .fin h2{font-size:var(--s-3)} .fin__form{display:flex;flex-direction:column;gap:.75rem} .fld{display:flex;flex-direction:column;gap:.35rem} .fld label{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .fld input{ font:inherit;font-size:16px;min-height:48px;padding:0 .9rem; background:var(--raised);color:var(--ink); border:1px solid var(--line);border-radius:0; } .fld input:focus-visible{border-color:var(--focus)} /* seo block */ .seo{border-bottom:1px solid var(--line-soft)} .seo__sum{ display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none; min-height:56px;font-family:var(--f-mono);font-size:var(--s--1); letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft); } .seo__sum::-webkit-details-marker{display:none} .seo__sum::after{content:"+";font-size:1.1rem;color:var(--gold)} details[open] .seo__sum::after{content:"–"} .seo__body{padding-bottom:2.5rem;max-width:68ch} .seo__body h3{font-size:var(--s-1);margin-top:1.6rem;margin-bottom:.6rem} .seo__body p{font-size:var(--s--1);color:var(--ink-soft);line-height:1.75} .seo__body p+p{margin-top:.7rem} /* footer */ .ftr{padding-block:var(--bay) calc(env(safe-area-inset-bottom) + 6rem);font-size:var(--s--1)} @media (min-width:60rem){.ftr{padding-bottom:var(--bay)}} .ftr__grid{display:grid;gap:clamp(2rem,4vw,3.5rem)} @media (min-width:48rem){.ftr__grid{grid-template-columns:1.4fr 1fr 1.2fr}} /* The sections column is a list, not a paragraph: give the links their own rows so they stop running together. */ .ftr__links{display:flex;flex-direction:column} .ftr__links a{ display:flex;align-items:center;min-height:44px; border-bottom:1px solid var(--line-soft); } .ftr__links a:last-child{border-bottom:0} @media (min-width:48rem){ .ftr__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem} .ftr__links a{border-bottom:0;min-height:36px} } .ftr__contact{display:flex;flex-direction:column} .ftr h3{font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-bottom:.9rem} .ftr a{color:var(--ink-soft);transition:color .2s var(--ease);display:inline-flex;align-items:center;min-height:44px} .ftr a:hover{color:var(--ink)} .ftr__addr{color:var(--ink-soft);line-height:1.65;max-width:30ch} .ftr__btm{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem} /* sticky mobile cta */ .dock{ position:fixed;left:0;right:0;bottom:0;z-index:55; display:flex;gap:.6rem; padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--ground) 94%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line-soft); } .dock .btn{flex:1} @media (min-width:60rem){.dock{display:none}} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} .rev__lang{color:var(--ink-soft);letter-spacing:.04em} /* Skip link: off-screen until focused, then a proper target in the corner. */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; display:inline-flex;align-items:center;min-height:48px;padding:0 1.5rem; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase; background:var(--ink);color:var(--ground);border:1px solid var(--ink); } .skip-link:focus{left:1rem;top:1rem} #content:focus{outline:none} /* ------------------------------------------------------------------ Calculator on the homepage The step wizard keeps its own markup and behaviour; here it is only recoloured, and the final sum is replaced by a request for contacts, because the site deliberately does not publish prices. ------------------------------------------------------------------ */ /* Scoped by class rather than by the homepage's #tar id: the calculator page shows the same wizard, and an id can only scope one of them. Every legacy rule these override is a single class, and this file loads after the legacy bundle, so dropping the id costs nothing. */ /* The removed step strip used to carry the gap between the intro copy and the first question, so the section supplies it now. */ .bl-calc .cost{padding-top:clamp(1.7rem,3.5vw,2.5rem)} .bl-calc .cost .container{max-width:78rem;padding-inline:var(--gut)} .bl-calc .cost__title{display:none} /* the section already has an h2 */ /* superseded by the wizard styles further down; kept minimal so the ID selector here does not out-rank them */ .bl-calc .cost__subtitle{color:var(--ink)} .bl-calc .cost__info{font-size:var(--s--1);color:var(--ink-soft);line-height:1.6} .bl-calc .cost__label{color:var(--ink);font-size:var(--s-0)} .bl-calc .cost__btn{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase; min-height:48px;border-radius:0; } .bl-calc .cost .cost__buttons .cost__btn-next{background:var(--ink);border-color:var(--ink);color:var(--ground)} .bl-calc .cost .cost__buttons .cost__btn-prev{background:transparent;border-color:var(--line);color:var(--ink)} .bl-calc .cost .cost__buttons .cost__btn-request{background:var(--gold);border-color:var(--gold);color:#1A1A18} /* No price on the site. main.js still computes the total and writes it into the request overlay in the footer; hiding it there is the last place it could surface, now that the summary panel is gone from the wizard. */ .inner__price{display:none} /* why the visitor is being asked for contacts instead of shown a figure */ .inner__note{ margin:.9rem 0 0;font-size:var(--s--1);line-height:1.6;color:var(--ink-soft); padding-top:.9rem;border-top:1px solid var(--line-soft); } /* ================================================================== Inner pages Shared furniture for everything that is not the homepage: the page hero, breadcrumbs, and a prose block for rich text coming out of ACF fields that the editor controls. ================================================================== */ /* ------------------------------------------------------------------ Page atmosphere Each inner page carries its own motif, taken from what the page is about, rather than repeating the homepage's drifting ledger lines. The drawing is js/motif-3d.js, a vanilla Three.js scene loaded as a native ES module; this only gives it a stage. pointer-events stays on so the scene's own hover parallax can read the cursor. ------------------------------------------------------------------ */ /* The standing lede under an inner-page h1. It had no rule at all, so it ran the full 1136px - about 135 characters a line, roughly twice a readable measure - and sat flush against the heading. */ .pg__lede{ margin-top:1rem;max-width:58ch; font-size:var(--s-1);line-height:1.5;color:var(--ink-soft); } /* The top figure tracks the home hero's own clamp(3.5rem,13vw,8rem): identical at phone widths, a little shorter on desktop, because an inner page opens on a breadcrumb rather than on a statement. */ .pg__hero{ padding-block:clamp(3.5rem,8vw,7rem) clamp(1.5rem,4vw,2.5rem); position:relative;isolation:isolate;overflow:hidden; } /* The floor that used to be here existed so a map had room to be recognised. With the motifs now being fields rather than objects, both inner pages size their panel the same way — by their content — which is the more consistent answer anyway. */ /* The hero's own bottom padding and the next section's --bay were stacking into a gap larger than the hero itself. */ .pg__hero + .sec{padding-top:clamp(1.8rem,4.5vw,3rem)} .pg__canvas{ position:absolute;inset:0;z-index:0; width:100%;height:100%;display:block; } /* the type keeps its contrast over the field */ .pg__hero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(100deg, var(--ground) 4%, color-mix(in srgb,var(--ground) 78%,transparent) 46%, transparent 78%); } .pg__hero > .wrap{position:relative;z-index:1} .crumbs{ display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft); } .crumbs a{color:var(--ink-soft);transition:color .2s var(--ease)} .crumbs a:hover{color:var(--gold-text)} .crumbs [aria-current]{color:var(--ink)} /* Rich text the editor owns. The shapes are constrained rather than restyled, so whatever is pasted in stays legible without needing to match a component. */ .prose{max-width:68ch;color:var(--ink-soft);line-height:1.75} .pg__hero .prose{font-size:var(--s-1);color:var(--ink-soft);max-width:60ch} .prose > * + *{margin-top:1rem} .prose p{margin:0} .prose strong{color:var(--ink);font-weight:500} .prose a{color:var(--gold-text);text-decoration:underline;text-underline-offset:.2em} .prose a:hover{color:var(--ink)} .prose ul{display:grid;gap:.7rem;margin:0;padding:0;list-style:none} .prose ul li{position:relative;padding-left:1.6rem} .prose ul li::before{ content:"";position:absolute;left:0;top:.62em; width:.5rem;height:1px;background:var(--gold); } .prose ol{margin:0;padding-left:1.3rem;display:grid;gap:.7rem} .prose h2,.prose h3,.prose h4{color:var(--ink);margin-top:1.8rem} /* a card that is itself the link */ .card--link{display:flex;flex-direction:column;text-decoration:none} .card--link h3{margin:.35rem 0 .5rem} .card--link .card__d{flex:1} .card__go{ margin-top:1rem;font-family:var(--f-mono);font-size:var(--s--1); letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text); display:inline-flex;align-items:center;gap:.45rem; transition:gap .2s var(--ease); } .card__go::after{content:"→"} .card--link:hover .card__go{gap:.8rem} /* ------------------------------------------------------------------ Contact page Built from the same pieces as the homepage — section head, eyebrow with rule, card grid, gold call to action — so it reads as the same site rather than a separate template that happens to share a header. ------------------------------------------------------------------ */ /* the routes: one card per way of reaching us */ /* Each card carries its own border and the grid uses a real gap. The usual trick — a 1px gap over a coloured container — paints the container wherever a cell is missing, and with five cards in a three-column row that left a grey rectangle in the corner that looked like a broken sixth card. */ .ways{ display:grid;grid-template-columns:1fr;gap:1px; } @media (min-width:44rem){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:64rem){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}} .way{ display:flex;flex-direction:column;gap:.35rem; background:var(--ground);padding:clamp(1.2rem,3vw,1.7rem); min-height:104px;justify-content:center; outline:1px solid var(--line-soft); /* outline, so the 1px gap stays hairline */ transition:background var(--m-fast,.17s) var(--ease); } .way:hover{background:color-mix(in srgb,var(--gold) 5%,var(--ground))} .way__k{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em; text-transform:uppercase;color:var(--gold-text); } .way__v{font-size:var(--s-1);color:var(--ink);line-height:1.3;word-break:break-word} /* the form */ .lead{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem)} @media (min-width:64rem){.lead{grid-template-columns:22rem 1fr;align-items:start}} .lead__intro .sec__head{margin-bottom:0} .lead__form{display:grid;grid-template-columns:1fr;gap:1.1rem} @media (min-width:44rem){ .lead__form{grid-template-columns:repeat(2,minmax(0,1fr))} .fld--wide,.lead__send{grid-column:1 / -1} } .fld{display:flex;flex-direction:column;gap:.4rem} .fld label{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em; text-transform:uppercase;color:var(--ink-soft); } .fld__hint{text-transform:none;letter-spacing:0;opacity:.75;margin-left:.4rem} .fld input,.fld textarea{ font:inherit;font-size:16px; /* 16px or iOS zooms the page on focus */ color:var(--ink);background:var(--raised); border:1px solid var(--line);border-radius:0; padding:.85rem .95rem;min-height:52px;width:100%; transition:border-color var(--m-fast,.17s) var(--ease); } .fld textarea{min-height:120px;resize:vertical} .fld input:hover,.fld textarea:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))} .fld input:focus-visible,.fld textarea:focus-visible{border-color:var(--focus)} .fld input.is-bad,.fld textarea.is-bad{border-color:#B3261E} .fld__err{margin:0;font-size:var(--s--1);color:#B3261E;line-height:1.4} :root[data-theme="dark"] .fld input.is-bad,:root[data-theme="dark"] .fld textarea.is-bad{border-color:#F2B8B5} :root[data-theme="dark"] .fld__err{color:#F2B8B5} .lead__send{display:flex;flex-wrap:wrap;align-items:center;gap:1rem} .lead__send .btn{flex:0 0 auto} @media (max-width:43.99rem){.lead__send .btn{flex:1 1 100%}} .lead__status{margin:0;font-size:var(--s--1);line-height:1.5;max-width:34ch} .lead__status--busy{color:var(--ink-soft)} .lead__status--ok{color:var(--gold-text)} .lead__status--bad{color:#B3261E} :root[data-theme="dark"] .lead__status--bad{color:#F2B8B5} .is-sending .btn{opacity:.6;pointer-events:none} /* office and map */ .office{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2.5rem)} @media (min-width:64rem){.office{grid-template-columns:24rem 1fr}} .office__addr{font-style:normal;font-size:var(--s-1);line-height:1.5;color:var(--ink);max-width:32ch} .office__go{margin:1.2rem 0 0} .office__hours{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)} .office__k{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.1em; text-transform:uppercase;color:var(--gold-text);margin:0 0 .3rem; } .office__v{margin:0;color:var(--ink)} /* The week, one day per line. A definition list is the honest markup: each day is a term and its hours are the description, so a screen reader reads the pairing rather than a run of loose text. */ .hours{margin:0;display:grid;gap:.15rem} .hours__row{ display:flex;justify-content:space-between;gap:1.5rem; padding:.42rem 0;border-bottom:1px solid var(--line-soft); } .hours__row:last-child{border-bottom:0} .hours dt{color:var(--ink)} .hours dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink)} .hours__row--off dt,.hours__row--off dd{color:var(--ink-soft)} /* aspect-ratio keeps the map from reserving the wrong height before it loads, so nothing below it shifts when the iframe arrives */ .office__map{ position:relative;aspect-ratio:16/10;border:1px solid var(--line-soft); background:var(--raised); } /* Once the week is listed a day per line, the facts column is far taller than a 16:9 map, and the two columns stopped meeting at the bottom. On a wide screen the map gives up its ratio and fills the row instead; the ratio stays on narrow screens, where the columns are stacked and there is no row height to match. */ @media (min-width:64rem){ .office__map{aspect-ratio:auto;height:100%;min-height:22rem} } .office__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* ------------------------------------------------------------------ Comparison table Two options across four aspects. Our column is marked by weight and a warmer ground rather than by a tick, because a tick against a cross reads as a scoreboard and this is meant to read as a straight answer. ------------------------------------------------------------------ */ .cmp{ width:100%;border-collapse:collapse; border:1px solid var(--line-soft); font-size:var(--s--1); } .cmp th,.cmp td{ padding:clamp(.9rem,2.2vw,1.25rem); text-align:left;vertical-align:top;line-height:1.55; border-top:1px solid var(--line-soft); } .cmp thead th{ font-family:var(--f-mono);font-size:var(--s--1);font-weight:400; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft); border-top:0; } .cmp tbody th{ font-family:var(--f-body);font-weight:500;color:var(--ink); width:22%; } .cmp td{color:var(--ink-soft)} .cmp .cmp__us{ background:color-mix(in srgb,var(--gold) 6%,transparent); color:var(--ink); } .cmp thead .cmp__us{color:var(--gold-text);font-weight:500} .cmp tbody tr:hover td,.cmp tbody tr:hover th{background-color:color-mix(in srgb,var(--ink) 3%,transparent)} .cmp tbody tr:hover .cmp__us{background:color-mix(in srgb,var(--gold) 11%,transparent)} /* Below the point where three columns stop being readable, each row becomes its own small card and every value keeps the column name it belonged to. */ @media (max-width:47.99rem){ .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block} .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .cmp tbody tr{border-top:1px solid var(--line-soft);padding-block:.4rem} .cmp tbody tr:first-child{border-top:0} .cmp tbody th{width:auto;border:0;padding-bottom:.2rem;font-size:var(--s-0)} .cmp tbody td{border:0;padding-block:.35rem} .cmp tbody td::before{ content:attr(data-label);display:block; font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem; } .cmp tbody .cmp__us{border-left:2px solid var(--gold)} } /* ------------------------------------------------------------------ Advantages and commitments Shared by every inner page. The legacy stylesheet dresses this block heavily — a grey ground with a decorative image, a blue uppercase heading pulled 260px upwards, fixed cell widths and centred capitals — so the rules below reset what they inherit before styling it, rather than overriding one property at a time. One of the inherited rules set pointer-events:none on the text, which made any link inside it dead. ------------------------------------------------------------------ */ .inner{ background:none;padding-bottom:0;position:static; } .inner::after,.inner::before{content:none} .inner > .container{ width:100%;max-width:78rem;margin:0 auto;padding-inline:var(--gut); } .write__wrap{ position:static;top:auto;margin:0;pointer-events:auto; max-width:68ch;width:auto; padding-block:clamp(2.5rem,7vw,4.5rem) 0; } .write__title{ font-family:var(--f-display);font-size:var(--s-3);font-weight:500; letter-spacing:-.02em;line-height:1.15;color:var(--ink); text-transform:none;text-align:left;margin:0;padding:0; } .write__desc{ font-size:var(--s-1);line-height:1.55;color:var(--ink-soft); text-transform:none;text-align:left;font-weight:400; margin:.9rem 0 0;padding:0; } .write__text{margin-top:1.1rem} .character{padding-block:clamp(2rem,5vw,3rem) clamp(2.5rem,7vw,4.5rem);position:static} .character__wrap{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0; background:var(--line-soft);border:1px solid var(--line-soft); } @media (min-width:60rem){.character__wrap{grid-template-columns:repeat(4,minmax(0,1fr))}} .character__item{ width:auto;margin:0; background:var(--ground);padding:clamp(1.4rem,3vw,2rem); display:flex;flex-direction:column; } /* The legacy sheet gives alternating cells an organic blob outline via .character__wrap .character__item:nth-child(4n+1), which read as stray pale shapes behind the text once the cells took the page's own background. Matching its three-part shape is what makes this win — a plain .character__item is a weaker selector and loses the tie. */ .character__wrap .character__item:nth-child(n){border-radius:0} .character__logo{display:none} /* the icons are 2009 clip-art */ .character__number{ font-family:var(--f-display);font-size:var(--s-3);font-weight:500; letter-spacing:-.03em;line-height:1;color:var(--ink); text-align:left;margin:0;padding:0; font-variant-numeric:tabular-nums; } .character__desc{ max-width:none;margin:.6rem 0 0;padding:0; font-family:var(--f-body);font-size:var(--s--1);font-weight:400; line-height:1.5;color:var(--ink-soft); text-transform:none;text-align:left; } /* An entry with no real figure carries a commitment instead. It takes a gold rule where the number would have been, so the row still scans as four equal cells rather than two tall ones and two short. */ /* The hover glow claims ::before, so the rule that stands in for a missing figure is drawn by the paragraph instead of the cell. */ .character__item--vow .character__desc::before{ content:"";display:block;width:1.75rem;height:2px;background:var(--gold); margin-bottom:1rem; } .character__item--vow .character__desc{ margin:0;font-size:var(--s-0);color:var(--ink);line-height:1.45; } /* ================================================================== Legacy harmonisation Pages other than the homepage still use the original markup and the original stylesheet, which is built around the old blue (#10adf4). Until those templates are redesigned, this layer retunes them to the new palette and typography so the site reads as one thing rather than a new header bolted onto an old body. ================================================================== */ /* --- typography ------------------------------------------------- */ .info__title,.plan__title,.work__title,.partners__title,.about__title, .reviews__title,.contacts__title,.place__title,.write__title, .advantages__title,.cost__title,.industries__title,.price__title, .stock__title,.single__title,.single--services__title,.blog__title, .calculation__title,.page-services__title{ font-family:var(--f-display);font-weight:500;letter-spacing:-.022em; text-transform:none; } /* --- blue text becomes gold or ink ------------------------------ */ .plan__title,.work__title,.partners__title,.about__title,.reviews__title, .contacts__title,.place__title,.write__title,.advantages__title, .cost__title,.industries__title,.price__title,.stock__title, .single__title,.single--services__title,.blog__title,.calculation__title{ color:var(--ink); } .plan__topic,.plan__text,.contacts__data,.blog__data, .advantages__content,.advantages__price,.advantages__block, .advantages__subtitle span,.industries__link,.calculation__price span{ color:var(--gold-text); } .contacts__list li a:hover,.navigation a:hover,.navigation .page-numbers.current, .blog__elem:hover,.blog__elem--active{color:var(--gold-text)} /* --- blue fills ------------------------------------------------- */ .services__block,.work{background-color:var(--charcoal,#1A1A18)} .about__bg,.character__logo{background-color:var(--gold)} .price__line,.stock__item:before,.place__item:before, .single__list li:before,.single--services__list li:before{background-color:var(--gold)} /* --- blue strokes and icons ------------------------------------- */ .plan__eyes svg,.contacts__icon svg,.industries__details svg{fill:var(--gold)} .plan__item:hover,.price__circle,.cost__radio:before, .calculation__radio:before{border-color:var(--gold)} .advantages__wrap-table table tr th{border-top-color:var(--gold)} .plan .owl-carousel .owl-nav .owl-prev:after, .plan .owl-carousel .owl-nav .owl-next:after, .reviews .owl-carousel .owl-nav .owl-prev:after, .reviews .owl-carousel .owl-nav .owl-next:after, .price__arrow:after{border-color:var(--gold)} .partners .owl-carousel .owl-dot span{border-color:var(--gold-light,var(--gold));background-color:transparent} .partners .owl-carousel .owl-dot.active span{border-color:var(--gold);background-color:var(--gold)} /* --- buttons and form controls ---------------------------------- */ .connection__btn,.inner__btn,.cost__btn,.calculation__link,.blog__link{ font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em; text-transform:uppercase;border-radius:0;min-height:48px; color:var(--ink);border-color:var(--line);background-color:transparent; } .connection__btn:hover,.inner__btn:not(:disabled):hover, .calculation__link:hover,.blog__link:hover{ background-color:var(--gold);border-color:var(--gold);color:#1A1A18; } .connection__box label,.connection__box input,.connection__box textarea{color:var(--ink)} .connection__box input,.connection__box textarea{border-bottom-color:var(--line)} .slider::-webkit-slider-thumb,.slider::-moz-range-thumb{border-color:var(--gold)} /* Legacy pages sit on the new ground colour. */ .page-price,.page-services,.single,.blog,.contacts,.place,.stock{ background-color:var(--ground); } /* Remaining legacy chrome: call-back popup, scroll-to-top, toast. */ /* Round, like the theme and language controls: instruments are round on this site, content surfaces are square. The legacy rule was already a circle — squaring it here was the odd one out. Opacity and visibility stay in the transition or the show-on-scroll would snap. */ /* Стрелка внутри - картинка с зашитым в неё цветом, а круг под ней красится в var(--ink). В тёмной теме --ink светлеет, круг становится почти белым, и стрелка на нём пропадает. Поэтому картинку убираем и рисуем стрелку маской: тогда её цвет задаётся из CSS и всегда противоположен кругу - в обеих темах. На наведении круг золотой; золото светлое и там, и там, так что стрелка на нём всегда тёмная. */ .arrow-up{ background-color:var(--ink); background-image:none; border-radius:50%; width:48px;height:48px; box-shadow:0 6px 20px rgba(26,26,24,.18); transition:background-color .2s var(--ease),transform .2s var(--ease), opacity .3s,visibility .3s; } .arrow-up::before{ content:"";position:absolute;inset:0; background-color:var(--ground); -webkit-mask:url(img/icons/up-arrow.svg) center / 18px no-repeat; mask:url(img/icons/up-arrow.svg) center / 18px no-repeat; transition:background-color .2s var(--ease); } .arrow-up:hover{background-color:var(--gold);transform:translateY(-2px)} .arrow-up:hover::before{background-color:#1A1A18} .arrow-up:active{transform:translateY(0)} /* Below 60rem the sticky call/quote dock sits at the very bottom (z-index 55) and the legacy sheet still puts this at bottom:40px — the two overlapped, the circle sitting on top of "Предложение". Cleared to sit above the dock, whose own height is padding + a 48px button + its border, plus whatever the device's home-indicator inset adds. */ @media (max-width:59.99rem){ .arrow-up{ bottom:calc(4.7rem + env(safe-area-inset-bottom)); right:1rem; } } .msg-modal{background-color:var(--ink);color:var(--ground);border-radius:0} .reqcall__inner{background-color:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:0} .reqcall__title,.reqcall__subtitle,.reqcall__label{color:var(--ink)} .reqcall__btn{ background-color:var(--gold);border-color:var(--gold);color:#1A1A18;border-radius:0; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;min-height:48px; } .reqcall__btn:hover{background-color:var(--gold-dark,#8A6A38)} .reqcall__btn:disabled,.reqcall__btn:disabled:hover{background-color:var(--line);border-color:var(--line);color:var(--ink-soft)} .reqcall__input,.reqcall__field input{color:var(--ink);border-color:var(--line);border-radius:0} /* Any legacy link still carrying the old accent. */ .contacts__data,.blog__data,.footer-menu__link{color:inherit} /* Editor-written links inside page copy. */ [class*="__text"] a,[class*="__desc"] a,.single a:not([class]), .page-services__content a:not([class]){ color:var(--gold-text); border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent); transition:border-color .2s var(--ease); } [class*="__text"] a:hover,[class*="__desc"] a:hover, .single a:not([class]):hover{border-bottom-color:var(--gold)} /* Review cards: one shape regardless of quote length. Long quotes clamp to three lines and expand on request, so a wordy letter cannot stretch its row past the others. */ .cli{align-items:stretch} .rev{height:100%} .rev__q{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; overflow:hidden; } .rev.is-open .rev__q{-webkit-line-clamp:unset;overflow:visible} .rev__more{ align-self:flex-start;margin-top:-.4rem; display:inline-flex;align-items:center;min-height:44px; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.08em; color:var(--gold-text);background:none;border:0;cursor:pointer;padding:0; } .rev__more:hover{color:var(--gold)} .rev__more[hidden]{display:none} /* ================================================================== Calculator, rebuilt as a card wizard The step logic in js/main.js is untouched — it still toggles .cost__item--active. Everything here is presentation. The numbered strip above the questions is gone: the markup no longer emits it. ================================================================== */ .cost{background:var(--ground);padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,6vw,4rem)} .cost .container{max-width:60rem} .cost__track{position:relative} .cost__item{display:none} .cost__item--active{display:block} /* new step slides in from the right */ @keyframes bl-step-in{ from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} } .cost__item--active{animation:bl-step-in .32s var(--ease) both} .cost .cost__item .cost__subtitle, .cost .cost__subtitle{ font-family:var(--f-display);font-weight:500;letter-spacing:-.022em; font-size:var(--s-3);line-height:1.1;color:var(--ink); margin-bottom:.6rem;max-width:20ch;text-transform:none; } .cost .cost__info{ font-size:var(--s-0);color:var(--ink-soft);line-height:1.55; margin-bottom:clamp(1.2rem,3vw,1.8rem);max-width:52ch; } /* answers as cards The legacy markup is: .cost__col (which carried the blue tint, a 33% width and ±20px margins) > hidden input + .cost__label (whose ::after/::before draw a blue radio ring and dot, offset by padding-left:46px). The card is .cost__col itself — layering a second box on the label was what produced the misaligned blue rectangles. */ .cost .cost__holder--active, .cost .cost__holder.cost__active{display:grid;gap:.75rem;margin:0} @media (min-width:40rem){ .cost .cost__holder--active, .cost .cost__holder.cost__active{grid-template-columns:repeat(2,minmax(0,1fr))} } .cost .cost__col{ width:auto;margin:0;position:relative; display:flex;align-items:center; min-height:64px;padding:1rem 1.15rem; background:var(--raised); border:1px solid var(--line); border-radius:0; transition:border-color .2s var(--ease),background .2s var(--ease), transform .2s var(--ease),box-shadow .2s var(--ease); } .cost .cost__col:hover{ border-color:var(--gold);transform:translateY(-2px); box-shadow:0 6px 18px rgba(26,26,24,.07); } .cost .cost__col:active{transform:translateY(0)} .cost .cost__col:has(input:checked){ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,var(--raised)); } .cost .cost__col:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px} .cost .cost__col:has(input:disabled){opacity:.45} .cost .cost__col:has(input:disabled):hover{transform:none;border-color:var(--line);box-shadow:none} .cost .cost__label{ display:block;width:100%; padding-left:2.25rem; font-size:var(--s-0);line-height:1.4;color:var(--ink); font-weight:400;cursor:pointer; } /* radio ring and dot, recoloured */ .cost .cost__label::after{ left:0;width:20px;height:20px; border:1px solid var(--line); background:var(--ground); transition:border-color .2s var(--ease); } .cost .cost__col:hover .cost__label::after{border-color:var(--gold)} .cost .cost__label::before{ left:6px;width:8px;height:8px; background:var(--gold); } .cost .cost__col:has(input:checked) .cost__label::after{border-color:var(--gold)} /* nested extra inputs that appear inside some options */ .cost .cost__col .calculation__item{ background:var(--ground);border:1px solid var(--line-soft); border-radius:0;margin-top:1rem; } /* controls */ .cost__buttons{ display:flex;gap:.75rem;align-items:center; margin-top:clamp(1.6rem,4vw,2.4rem); } .cost .cost__buttons .cost__btn{ /* the legacy button was a centred 370px pill; here they are a pair */ max-width:none;width:auto;margin:0; font-family:var(--f-mono);font-size:var(--s--1);letter-spacing:.12em; text-transform:uppercase;min-height:48px;padding:0 1.5rem;border-radius:0; display:inline-flex;align-items:center;gap:.5rem;cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease), border-color .2s var(--ease),transform .2s var(--ease); } .cost .cost__buttons{border-top:1px solid var(--line-soft);padding-top:1.5rem} .cost__btn:hover{transform:translateY(-2px)} /* Source order is request, next, prev — reorder so Back reads on the left. */ .cost .cost__buttons .cost__btn-prev{ order:-1;margin-right:auto; background:transparent;border:1px solid var(--line);color:var(--ink-soft); } .cost .cost__buttons .cost__btn-prev:hover{border-color:var(--ink);color:var(--ink)} .cost .cost__buttons .cost__btn-prev::before{content:"←";font-family:var(--f-body)} .cost .cost__buttons .cost__btn-next, .cost .cost__buttons .cost__btn-request{order:1;margin-left:auto} .cost .cost__buttons .cost__btn-next{background:var(--ink);border:1px solid var(--ink);color:var(--ground)} .cost .cost__buttons .cost__btn-next::after{content:"→";font-family:var(--f-body);transition:transform .2s var(--ease)} .cost .cost__buttons .cost__btn-next:hover::after{transform:translateX(3px)} /* The request replaces "next step" on the last question, so it is the primary action in that row wherever it appears. */ .cost .cost__buttons .cost__btn-request{background:var(--gold);border:1px solid var(--gold);color:#1A1A18} @media (max-width:43.99rem){ .cost .cost__buttons .cost__btn-request{flex:1 1 100%;order:-1} } .cost .cost__buttons .cost__btn-request:hover{background:var(--gold-dark)} .cost__btn:disabled{opacity:.4;cursor:not-allowed;transform:none} @media (prefers-reduced-motion:reduce){ .cost__item--active{animation:none} } /* ------------------------------------------------------------------ Hero ticker Replaces the static eyebrow with a slow marquee. Duplicated content is aria-hidden and the strip carries the label, so screen readers hear the phrase once. ------------------------------------------------------------------ */ .ticker{ position:relative;overflow:hidden; margin-bottom:clamp(1.4rem,4vw,2.2rem); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .ticker__track{ display:flex;width:max-content; animation:bl-ticker 38s linear infinite; } .ticker:hover .ticker__track{animation-play-state:paused} .ticker__item{ display:inline-flex;align-items:center;flex:none; padding-right:2.5rem;white-space:nowrap; } .ticker__item::after{ content:"";width:5px;height:5px;border-radius:50%; background:var(--gold);margin-left:2.5rem;flex:none; } @keyframes bl-ticker{ from{transform:translateX(0)} to{transform:translateX(-25%)} /* one of four copies */ } @media (prefers-reduced-motion:reduce){ .ticker__track{animation:none} .ticker{-webkit-mask-image:none;mask-image:none} } /* ------------------------------------------------------------------ Preloader Short and quiet: the mark draws itself in, the name and rule follow, then it lifts away. It removes itself on load, and a timeout makes sure a stalled third-party asset can never trap the page behind it. ------------------------------------------------------------------ */ .preload{position:fixed;inset:0;z-index:200} /* Two halves that part vertically, each carrying its own copy of the lockup clipped at the seam. Tearing the mark in two is what makes the overlay read as doors opening rather than as a layer fading: the brand leaves with the curtain instead of disappearing before it. */ .preload__half{ position:absolute;left:0;right:0;height:50%;overflow:hidden; background:var(--ground);pointer-events:auto;will-change:transform; /* decisive, unlike the soft easing the brand assembles on - the contrast is what makes the opening read as a mechanism */ transition:transform .55s cubic-bezier(.65,0,.35,1) 1.35s; } .preload__half--t{top:0} .preload__half--b{top:50%} .preload.is-open .preload__half--t{transform:translateY(-100%)} .preload.is-open .preload__half--b{transform:translateY(100%)} /* Each inner row is twice its half's height and anchored to the seam, so both copies share one centre line and the visible halves line up exactly. */ .preload__in{ position:absolute;left:0;right:0;height:200%; display:flex;align-items:center;justify-content:center;gap:0; padding-inline:var(--gut); } .preload__half--t .preload__in{top:0} .preload__half--b .preload__in{bottom:0} /* state 01 - the mark alone */ .preload__mark{ flex:none;width:clamp(34px,6vw,52px);color:var(--gold);display:block; opacity:0;transform:scale(.96); transition:opacity .3s var(--ease),transform .3s var(--ease); } .preload.is-open .preload__mark{opacity:1;transform:none} .preload__mark svg{width:100%;height:auto;aspect-ratio:1297/1614;display:block} /* states 02-03 - the box opens, which slides the mark aside because the row stays centred, and the name is unmasked just behind it. The two overlap on purpose: separated, the sequence reads as two events instead of one. */ .preload__w{ display:block;overflow:hidden;width:0;white-space:nowrap; font-family:var(--f-display);font-weight:500; font-size:clamp(1.35rem,6.4vw,2.6rem); letter-spacing:.01em;line-height:1;color:var(--ink); transition:width .4s cubic-bezier(.19,1,.22,1) .55s; } .preload__w > i{ display:inline-block;font-style:normal; clip-path:inset(0 100% 0 0); transition:clip-path .4s cubic-bezier(.19,1,.22,1) .65s; } .preload.is-open .preload__w{width:var(--w)} .preload.is-open .preload__w > i{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ .preload__mark{opacity:1;transform:none;transition:none} .preload__w{width:var(--w);transition:none} .preload__w > i{clip-path:none;transition:none} .preload__half{transition:transform .01s linear .2s} } /* ── подтверждение отправки формы ────────────────────────────────── Старая тема рисовала его синим прямоугольником #10adf4 - цветом прежнего логотипа, которого на сайте больше нет нигде. Плюс окно не имело кнопки закрытия: оно держалось 2,5 секунды и пропадало. Здесь оно пересобрано в токенах текущей темы и живёт до тех пор, пока человек сам его не закроет. Затемнение сделано растянутой тенью, чтобы не заводить ради него отдельный элемент в разметке. */ .msg-modal{ position:fixed;z-index:80; top:50%;left:50%;translate:-50% -50%; width:min(92vw,26rem); padding:1.6rem 1.6rem 1.3rem; /* Цвет и прямые углы окно уже получило выше по файлу: тёмная плашка со светлым текстом. Здесь только размер, положение и затемнение фона - перекрашивать заново значило бы спорить с уже принятым решением. */ font-size:1rem;line-height:1.55;text-align:center; box-shadow: 0 24px 60px -22px color-mix(in srgb,var(--ink) 45%,transparent), 0 0 0 100vmax color-mix(in srgb,var(--ink) 34%,transparent); } .msg-modal__text{margin:0 0 1.15rem;font-family:var(--f-display);font-size:1.06rem} /* Кнопка стоит на тёмной плашке, поэтому её цвета берутся от текста окна, а не от текста страницы: на инверсной поверхности var(--ink) слился бы с фоном в светлой теме. */ .msg-modal__close{ font:inherit;font-family:var(--f-mono); font-size:var(--s--1);letter-spacing:.08em;text-transform:uppercase; min-height:44px;padding:0 1.4rem;cursor:pointer; color:inherit;background:none; border:1px solid color-mix(in srgb,currentColor 28%,transparent); border-radius:999px; transition:border-color .2s var(--ease),color .2s var(--ease); } .msg-modal__close:hover,.msg-modal__close:focus-visible{ border-color:var(--gold);color:var(--gold); } @media (prefers-reduced-motion:reduce){.msg-modal{transition:none}}