is the container of the background grid (cqw = full width, 64 px cell at 1440); .svc-in is the container of the content, so its cqw units and the stacking query are measured on the padded content box, as in the mockup. [data-demo] is set by home.js (paused | running | static): only then are the demo parts hidden until their animation shows them, so without JS the block is complete. */ .svc, .blk { background: var(--bg); color: var(--ink); transition: background-color .35s ease, color .35s ease; } /* the grid fades in over the top third (hand-off from the hero) and out at the bottom */ .svc.gridbg::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 85%, transparent 100%); } .svc-in, .blk-in { container-type: inline-size; max-width: 1440px; margin: 0 auto; } /* the content box, same gutters */ .svc-in { padding: clamp(28px, 4vw, 64px) clamp(20px, 3.2vw, 46px) clamp(36px, 4.5vw, 72px); padding: clamp(28px, 4cqw, 64px) clamp(20px, 3.2cqw, 46px) clamp(36px, 4.5cqw, 72px); } .svc .hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(18px, 2.2vw, 32px); margin-bottom: clamp(18px, 2.2cqw, 32px); } .svc h2, .blk h2.section-h { font: 200 clamp(34px, 5vw, 76px)/1 var(--font-display); font: 200 clamp(34px, 5cqw, 76px)/1 var(--font-display); letter-spacing: -.045em; } .svc .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .svc .cd { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 1.8vw, 28px); padding: clamp(18px, 1.8cqw, 28px); border: 1px solid var(--line); border-radius: 6px; background: var(--surface-card); transition: background-color .35s ease, border-color .3s ease; } .svc .cd:hover { border-color: var(--mut); } .svc .cd.big { grid-column: span 4; } .svc .cd h3 { font: 300 clamp(22px, 2.1vw, 32px)/1.1 var(--font-display); font: 300 clamp(22px, 2.1cqw, 32px)/1.1 var(--font-display); letter-spacing: -.03em; } .svc .cd > p { font: 300 15px/1.5 var(--font-display); color: var(--mut); } .svc .cd .go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; } .svc .cd .go:hover { text-decoration-thickness: 2px; } /* terminal (markup and behaviour: .terminal-mock block above + home.js) */ .svc .terminal-mock { margin-top: 0; height: 254px; padding: 12px 16px 14px; font-size: 13px; line-height: 1.75; } .svc .terminal-mock.active { overflow-y: auto; } .svc .terminal-mock .term-out { white-space: pre-wrap; } /* the OK column stays aligned */ .svc .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .svc .chips button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; padding: 7px 10px; font: 400 12px/1 var(--font-mono); background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 9px; box-shadow: 0 0 0 1px var(--chip-ring); transition: background-color .2s, color .2s; } .svc .chips button:hover { background: var(--btn-bg); color: var(--btn-ink); } .svc .chips button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .svc .chips .term-hint { margin: 0 0 0 auto; } /* code card */ .svc .code { flex: 1 1 auto; min-height: 256px; padding: 14px 16px; background: var(--glass-inner); border-radius: 10px; box-shadow: var(--glass-inner-shadow); font: 400 13px/1.75 var(--font-mono); white-space: pre; overflow: hidden; transition: background-color .35s ease; } .svc .code .n { display: inline-block; width: 2.2em; color: var(--mut); opacity: .7; } .svc .code .k { font-weight: 500; } .svc .code .s { color: var(--acc); } .svc .code .c { color: var(--mut); } /* micro demos */ .svc .demo { position: relative; height: 150px; overflow: hidden; background: var(--glass-inner); border-radius: 10px; box-shadow: var(--glass-inner-shadow); transition: background-color .35s ease; } .svc .chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; padding: 12px; } .svc .chat div { max-width: 80%; padding: 6px 10px; border-radius: 9px; font: 400 12.5px/1.35 var(--font-display); transition: opacity .35s, transform .45s var(--ease); } .svc .chat .u { align-self: flex-end; background: var(--btn-bg); color: var(--btn-ink); } .svc .chat .b { align-self: flex-start; background: var(--demo-soft); color: var(--ink); } .svc[data-demo] .chat div:not(.on) { opacity: 0; transform: translateY(8px); } .svc .web { padding: 10px; } .svc .web .wb { height: 8px; margin-bottom: 10px; border-radius: 2px; background: var(--demo-mid); } .svc .web i { display: block; border-radius: 3px; background: var(--demo-soft); transition: opacity .4s, transform .55s var(--ease); } .svc .web .k1 { height: 34px; } .svc .web .k2 { height: 14px; width: 38%; margin-top: 8px; } .svc .web .r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .svc[data-demo] .web i:not(.on) { opacity: 0; transform: translateY(10px); } .svc .crm { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 100%; padding: 12px; } .svc .crm i { border: 1px solid var(--demo-line); border-radius: 2px; transition: background-color .5s; } .svc .crm i.r { background: var(--demo-mid); } .svc .crm i.s { background: var(--demo-strong); } /* two columns while the content box is over 720 and up to 1040 px wide, one column at 720 and below. Range syntax: with min/max-width pairs a fractional width such as 720.72 falls in the gap. */ @container (width > 720px) and (width <= 1040px) { .svc .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc .cd { grid-column: auto; } .svc .cd.big { grid-column: 1 / -1; } } @media (max-width: 768px) { /* browsers without container queries */ .svc .bento { grid-template-columns: minmax(0, 1fr); } .svc .cd, .svc .cd.big { grid-column: auto; } .svc .hd { flex-direction: column; align-items: flex-start; gap: 8px; } } @container (width <= 720px) { .svc .bento { grid-template-columns: minmax(0, 1fr); } .svc .cd, .svc .cd.big { grid-column: auto; } .svc .hd { flex-direction: column; align-items: flex-start; gap: 8px; } .svc .terminal-mock { height: 216px; font-size: 12px; } .svc .code { font-size: 12px; min-height: 218px; } .svc .demo { height: 180px; } /* one bubble wraps on a narrow card */ .svc .chat div { max-width: 92%; } .svc .chips .term-hint { margin-left: 0; flex-basis: 100%; } } /* tap targets: 44 px on the phone and on touch screens */ @container (width <= 720px) { .svc .chips button { min-height: 44px; padding: 0 16px; } .svc .cd .go { min-height: 44px; } } @media (pointer: coarse) { .svc .chips button { min-height: 44px; padding: 0 16px; } .svc .cd .go { min-height: 44px; } } @media (max-width: 1024px) { /* terminal pinned to the top of the screen while typing (touch layouts) */ .svc .terminal-mock.pinned { position: fixed; top: 80px; left: 12px; right: 12px; z-index: 90; margin-top: 0; height: auto; max-height: 42vh; overflow-y: auto; outline: 1px solid var(--line); } } @media (prefers-reduced-motion: reduce) { .svc, .svc .cd, .svc .demo, .svc .code, .svc .chips button, .svc .chat div, .svc .web i, .svc .crm i { transition: none; } } /* ═════════════ CASES «Работы» (#cases) ═════════════ Approved mockup home-v19 (#W) / cases-v10, spec §8. The section carries the background grid; .stage is a 16:9 box in container units (--u = 1cqw of the stage, 1vw where container units are missing), centred in a block at least one viewport tall (not sticky). The stage is narrowed so the whole of it fits the viewport under the fixed nav (down to 820 px wide, i.e. viewports >= ~565 px tall); the info column gets a 360 px floor on such narrow stages; thumbs of the endless strip run on to the section edges, which clip them. Positions are filled in by home.js (cases module): .th.on, .scr transforms, .lens, .info.out / .col.out during a switch. */ .cases { display: flex; align-items: center; justify-content: center; overflow: hidden; overflow: clip; /* not a scroll container: focus/find on a far thumb cannot shift it (home.js resets the fallback) */ padding: 80px 0 24px; background: var(--bg); color: var(--ink); transition: background-color .35s ease, color .35s ease; } @media (min-width: 1024px), (width >= 1024px) { .cases { min-height: 100vh; flex-direction: column; } } /* the block's title, as «Что делаем». Title and stage fit one screen together (--room is what the stage leaves of the viewport), or the wheel over the screens would not engage. On short laptops the stage would get too small for its info tile, so there it keeps its size, the title scrolls in first and an anchor lands past it. */ .cases { --hf: clamp(34px, 5vw, 76px); --hg: clamp(14px, 1.6vw, 24px); --room: calc(104px + var(--hf) + var(--hg)); } .cases-hd { box-sizing: border-box; width: 100%; max-width: 1440px; margin: 0 auto var(--hg); padding: 0 clamp(20px, 3.2vw, 46px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; } .cases-hd h2 { font: 200 var(--hf)/1 var(--font-display); letter-spacing: -.045em; } .cases-ctl { flex: none; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); padding-bottom: .3em; } .cases .mode { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--glass-border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); font: 400 14px/1 var(--font-display); } .cases .mode .sep { display: none; } .cases .mode button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font: inherit; color: var(--mut); cursor: pointer; transition: color .25s, background-color .25s; } .cases .mode button:hover { color: var(--ink); } .cases .mode button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } .cases .mode button.on { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 -2px 0 var(--pink); } .cases .hint2 { font: 400 14px/1 var(--font-display); color: var(--ink); white-space: nowrap; } .cases .hint2:hover { text-decoration: underline; text-underline-offset: .35em; } @media (min-width: 1024px) and (max-height: 720px) { .cases { --room: 104px; scroll-margin-top: calc(-1 * (var(--hf) + var(--hg))); } } /* --cx: the page gutter of the other blocks (.svc-in / .blk-in: 1440 max, clamp(20px, 3.2cqw, 46px)) measured from the stage's left edge. Registered, so it is resolved on .stage, where cqw is the section's width; without @property it falls back to the stage's own gutter (the old 3.2u). */ @property --cx { syntax: ''; inherits: true; initial-value: 0px; } .cases.gridbg::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%); } #cases:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; } /* inset: the block spans the viewport */ /* desktop only (>= 1024): the stage, strip and screens column; below 1024 the mobile block further down takes over, nothing here leaks into it. Range syntax (no gap at fractional widths), min-/max-width for engines without it. */ @media (min-width: 1024px), (width >= 1024px) { .cases .stage { --u: 1vw; position: relative; width: 100%; aspect-ratio: 16 / 9; } @supports (width: 1cqw) { .cases .stage { --u: 1cqw; container-type: inline-size; width: min(100%, max(820px, calc((100vh - var(--room)) * 16 / 9))); --cx: calc(max(0px, (100cqw - 1440px) / 2) + clamp(20px, 3.2cqw, 46px) - (100cqw - min(100cqw, max(820px, calc((100vh - var(--room)) * 16 / 9)))) / 2); /* inset of the content: the page gutter, also when the stage is narrower and centred (--cx < 0), so the case tile, the mode switch and the block title share the left edge of the other blocks */ --ci: var(--cx); } } .cases .mono { font: 400 clamp(11px, calc(.85 * var(--u)), 13px)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); } /* left: the opened case */ .cases .info { position: absolute; left: var(--ci, calc(3.2 * var(--u))); top: calc(17 * var(--u)); width: max(calc(30 * var(--u)), 388px); z-index: 3; } /* 388 px floor: the 48 px button + «Открыть сайт» (~376 px) stay on one row and clear the screens on short viewports (stage ~880 px) */ .cases .info .ln { display: block; overflow: hidden; } .cases .info .ln > * { display: block; transition: transform .8s var(--ease), opacity .5s; } .cases .info.out .ln > * { transform: translateY(105%); opacity: 0; transition: transform .35s cubic-bezier(.7,0,.8,.3), opacity .3s; } .cases .info .cnt { margin-bottom: calc(1.6 * var(--u)); } .cases .info h3 { font: 200 calc(5.2 * var(--u))/1.04 var(--font-display); letter-spacing: -.05em; padding-bottom: .04em; } .cases .info h3.long { font-size: calc(4 * var(--u)); } .cases .badge { display: inline-block; margin-left: calc(.8 * var(--u)); padding: .35em .6em; border: 1px solid currentColor; border-radius: 3px; font: 500 clamp(10px, calc(.7 * var(--u)), 12px)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: var(--mut); } .cases .info .kind { margin-top: calc(1.2 * var(--u)); } .cases .info p { margin-top: calc(1.8 * var(--u)); font: 300 clamp(15px, calc(1.3 * var(--u)), 18px)/1.5 var(--font-display); max-width: max(calc(27 * var(--u)), 360px); } .cases .info .did { max-width: max(calc(27 * var(--u)), 360px); margin-top: calc(1.6 * var(--u)); padding-top: calc(1.1 * var(--u)); border-top: 1px solid var(--line); } /* the rule ends with the text, clear of the screens */ .cases .info .ln > .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, calc(1.6 * var(--u)), 28px); margin-top: calc(2.2 * var(--u)); padding: 0 0 4px; /* room for the button lift and the link underline inside .ln */ } .cases #iUrl { cursor: pointer; } /* centre: screens of the opened case, stepped by home.js */ .cases .col { position: absolute; left: calc(44 * var(--u)); width: calc(40 * var(--u)); top: calc(13.5 * var(--u)); height: calc(42.75 * var(--u)); z-index: 2; -webkit-mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%); transition: opacity .45s, transform .6s var(--ease); } .cases .col.out { opacity: 0; transform: translateY(calc(3 * var(--u))); } /* no mask-image: clip the column instead, so neighbours never spill over the strip */ @supports not ((mask-image: none) or (-webkit-mask-image: none)) { .cases .col { overflow: hidden; } } .cases .scr { position: absolute; left: 50%; top: 0; width: calc(22 * var(--u)); aspect-ratio: 8 / 5; margin-left: calc(-11 * var(--u)); background: var(--mat); will-change: transform, filter; } .cases .scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .cases .scr.lens { box-shadow: 0 0 0 calc(1.4 * var(--u)) var(--mat); } .cases .meta-r { position: absolute; right: var(--ci, calc(3.2 * var(--u))); top: calc(30 * var(--u)); text-align: right; z-index: 3; } .cases .meta-r .mono { display: block; margin-bottom: calc(.5 * var(--u)); } .cases .meta-r b { font: 400 clamp(14px, calc(1.05 * var(--u)), 16px)/1.4 var(--font-display); } /* top: the selector strip */ .cases .sel { position: absolute; left: 0; right: 0; top: calc(1.2 * var(--u)); height: calc(11.5 * var(--u)); z-index: 4; cursor: grab; touch-action: pan-y; } .cases .sel.drag { cursor: grabbing; } .cases .rail { position: absolute; left: var(--cx, calc(3.2 * var(--u))); right: var(--cx, calc(3.2 * var(--u))); bottom: 0; border-top: 1px solid var(--line); } /* always on the page gutters, past the stage when it is narrower */ .cases .track { position: absolute; top: calc(2.2 * var(--u)); left: 0; height: calc(7.2 * var(--u)); display: flex; align-items: center; gap: calc(2 * var(--u)); will-change: transform; } .cases .th { flex: 0 0 calc(11 * var(--u)); height: calc(6.9 * var(--u)); position: relative; padding: 0; border: 0; background: none; color: inherit; cursor: inherit; opacity: .4; filter: grayscale(1); transition: transform .5s var(--ease), opacity .5s, filter .5s; } .cases .th.on { transform: scale(1.22); opacity: 1; filter: none; } .cases .th:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .cases .th img { position: absolute; left: calc(.6 * var(--u)); top: calc(.9 * var(--u)); width: calc(100% - 1.2 * var(--u)); height: calc(100% - 1.8 * var(--u)); object-fit: contain; pointer-events: none; transition: background-color .5s, filter .5s; } .cases .th img.n { display: none; } [data-theme="night"] .cases .th img.d { display: none; } [data-theme="night"] .cases .th img.n { display: block; } /* night: a logo without a night file (dark wordmark) sits on a light plate when active or hovered, sized to the logo (a badge, not the whole thumb) in the softer --text-2; inactive it is inverted instead, so it fades like the other inactive logos (no grey box) */ [data-theme="night"] .cases .th.plate img { inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100% - 1.2 * var(--u)); max-height: calc(100% - 2.4 * var(--u)); border-radius: 4px; padding: calc(.4 * var(--u)) calc(.6 * var(--u)); filter: invert(1); } [data-theme="night"] .cases .th.plate.on img, [data-theme="night"] .cases .th.plate:hover img { background: var(--text-2); filter: none; } .cases .th .no { position: absolute; left: 0; top: calc(-1.3 * var(--u)); font: 400 clamp(10px, calc(.75 * var(--u)), 12px)/1 var(--font-mono); color: var(--mut); } .cases .th .wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 300 clamp(14px, calc(1.45 * var(--u)), 21px)/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); } .cases .br { position: absolute; top: calc(1.2 * var(--u)); height: calc(9.2 * var(--u)); width: calc(2.6 * var(--u)); z-index: 5; pointer-events: none; color: var(--ink); } .cases .br.l { left: calc(50% - 10.2 * var(--u)); } .cases .br.r { left: calc(50% + 7.6 * var(--u)); transform: scaleX(-1); } } /* @media (width >= 1024px) */ /* below 1024 (spec §8 Mobile, designed at 390; mockup home-v19 #M): normal flow. Top row: toggle left, «Все →» right; the logo row .lrow and the screens carousel .scar are native horizontal snap scrollers built by home.js (the section never captures vertical input); the CTA row is moved under the dots. Tablets keep the 390 layout; text and CTAs use the full content width between the page gutters of the other blocks (clamp(20px, 3.2cqw, 46px), cqw of the section). */ @media (max-width: 1023.98px), (width < 1024px) { .cases { display: block; padding: 72px 0 56px; } .cases .stage { position: relative; } .cases .mono { font: 400 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); } /* desktop pieces home.js removes on mobile; hidden for the paint before it runs */ .cases .track, .cases .col, .cases .meta-r, .cases .rail { display: none; } .cases .sel { position: relative; min-height: 96px; border-bottom: 1px solid var(--line); } /* the 96 px row (also before home.js runs) */ .cases .hint2 .hint-w { display: none; } .cases .lrow { position: relative; display: flex; align-items: center; gap: 34px; height: 96px; padding: 0 calc(50% - 55px); /* the first and the last thumb can reach the centre */ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .cases .lrow::-webkit-scrollbar, .cases .scar::-webkit-scrollbar { display: none; } .cases .lg { flex: 0 0 110px; height: 52px; position: relative; padding: 0; border: 0; background: none; color: inherit; scroll-snap-align: center; opacity: .4; filter: grayscale(1); transition: transform .4s var(--ease), opacity .4s, filter .4s; } .cases .lg.on { opacity: 1; filter: none; transform: scale(1.12); } .cases .lg img { position: absolute; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; pointer-events: none; transition: background-color .4s, filter .4s; } .cases .lg img.n { display: none; } [data-theme="night"] .cases .lg img.d { display: none; } [data-theme="night"] .cases .lg img.n { display: block; } /* night: a logo without a night file sits on a light plate only when active (as on desktop) */ [data-theme="night"] .cases .lg.plate img { inset: 0; margin: auto; width: auto; height: auto; /* the plate hugs the logo */ max-width: calc(100% - 8px); max-height: calc(100% - 12px); border-radius: 4px; padding: 4px 6px; filter: invert(1); } [data-theme="night"] .cases .lg.plate.on img { background: var(--text-2); filter: none; } .cases .lg .wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 300 17px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); } .cases .br { position: absolute; top: 14px; height: 68px; width: 18px; z-index: 2; pointer-events: none; color: var(--ink); } .cases .br.l { left: calc(50% - 82px); } .cases .br.r { left: calc(50% + 64px); transform: scaleX(-1); } .cases .info, .cases .stage > .ln { padding: 22px 20px 0; padding: 22px clamp(20px, 3.2cqw, 46px) 0; } .cases .info .ln { display: block; overflow: hidden; } .cases .info .ln > * { display: block; transition: transform .7s var(--ease), opacity .4s; } .cases .info.out .ln > * { transform: translateY(105%); opacity: 0; transition: transform .3s cubic-bezier(.7,0,.8,.3), opacity .25s; } .cases .info h3 { margin-top: 6px; padding-bottom: .04em; font: 200 40px/1.04 var(--font-display); letter-spacing: -.05em; } .cases .info h3.long { font-size: 30px; } .cases .badge { display: inline-block; margin-left: 10px; padding: .35em .6em; border: 1px solid currentColor; border-radius: 3px; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: var(--mut); } .cases .info .kind { margin-top: 8px; } .cases .info p { max-width: 640px; margin-top: 12px; font: 300 16px/1.5 var(--font-display); } .cases .info .did { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .cases .info .ln > .ctas { display: flex; margin-top: 22px; } /* before home.js moves the CTA row under the carousel */ .cases .scar { position: relative; display: flex; gap: 12px; padding: 22px calc(50% - 140px) 26px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; transition: opacity .35s; } .cases .scar.out { opacity: 0; } .cases .ms { flex: 0 0 280px; aspect-ratio: 8 / 5; scroll-snap-align: center; background: var(--mat); transform: scale(.86); filter: grayscale(1); transition: transform .35s var(--ease), filter .35s, box-shadow .35s; } .cases .ms.on { transform: none; filter: none; box-shadow: 0 0 0 10px var(--mat); } .cases .ms img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; } .cases .mdots { display: flex; justify-content: center; gap: 6px; margin-top: -8px; } .cases .mdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color .3s, width .3s; } .cases .mdots i.on { width: 18px; border-radius: 3px; background: var(--pink); } .cases .ctas { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .cases .ctas .btn-ink { width: 100%; min-height: 52px; padding: 0 20px; } .cases .ctas .lnk { align-self: center; min-height: 44px; cursor: pointer; } } @media (prefers-reduced-motion: reduce) { .cases .info .ln > *, .cases .info.out .ln > *, .cases .col, .cases .th, .cases .th img, .cases .mode button, .cases .lg, .cases .lg img, .cases .scar, .cases .ms, .cases .mdots i { transition: none; } } /* ═════════════ KEPT BLOCKS: process, scale, stack, CTA strips, contact, footer ═════════════ No mockup for these (spec §10a): texts kept, re-marked in the §6 system after the blocks above.

carries the background grid (cqw of the full width); .blk-in is the content box (1440 max, the #what side padding), so headings use the #what h2 scale. Breakpoints: 1024 (desktop / tablet) and 780 (phone). */ .blk-in { padding: clamp(56px, 7vw, 112px) clamp(20px, 3.2vw, 46px); padding: clamp(56px, 7cqw, 112px) clamp(20px, 3.2cqw, 46px); } /* section header: H2 left, one paragraph right, bottom-aligned (as #what .hd) */ .blk-hd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 20px clamp(24px, 5cqw, 80px); margin-bottom: clamp(32px, 4.4cqw, 64px); } .blk h2.section-h { line-height: 1.02; text-wrap: balance; } .blk-hd .section-d { max-width: 440px; justify-self: end; font: 300 clamp(15px, 1.2cqw, 18px)/1.55 var(--font-display); color: var(--mut); } /* ── «Процесс» #process: four stages on one rule ── */ .pipe-track { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2cqw, 32px); } .pipe-stage { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); } .pipe-stage::before { /* the stage's own segment of the rule */ content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--ink); } .pipe-num { font: 400 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--coral); } .pipe-stage h3 { margin-top: clamp(14px, 2.4cqw, 36px); font: 300 clamp(21px, 1.9cqw, 28px)/1.12 var(--font-display); letter-spacing: -.025em; } .pipe-stage p { font: 300 15px/1.55 var(--font-display); color: var(--mut); } .pipe-meta { margin-top: auto; padding-top: 10px; font: 400 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); } /* ── CTA strips between blocks: a ruled row, text left, .btn-ink right ── */ .blk-in.blk-in--strip { padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(16px, 2vw, 32px); } .blk-in.blk-in--close { padding-bottom: clamp(40px, 4.4cqw, 64px); } /* a strip below closes the block */ .cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3cqw, 44px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cta-strip-h { font: 300 clamp(26px, 3cqw, 44px)/1.1 var(--font-display); letter-spacing: -.035em; } .cta-strip-sub { margin-top: 8px; font: 300 15px/1.5 var(--font-display); color: var(--mut); } .cta-strip .btn-ink { flex: none; } /* ── «Масштаб» #scale: a ruled table ── */ .scale-table { width: 100%; border-collapse: collapse; } .scale-table th { padding: 0 16px 14px 0; text-align: left; border-bottom: 1px solid var(--line); } .scale-table td { padding: clamp(18px, 2cqw, 28px) 16px clamp(18px, 2cqw, 28px) 0; vertical-align: top; border-bottom: 1px solid var(--line); } .scale-table th:nth-child(1), .scale-c1 { width: 13%; } .scale-table th:nth-child(3), .scale-c3 { width: 13%; } .scale-table th:nth-child(4), .scale-c4 { width: 30%; } .scale-table td:last-child, .scale-table th:last-child { padding-right: 0; } .scale-tier, .scale-time { display: inline-block; padding-top: .35em; font: 400 12px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--ink); } .scale-time { letter-spacing: .02em; } .scale-name { font: 300 clamp(20px, 1.7cqw, 26px)/1.15 var(--font-display); letter-spacing: -.025em; } .scale-desc { margin-top: 6px; font: 300 15px/1.5 var(--font-display); color: var(--mut); } .scale-tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { display: inline-flex; align-items: center; padding: 6px 9px; font: 400 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 3px; } /* ── stack ticker: mono text separated by «·», full bleed ── */ .blk-in.blk-in--label { padding-top: 0; padding-bottom: 16px; } /* a label over a full-bleed row; the block above leaves the gap */ .stack-ticker { position: relative; z-index: 1; overflow: hidden; margin-bottom: clamp(40px, 5vw, 72px); padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stack-row { display: flex; width: max-content; animation: stackTick 70s linear infinite; } .stack-row.r2 { margin-top: 10px; color: var(--mut); animation-duration: 90s; animation-direction: reverse; } .stack-item { font: 400 clamp(14px, 1.25vw, 17px)/1.5 var(--font-mono); letter-spacing: .01em; white-space: nowrap; } .stack-item::after { content: "·"; padding: 0 .9em; color: var(--mut); } /* after every item: both halves equal, the loop has no jump */ @keyframes stackTick { to { transform: translateX(-50%); } } /* ── contact #contact: heading, lead and the CLI on --term left; three action rows right ── */ .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 40px clamp(32px, 6cqw, 104px); } #contact .lead { max-width: 560px; margin: clamp(18px, 2cqw, 28px) 0 clamp(24px, 2.6cqw, 36px); font: 300 clamp(16px, 1.3cqw, 19px)/1.55 var(--font-display); color: var(--mut); } .term { position: relative; display: flex; flex-direction: column; max-width: 560px; padding: 34px 18px 18px; background: var(--term); color: var(--term-ink); border-radius: 5px; font: 400 13px/1.75 var(--font-mono); transition: background-color .35s ease; } .cli-line { display: block; white-space: pre-wrap; } .cli-prompt, .cli-out { color: var(--term-mut); } .cli-flag { color: var(--term-ink); } .cli-val { color: var(--term-ok); } .contact-actions { display: flex; flex-direction: column; } .action-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 44px; padding: clamp(18px, 2cqw, 26px) 0; border-top: 1px solid var(--line); } .action-row:last-child { border-bottom: 1px solid var(--line); } .action-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .action-val { font: 300 clamp(22px, 2.2cqw, 32px)/1.15 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s; } .action-arrow { flex: none; margin-bottom: .45em; transition: transform .3s var(--ease); } .action-row:hover .action-val { text-decoration-color: currentColor; } .action-row:hover .action-arrow { transform: translate(3px, -3px); } /* ── footer (shared _inc/footer.php; its base rules live in nav.php's inline style, which comes later in the document, hence the `footer` prefix) ── */ footer .fab-footer-grid { --fx: clamp(20px, 3.2vw, 46px); position: relative; max-width: 1440px; padding: 28px var(--fx) 36px; border-top: 0; } footer .fab-footer-grid::before { /* the rule spans the content column, as the rules of the blocks above */ content: ""; position: absolute; top: 0; left: var(--fx); right: var(--fx); height: 1px; background: var(--line); } footer .fab-footer-grid p, footer .fab-footer-grid a { font-family: var(--font-mono); font-size: 12px; color: var(--mut); letter-spacing: .04em; } footer .fab-footer-grid a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .35em; transition: color .2s, text-decoration-color .2s; } footer .fab-footer-grid a:hover { color: var(--ink); text-decoration-color: currentColor; } footer .fab-footer-grid .fab-footer-logo { font-family: var(--font-logo); font-size: 22px; color: var(--ink); letter-spacing: -.5px; text-decoration: none; } footer .fab-footer-logo span { color: var(--logo-dot); } /* ── tablet (< 1024) ── */ @media (max-width: 1023.98px) { .pipe-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .contact-grid { grid-template-columns: minmax(0, 1fr); } .term, #contact .lead { max-width: 640px; } footer .fab-footer-grid p:has(a) { display: flex; flex-wrap: wrap; align-items: center; column-gap: .55em; } footer .fab-footer-grid a { display: inline-flex; align-items: center; min-height: 44px; } } /* ── phone (<= 780) ── */ @media (max-width: 780px) { .blk-in { padding-top: 64px; padding-bottom: 64px; } .blk-hd { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; } .blk-hd .section-d { justify-self: start; } .pipe-track { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .pipe-stage h3 { margin-top: 10px; } .cta-strip { flex-direction: column; align-items: flex-start; } /* the table becomes one ruled card per row: tier and time on top, then the text, then the tags */ .scale-table, .scale-table tbody, .scale-table tr, .scale-table td { display: block; width: auto; } .scale-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .scale-table tbody { border-top: 1px solid var(--line); } .scale-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tier time" "name name" "tags tags"; padding: 20px 0 22px; border-bottom: 1px solid var(--line); } .scale-table td { padding: 0; border: 0; } .scale-c1 { grid-area: tier; } .scale-c3 { grid-area: time; justify-self: end; } .scale-c2 { grid-area: name; margin-top: 10px; } .scale-c4 { grid-area: tags; margin-top: 14px; } .scale-tier, .scale-time { padding-top: 0; } .blk-in.blk-in--label { padding-bottom: 14px; } .stack-ticker { margin-bottom: 48px; padding: 14px 0; } .term { padding: 32px 14px 16px; font-size: 12px; } footer .fab-footer-grid { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 20px; } footer .fab-footer-grid p, footer .fab-footer-grid a { font-size: 11px; } /* the copyright line with both links fits one row at 390 */ footer .fab-footer-grid .fab-footer-logo { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 560px) { .cta-strip { align-items: stretch; } .cta-strip .btn-ink { width: 100%; min-height: 52px; } } @media (prefers-reduced-motion: reduce) { .stack-row { animation: none; } .blk, .term, .action-val, .action-arrow, footer .fab-footer-grid a { transition: none; } } /* ═════════════ GLASS ═════════════ Owner-approved 2026-11-04 (spec §6). Rank of colour: blue leads, the page is white (navy at night), pink is light behind the hero pane plus one small mark per screen. Two colour panels bookend the page (hero, contact); between them the tiles are glass over one fixed field of soft light. The field stays put while the tiles scroll over it, so the colour inside a tile shifts as it moves: that is what makes them read as glass. No per-section shapes to cut off at a section edge. All values are tokens, both themes share these rules. Body's background propagates to the canvas, so body::before at z-index -1 sits above it and below everything else. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--field); } .svc, .cases, .blk, body footer { background: transparent; } /* colour panel, shared by the hero and the contact block */ .hero::before, #contact { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(34% 46% at var(--ex, 80%) var(--ey, 76%), var(--panel-ember-1) 0, var(--panel-ember-2) 40%, var(--panel-ember-3) 72%, var(--panel-ember-4) 100%), radial-gradient(48% 52% at var(--lx, 12%) var(--ly, 0%), var(--panel-sky) 0, var(--panel-sky-0) 100%), linear-gradient(var(--panel-angle, 158deg), var(--panel-stops)); background-size: 220px 220px, auto, auto, auto; } /* hero: a panel with clean rounded edges instead of a fade into the page */ .hero { --ink: var(--on-panel); --mut: var(--on-panel-mut); --line: var(--on-panel-line); --dot: var(--on-panel-dot); background: transparent; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 10px; z-index: -1; border-radius: 28px; } .hero-h1 .sw b { color: var(--on-panel); } .hero .lnk, .hero .lnk:hover { color: var(--on-panel); } /* the small mono line at the foot of the panel: solid white, and the panel is at its lightest under the left of it (worst pixel 4.4:1). A shallow shade along the bottom edge only; the gradient of the panel stays as approved */ .hero-foot { color: var(--on-panel); } @media (min-width: 901px) { .hero::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 150px; z-index: -1; pointer-events: none; border-radius: 0 0 28px 28px; background: linear-gradient(to top, var(--panel-shade), transparent); } } /* the one strong piece of glass: pink light passes through it */ .hero-side { padding: 24px 26px; box-sizing: border-box; border-radius: 22px; background: var(--pane-fill); -webkit-backdrop-filter: blur(var(--pane-blur)) saturate(135%); backdrop-filter: blur(var(--pane-blur)) saturate(135%); border: 1px solid var(--pane-border); box-shadow: var(--pane-shadow); } /* nav: clear glass. Its base rules are inline in nav.php, later in the document, hence header.nav and .nav .nav-cta */ header.nav { border-radius: 16px; background: var(--nav-glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--nav-glass-border); box-shadow: var(--nav-glass-shadow); } .nav .nav-cta { color: var(--ink); border-color: var(--pink); } /* pink as 12 px text is 2.9-3.1:1 on the glass over the hero: on hover the ink stays and the pink underline doubles (a shadow, so the line height does not move) */ .nav .nav-cta:hover { color: var(--ink); box-shadow: 0 1px 0 var(--pink); } /* buttons on the panels: white, pink only on hover */ .hero .btn-ink, #contact .btn-ink { background: var(--on-panel); color: var(--on-panel-btn); } .hero .btn-ink:not(:disabled):hover, #contact .btn-ink:not(:disabled):hover { background: var(--btn-hover-bg); color: var(--btn-hover-ink); } /* tiles: a thin fill so the colour comes through, a diagonal sheen, a rim lit from the top left, a soft shadow. Radius falls with hierarchy: 28 panel, 22 pane, 18 tile, 12 button and terminal, 10 inner surface, 9 chip. */ .svc .cd, .pipe-stage, .cta-strip, .cases .info, .calc-dialog { background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%); backdrop-filter: blur(var(--glass-blur)) saturate(135%); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-shadow); } .svc .cd:hover { border-color: var(--glass-border-hi); } /* a blurred tile is the containing block of a fixed child: drop the blur while the terminal is pinned to the screen (touch layouts, base rule in the bento block). home.js sets .term-pinned on the tile together with .pinned on the terminal */ .svc .cd.term-pinned { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); } /* a modal has to stay readable over whatever is under it */ .calc-dialog { background: var(--modal-fill); color: var(--ink); } .pipe-stage { padding: 22px 22px 24px; } .pipe-stage::before { display: none; } .cta-strip { padding: 26px 30px; } /* terminal: dark, a thin fill only. A tile is a backdrop root, so a nested blur would see nothing */ .svc .terminal-mock { background: var(--term-glass); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.22); } .terminal-mock, .term { border-radius: 12px; } /* cases: pink marks the choice, nothing else */ .cases .br { color: var(--pink); stroke: var(--pink); } @media (min-width: 1024px) { /* one grid with the other blocks: the strip runs gutter to gutter and fades out there, the tile's edge (not its text) stands on the gutter, as the tiles of «Что делаем» do */ .cases .sel { left: var(--cx, 0); right: var(--cx, 0); top: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .cases .rail { left: 0; right: 0; } .cases .track { gap: calc(5 * var(--u)); } /* neighbours clear the brackets */ .cases .th { opacity: .55; } .cases .th.on { opacity: 1; } .cases .th .no { display: none; } .cases .info { padding: 22px 24px; width: calc(max(calc(30 * var(--u)), 388px) + 50px); /* the 388 px row + padding + border */ margin: -22px 0 0; } .cases .col { left: max(calc(44 * var(--u)), calc(var(--ci, 0px) + 471px - 1.8 * var(--u))); } /* clears the tile on a narrow stage */ .cases .scr { width: calc(26 * var(--u)); margin-left: calc(-13 * var(--u)); background: var(--bg-1); border-radius: 8px; overflow: hidden; } .cases .scr.lens { box-shadow: 0 0 0 9px color-mix(in srgb, var(--bg) 68%, transparent), 0 0 0 10px var(--glass-border), 0 28px 56px -22px rgba(3,50,75,.38); } .cases .meta-r { top: calc(31 * var(--u)); } .cases .meta-r .how { display: block; margin-top: 6px; font: 300 13px/1.3 var(--font-display); color: var(--mut); } } @media (max-width: 1023.98px) { .cases .ms { background: var(--bg-1); border-radius: 8px; overflow: hidden; } .cases .ms.on { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bg) 68%, transparent), 0 0 0 8px var(--glass-border), 0 18px 36px -18px rgba(3,50,75,.38); } .cases-hd { flex-direction: column; align-items: stretch; gap: 14px; } .cases-ctl { justify-content: space-between; padding-bottom: 0; } .cases .mode button { min-height: 44px; } .cases .hint2 { display: flex; align-items: center; min-height: 44px; } } @media (max-width: 1023.98px) { .cases .info { margin: 18px clamp(20px, 3.2vw, 46px) 0; padding: 20px; } } /* contact: the panel again, pink light on the other side */ #contact { --ink: var(--on-panel); --mut: var(--on-panel-mut); --line: var(--on-panel-line); --panel-sky: var(--panel-sky-soft); --panel-angle: 202deg; /* lit from the top right: the text sits on the left */ --panel-stops: var(--panel-stops-text); --ex: 30%; --ey: 96%; --lx: 92%; --ly: 4%; margin: 0 10px; border-radius: 28px; overflow: hidden; color: var(--on-panel); } #contact::before { display: none; } footer .fab-footer-grid::before { display: none; } /* the panel above already closes the page */ #contact h2, #contact p, #contact .lead, #contact .action-val, #contact .action-txt, #contact .action-row { color: var(--on-panel); } #contact .action-row { padding: 18px 22px; margin-bottom: 10px; border-radius: 18px; border: 1px solid var(--row-border); background: var(--row-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%); backdrop-filter: blur(var(--glass-blur)) saturate(130%); box-shadow: var(--row-shadow); } @media (max-width: 900px) { .hero::before { inset: 6px; border-radius: 22px; } #contact { margin: 0 6px; border-radius: 22px; --panel-sky: var(--panel-sky-0); } /* the text fills the width here */ /* the lead on the contact panel: no sky light here, and the grain of the panel puts the worst pixel at 4.4:1. A soft shade pooled behind the text only (the panel's gradient stays as it is) */ #contact .lead { position: relative; z-index: 0; } #contact .lead::before { content: ""; position: absolute; z-index: -1; inset: -16px -12px; pointer-events: none; border-radius: 24px; background: var(--panel-shade); filter: blur(14px); } } /* the modal fills the phone screen: no card corners there */ @media (max-width: 560px) { .calc-dialog { border-radius: 0; border: 0; box-shadow: none; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* no glass available: the same tiles, solid */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .svc .cd, .pipe-stage, .cta-strip, .cases .info { background: var(--glass-solid); } header.nav { background: var(--nav-bg); } } @media (prefers-reduced-transparency: reduce) { .svc .cd, .pipe-stage, .cta-strip, .cases .info, .calc-dialog { background: var(--glass-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } header.nav { background: var(--glass-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } /* the glass on the colour panels: solid in the panel's own blue, so the white text on it stays readable */ .hero-side, #contact .action-row { background: var(--panel-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } }