/* =========================================================================== DJIGIT — тема «Light Technology». Язык утверждён на прототипе /design-concept-2 (вариант E): холодный серый как среда, плоские белые панели с хайрлайнами, моно-лейблы, кнопки с оранжевыми угловыми засечками. Тёмных плоскостей нет: navy — только текст, тонкие линии и заливка кнопок. --------------------------------------------------------------------------- .dj-* — система сайта .mk-* — продуктовые мокапы (container queries) ========================================================================= */ /* --- 1. БРЕНД-ТОКЕНЫ (из theme.json djigit-emran, без изменений) ---------- */ :root { --orange: #FF5A2C; --orange-deep: #EC4A1F; --navy: #1F2544; --bg: #EEF1F6; --paper: #FFFFFF; --muted: #6B7383; --soft: #F4F6FA; --peach: #FFE7DE; --line: #E3E7EF; /* производные светлые оттенки той же гаммы */ --paper-warm: #FCFCFD; --peach-soft: #FFF1EB; --ink: #12162B; /* только для текста */ --line-strong: #CBD2DF; --head: "Montserrat", system-ui, sans-serif; --body: "Open Sans", system-ui, -apple-system, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --pad: clamp(1.25rem, 4.5vw, 4.5rem); --maxw: 1440px; } /* --- 2. RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--navy); font-family: var(--body); font-size: 16px; line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--head); font-weight: 800; margin: 0; letter-spacing: -.03em; line-height: 1.02; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--orange); color: #fff; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* --- 3. УТИЛИТЫ И МОУШН-АРХИТЕКТУРА -------------------------------------- */ .dj-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; } [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal="mask"] { opacity: 1; transform: none; transition: none; display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } [data-reveal="mask"] > * { display: block; transform: translate3d(0, 130%, 0); transition: transform 1.05s var(--ease-out); transition-delay: var(--d, 0ms); will-change: transform; } [data-reveal="mask"].is-in > * { transform: none; } [data-reveal="scale"] { opacity: 0; transform: scale(.965) translate3d(0, 30px, 0); } [data-reveal="scale"].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal], [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .dj-ticker__track { animation: none !important; } } /* =========================================================================== 4. ОБЩИЙ СВЕТЛЫЙ КАРКАС (.v-*) — то, что одинаково во всех трёх вариантах ========================================================================= */ .dj-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } /* кнопки — стиль концепции B (бордер + оранжевые угловые засечки) */ .dj-btn { position: relative; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--head); font-weight: 700; font-size: .82rem; line-height: 1.2; padding: .78rem 1.35rem; border: 1px solid var(--navy); color: var(--navy); background: transparent; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; } .dj-btn::before, .dj-btn::after { content: ""; position: absolute; width: 6px; height: 6px; border: 1px solid var(--orange); transition: opacity .3s var(--ease); } .dj-btn::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .dj-btn::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .dj-btn:hover { background: var(--navy); color: #fff; } .dj-btn:hover::before, .dj-btn:hover::after { opacity: 0; } .dj-btn--solid { background: var(--orange); border-color: var(--orange); color: #fff; } .dj-btn--solid::before, .dj-btn--solid::after { border-color: rgba(255,255,255,.85); } .dj-btn--solid:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; } .dj-btn--lg { font-size: .95rem; padding: 1.05rem 1.9rem; } .dj-btn svg { width: 15px; height: 15px; } /* лейблы */ .dj-lbl { font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); } .dj-lbl--muted { color: var(--muted); } .dj-mono { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* текстовая ссылка со стрелкой в круге (из A) */ .dj-link { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--head); font-weight: 800; font-size: .82rem; letter-spacing: .11em; text-transform: uppercase; color: var(--navy); white-space: nowrap; } .dj-link i { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--navy); display: grid; place-items: center; transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .dj-link i svg { width: 15px; height: 15px; } .dj-link:hover { color: var(--orange); } .dj-link:hover i { background: var(--orange); border-color: var(--orange); color: #fff; transform: rotate(-45deg); } /* пламя из логотипа — единственный декоративный знак бренда */ .dj-flame path { fill: var(--orange); } /* колоночные направляющие */ .dj-rules { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .dj-rules__in { max-width: var(--maxw); height: 100%; margin: 0 auto; padding-inline: var(--pad); display: grid; grid-template-columns: repeat(12, 1fr); } .dj-rules__in span { border-left: 1px solid rgba(31,37,68,.055); } .dj-rules__in span:last-child { border-right: 1px solid rgba(31,37,68,.055); } @media (max-width: 900px) { .dj-rules__in { grid-template-columns: repeat(4, 1fr); } } /* =========================================================================== 6. ПРОДУКТОВЫЕ МОКАПЫ — переиспользованы из первого раунда без изменений ========================================================================= */ .mk { --mk-bg: #fff; --mk-ink: #1F2544; --mk-line: #E9ECF3; --mk-dim: #8A91A1; --mk-soft: #F5F7FA; } /* ---- browser frame ---------------------------------------------------- Все размеры внутри мокапов заданы в cqw: интерфейс одинаково корректно читается и в hero на 1140px, и в превью на 340px. */ .mk-browser { container-type: inline-size; background: var(--mk-bg); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,24,48,.04), 0 12px 28px -12px rgba(20,24,48,.18), 0 60px 90px -50px rgba(20,24,48,.45); } .mk-browser__bar { display: flex; align-items: center; gap: .86cqw; padding: .94cqw 1.25cqw; background: #F7F8FB; border-bottom: 1px solid var(--mk-line); } .mk-browser__dot { width: .88cqw; height: .88cqw; border-radius: 50%; background: #DCE0E9; flex: 0 0 auto; } .mk-browser__url { margin-left: .94cqw; flex: 1; height: 1.96cqw; border-radius: .49cqw; background: #fff; border: 1px solid var(--mk-line); display: flex; align-items: center; padding: 0 .94cqw; font-family: var(--mono); font-size: .91cqw; color: var(--mk-dim); } .mk-browser__body { display: flex; min-height: 0; } /* ---- app shell ---- */ .mk-side { width: 21%; background: #FAFBFD; border-right: 1px solid var(--mk-line); padding: 1.33cqw 1.1cqw; display: flex; flex-direction: column; gap: .66cqw; } .mk-side__brand { display: flex; align-items: center; gap: .63cqw; margin-bottom: 1.1cqw; padding: 0 .39cqw; } .mk-side__logo { width: 1.57cqw; height: 1.57cqw; border-radius: .39cqw; background: var(--orange); flex: 0 0 auto; } .mk-side__name { font-family: var(--head); font-weight: 800; font-size: .97cqw; letter-spacing: -.01em; color: var(--mk-ink); } .mk-nav { display: flex; align-items: center; gap: .71cqw; padding: .53cqw .63cqw; border-radius: .49cqw; font-size: .91cqw; color: var(--mk-dim); font-weight: 600; } .mk-nav i { width: 1.08cqw; height: 1.08cqw; border-radius: .29cqw; background: #E4E8F0; flex: 0 0 auto; display: block; } .mk-nav.is-on { background: rgba(255,90,44,.09); color: var(--orange); } .mk-nav.is-on i { background: var(--orange); } .mk-main { flex: 1; padding: 1.41cqw 1.57cqw 1.73cqw; min-width: 0; } .mk-top { display: flex; align-items: center; justify-content: space-between; gap: 1.57cqw; margin-bottom: 1.33cqw; } .mk-top__t { font-family: var(--head); font-weight: 800; font-size: 1.22cqw; color: var(--mk-ink); } .mk-top__sub { font-size: .86cqw; color: var(--mk-dim); margin-top: .19cqw; } .mk-chiprow { display: flex; gap: .47cqw; } .mk-chip { font-size: .82cqw; font-weight: 700; color: var(--mk-dim); border: 1px solid var(--mk-line); border-radius: .39cqw; padding: .31cqw .66cqw; white-space: nowrap; } .mk-chip.is-on { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; } .mk-chip.is-orange { background: var(--orange); border-color: var(--orange); color: #fff; } .mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .78cqw; margin-bottom: 1.1cqw; } .mk-kpi { border: 1px solid var(--mk-line); border-radius: .69cqw; padding: .75cqw .86cqw; } .mk-kpi__l { font-size: .78cqw; color: var(--mk-dim); letter-spacing: .04em; text-transform: uppercase; } .mk-kpi__n { font-family: var(--head); font-weight: 800; font-size: 1.49cqw; color: var(--mk-ink); line-height: 1.1; margin-top: .19cqw; font-variant-numeric: tabular-nums; } .mk-kpi__d { font-size: .75cqw; color: #21A67A; font-weight: 700; } .mk-kpi__d.dn { color: var(--orange); } .mk-panels { display: grid; grid-template-columns: 1.45fr 1fr; gap: .78cqw; } .mk-panel { border: 1px solid var(--mk-line); border-radius: .69cqw; padding: .86cqw .94cqw; min-width: 0; } .mk-panel__h { display: flex; align-items: center; justify-content: space-between; font-size: .86cqw; font-weight: 700; color: var(--mk-ink); margin-bottom: .78cqw; } .mk-panel__h span:last-child { color: var(--mk-dim); font-weight: 600; font-size: .78cqw; } /* график */ .mk-chart { width: 100%; height: auto; display: block; } .mk-chart .grid { stroke: var(--mk-line); stroke-width: .5; } .mk-chart .area { fill: rgba(255,90,44,.12); } .mk-chart .line { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* строки-задачи / смены */ .mk-row { display: flex; align-items: center; gap: .71cqw; padding: .5cqw 0; border-bottom: 1px solid var(--mk-line); } .mk-row:last-child { border-bottom: 0; } .mk-av { width: 1.47cqw; height: 1.47cqw; border-radius: 50%; background: #DEE3EC; flex: 0 0 auto; display: grid; place-items: center; font-size: .66cqw; font-weight: 800; color: #6B7383; font-family: var(--head); } .mk-av.o { background: var(--peach); color: var(--orange); } .mk-av.n { background: var(--navy); color: #fff; } .mk-row__t { font-size: .86cqw; color: var(--mk-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-row__m { font-size: .75cqw; color: var(--mk-dim); margin-left: auto; white-space: nowrap; } .mk-state { font-size: .72cqw; font-weight: 800; padding: .16cqw .47cqw; border-radius: .29cqw; background: var(--mk-soft); color: var(--mk-dim); white-space: nowrap; } .mk-state.ok { background: rgba(33,166,122,.12); color: #21A67A; } .mk-state.go { background: rgba(255,90,44,.12); color: var(--orange); } /* таймлайн смен */ .mk-tl { display: flex; flex-direction: column; gap: .47cqw; } .mk-tl__row { display: flex; align-items: center; gap: .55cqw; } .mk-tl__n { font-size: .75cqw; color: var(--mk-dim); width: 3.33cqw; flex: 0 0 auto; } .mk-tl__bar { flex: 1; height: .78cqw; border-radius: .29cqw; background: var(--mk-soft); position: relative; overflow: hidden; } .mk-tl__fill { position: absolute; top: 0; bottom: 0; border-radius: .29cqw; background: var(--navy); opacity: .82; } .mk-tl__fill.o { background: var(--orange); } /* шахматка номерного фонда */ .mk-cal { display: grid; grid-template-columns: repeat(16, 1fr); gap: .2cqw; } .mk-cal i { display: block; height: .88cqw; border-radius: .2cqw; background: var(--mk-soft); } .mk-cal i.b { background: rgba(31,37,68,.55); } .mk-cal i.o { background: var(--orange); } .mk-cal i.h { background: rgba(31,37,68,.25); } .mk--dark .mk-cal i.b { background: rgba(255,255,255,.4); } .mk--dark .mk-cal i.h { background: rgba(255,255,255,.18); } .mk-legend { display: flex; gap: .94cqw; margin-top: .71cqw; font-size: .71cqw; color: var(--mk-dim); } .mk-legend span { display: inline-flex; align-items: center; gap: .3cqw; } .mk-legend i { width: .59cqw; height: .59cqw; border-radius: .2cqw; display: block; } /* ---- phone frame ---- */ .mk-phone { container-type: inline-size; width: 100%; max-width: 260px; aspect-ratio: 9 / 19; background: #0C0F1B; border-radius: 30px; padding: 6px; box-shadow: 0 3px 6px rgba(20,24,48,.10), 0 22px 40px -18px rgba(20,24,48,.42), 0 60px 90px -55px rgba(20,24,48,.6); } .mk-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 9.2cqw; overflow: hidden; background: #fff; display: flex; flex-direction: column; } .mk-phone__island { position: absolute; top: 2.7cqw; left: 50%; transform: translateX(-50%); width: 32%; height: 4.6cqw; border-radius: 999px; background: #0C0F1B; z-index: 4; } .mk-scr { padding: 9.2cqw 4.3cqw 3.4cqw; flex: 1; display: flex; flex-direction: column; gap: 2.8cqw; min-height: 0; } .mk-scr__t { font-family: var(--head); font-weight: 800; font-size: 4.55cqw; color: var(--mk-ink); letter-spacing: -.02em; } .mk-scr__s { font-size: 3.1cqw; color: var(--mk-dim); } .mk-hero-img { border-radius: 3.5cqw; height: 30%; background: linear-gradient(150deg, #2C3352 0%, #4A3B4E 55%, #7A4A34 100%); position: relative; overflow: hidden; flex: 0 0 auto; } .mk-hero-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(12,15,27,.65), transparent); } .mk-hero-img__cap { position: absolute; left: 3.1cqw; bottom: 2.8cqw; z-index: 2; color: #fff; font-family: var(--head); font-weight: 800; font-size: 3.6cqw; } .mk-hero-img__pill { position: absolute; right: 2.8cqw; top: 2.8cqw; z-index: 2; background: rgba(255,255,255,.92); color: #1F2544; font-size: 2.7cqw; font-weight: 800; padding: 1cqw 2.1cqw; border-radius: 999px; } .mk-item { display: flex; align-items: center; gap: 2.8cqw; padding: 2.3cqw; border: 1px solid var(--mk-line); border-radius: 3.1cqw; } .mk-item__ph { width: 10cqw; height: 10cqw; border-radius: 2.3cqw; background: linear-gradient(135deg, #E9EDF4, #D9DEE9); flex: 0 0 auto; } .mk-item__ph.o { background: linear-gradient(135deg, #FFD9CB, #FFB79C); } .mk-item__t { font-size: 3.2cqw; font-weight: 700; color: var(--mk-ink); } .mk-item__s { font-size: 2.7cqw; color: var(--mk-dim); } .mk-item__p { margin-left: auto; font-family: var(--head); font-weight: 800; font-size: 3.4cqw; color: var(--mk-ink); white-space: nowrap; } .mk-cta { margin-top: auto; background: var(--orange); color: #fff; border-radius: 3.1cqw; text-align: center; padding: 2.8cqw; font-family: var(--head); font-weight: 800; font-size: 3.45cqw; } .mk-tabbar { display: flex; justify-content: space-around; padding: 2.5cqw 0 3.4cqw; border-top: 1px solid var(--mk-line); flex: 0 0 auto; } .mk-tabbar i { width: 5cqw; height: 5cqw; border-radius: 1.5cqw; background: #E4E8F0; display: block; } .mk-tabbar i.is-on { background: var(--orange); } /* элементы, общие с браузерным мокапом, — в масштабе телефона */ .mk-phone .mk-chip { font-size: 3.1cqw; padding: 1.2cqw 2.3cqw; border-radius: 1.5cqw; } .mk-phone .mk-chiprow { gap: 1.9cqw; } .mk-phone .mk-tl { gap: 1.9cqw; } .mk-phone .mk-tl__row { gap: 2.2cqw; } .mk-phone .mk-tl__n { font-size: 2.8cqw; width: 13cqw; } .mk-phone .mk-tl__bar { height: 3cqw; border-radius: 1.2cqw; } .mk-phone .mk-tl__fill { border-radius: 1.2cqw; } /* ---- плавающий фрагмент интерфейса ---- */ .mk-frag { container-type: inline-size; background: #fff; border-radius: 10px; padding: .9rem 1rem; box-shadow: 0 2px 4px rgba(20,24,48,.05), 0 18px 40px -16px rgba(20,24,48,.3); border: 1px solid rgba(227,231,239,.9); } .mk-frag__l { font-size: 4.4cqw; color: #8A91A1; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } .mk-frag__n { font-family: var(--head); font-weight: 800; font-size: 10.8cqw; color: #1F2544; line-height: 1.1; margin-top: 1cqw; font-variant-numeric: tabular-nums; } /* =========================================================================== 7. VARIANT D · EDITORIAL PAPER Белая бумага, обнажённая сетка, максимум типографики, ноль карточек и теней. Оранжевый — тонкими линиями, подчёркиваниями и одним крупным словом. ========================================================================= */ .vd { background: var(--paper); color: var(--navy); position: relative; } .vd section { position: relative; z-index: 1; } /* --- header --- */ .vd-head { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9); backdrop-filter: blur(12px) saturate(150%); border-bottom: 1px solid var(--line); } .vd-head__in { max-width: var(--maxw); margin: 0 auto; padding: 1.05rem var(--pad); display: flex; align-items: center; gap: 2rem; } .vd-head__logo svg { height: 26px; width: 80px; color: var(--navy); } .vd-nav { display: flex; gap: 2.1rem; margin-left: auto; } .vd-nav a { font-family: var(--head); font-weight: 600; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; position: relative; padding-block: .3rem; } .vd-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--orange); transition: right .45s var(--ease-out); } .vd-nav a:hover::after { right: 0; } @media (max-width: 1000px) { .vd-nav { display: none; } } /* --- hero (композиция концепции A) --- */ .vd-hero { padding-block: clamp(2.5rem, 4vw, 5rem) clamp(2rem, 3vw, 3.5rem); } .vd-hero__meta { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: end; padding-bottom: clamp(1.5rem, 3vw, 3rem); } .vd-hero__meta > *:nth-child(1) { grid-column: 1 / 5; } .vd-hero__meta > *:nth-child(2) { grid-column: 6 / 10; } .vd-hero__meta > *:nth-child(3) { grid-column: 11 / 13; text-align: right; } .vd-display { font-family: var(--head); font-weight: 800; letter-spacing: -.045em; line-height: .86; font-size: clamp(3rem, .4rem + 12.2vw, 12.5rem); } .vd-display > span { display: block; } .vd-l2 { margin-left: 8.33%; } .vd-l3-outer { margin-left: 16.66%; } .vd-l3 { display: flex !important; align-items: baseline; gap: clamp(.6rem, 1.6vw, 1.6rem); } .vd-l3 .vd-rule { flex: 1; height: 1px; background: var(--navy); opacity: .25; } .vd-flame { height: .74em; width: auto; align-self: center; } .vd-hero__bottom { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3.75rem); align-items: start; } .vd-hero__scroll { grid-column: 1 / 4; font-family: var(--head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .7rem; } .vd-hero__scroll i { width: 34px; height: 1px; background: var(--muted); display: block; animation: vd-slide 2.4s var(--ease) infinite; } @keyframes vd-slide { 0%,100% { transform: scaleX(.4); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } } .vd-hero__lead { grid-column: 6 / 11; font-size: clamp(1.05rem, .95rem + .55vw, 1.32rem); line-height: 1.6; color: #3B4256; max-width: 46ch; } .vd-hero__cta { grid-column: 11 / 13; justify-self: end; } @media (max-width: 900px) { .vd-hero__meta > *:nth-child(1), .vd-hero__meta > *:nth-child(2) { grid-column: 1 / 13; } .vd-hero__meta > *:nth-child(3) { display: none; } .vd-l2, .vd-l3-outer { margin-left: 0; } .vd-hero__scroll { display: none; } .vd-hero__lead { grid-column: 1 / 13; } .vd-hero__cta { grid-column: 1 / 13; justify-self: start; margin-top: 1.5rem; } } /* полнокадровая полоса с продуктом */ .vd-band { position: relative; z-index: 1; margin-top: clamp(2rem, 4vw, 4rem); background: var(--bg); overflow: hidden; height: clamp(260px, 38vw, 540px); border-block: 1px solid var(--line); } .vd-band__mock { position: absolute; left: 50%; top: 14%; width: min(1180px, 88vw); transform: translateX(-50%); } .vd-band::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, var(--bg) 24%, rgba(238,241,246,0)); z-index: 2; pointer-events: none; } .vd-band__cap { position: absolute; left: var(--pad); bottom: 1.1rem; z-index: 3; font-family: var(--head); font-weight: 700; font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); } .vd-band__cap b { color: var(--navy); } /* --- цифры (композиция концепции A) --- */ .vd-metrics { padding-block: clamp(3.5rem, 7vw, 7.5rem); } .vd-metrics__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem 1rem; align-items: start; } .vd-metric { border-top: 1px solid var(--navy); padding-top: 1.1rem; } .vd-metric:nth-child(1) { grid-column: 1 / 4; } .vd-metric:nth-child(2) { grid-column: 5 / 8; margin-top: clamp(1.5rem, 4vw, 4.5rem); } .vd-metric:nth-child(3) { grid-column: 9 / 12; margin-top: clamp(3rem, 8vw, 9rem); } .vd-metric__n { font-family: var(--head); font-weight: 800; font-size: clamp(3.2rem, 1rem + 7.6vw, 8rem); line-height: .84; letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .vd-metric__n em { font-style: normal; color: var(--orange); } .vd-metric__l { margin-top: .9rem; font-size: .92rem; color: var(--muted); max-width: 24ch; } .vd-metrics__note { grid-column: 9 / 13; margin-top: 2rem; font-size: .9rem; color: var(--muted); } @media (max-width: 900px) { .vd-metric:nth-child(1), .vd-metric:nth-child(2), .vd-metric:nth-child(3) { grid-column: 1 / 13; margin-top: 0; } .vd-metrics__note { grid-column: 1 / 13; } } /* --- заголовок секции --- */ .vd-sechead { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: baseline; padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); } .vd-sechead__idx { grid-column: 1 / 2; font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; color: var(--orange); } .vd-sechead__t { grid-column: 2 / 9; font-size: clamp(1.9rem, 1rem + 3.4vw, 4.2rem); letter-spacing: -.035em; } .vd-sechead__d { grid-column: 9 / 13; font-size: .95rem; color: var(--muted); max-width: 34ch; } @media (max-width: 900px) { .vd-sechead > * { grid-column: 1 / 13 !important; } .vd-sechead__t { margin-top: .6rem; } .vd-sechead__d { margin-top: 1rem; } } /* --- компетенции (матрица концепции B, светлая) --- */ .vd-comp { padding-block: clamp(3rem, 6vw, 6rem); } .vd-tabs { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--navy); margin-top: clamp(2rem, 4vw, 3rem); } .vd-tab { padding: 1.25rem 1rem 1.15rem; text-align: left; border-right: 1px solid var(--line); position: relative; transition: background .35s var(--ease); } .vd-tab:last-child { border-right: 0; } .vd-tab__n { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--muted); margin-bottom: .55rem; transition: color .3s var(--ease); } .vd-tab__t { display: block; font-family: var(--head); font-weight: 700; font-size: .95rem; color: var(--muted); line-height: 1.2; letter-spacing: -.01em; transition: color .3s var(--ease); } .vd-tab::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); } .vd-tab:hover { background: var(--soft); } .vd-tab:hover .vd-tab__t { color: var(--navy); } .vd-tab.is-on .vd-tab__t { color: var(--navy); } .vd-tab.is-on .vd-tab__n { color: var(--orange); } .vd-tab.is-on::after { transform: scaleX(1); } @media (max-width: 1000px) { .vd-tabs { grid-template-columns: repeat(3, 1fr); } .vd-tab:nth-child(3n) { border-right: 0; } .vd-tab:nth-child(-n+3) { border-bottom: 1px solid var(--line); } } @media (max-width: 620px) { .vd-tabs { grid-template-columns: repeat(2, 1fr); } .vd-tab:nth-child(3n) { border-right: 1px solid var(--line); } .vd-tab:nth-child(2n) { border-right: 0; } .vd-tab:nth-child(-n+4) { border-bottom: 1px solid var(--line); } } .vd-panels { border-top: 1px solid var(--line); } .vd-panel { display: none; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding-top: clamp(2rem, 4vw, 3.25rem); align-items: start; } .vd-panel.is-on { display: grid; animation: dj-fade .55s var(--ease-out); } @keyframes dj-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .vd-panel__txt { grid-column: 1 / 6; } .vd-panel__txt h3 { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); margin-bottom: .9rem; letter-spacing: -.03em; } .vd-panel__txt p { color: var(--muted); font-size: .97rem; line-height: 1.7; } .vd-panel__list { margin-top: 1.5rem; } .vd-panel__list li { display: flex; gap: .8rem; align-items: baseline; padding: .65rem 0; border-top: 1px solid var(--line); font-size: .9rem; } .vd-panel__list li::before { content: ""; width: 5px; height: 5px; background: var(--orange); flex: 0 0 auto; } .vd-panel__vis { grid-column: 7 / 13; } .vd-panel__vis--phone { display: flex; justify-content: center; } .vd-panel__vis--phone > * { width: 100%; max-width: 252px; } @media (max-width: 900px) { .vd-panel__txt, .vd-panel__vis { grid-column: 1 / 13; } } /* --- избранные работы (sticky-сторителлинг концепции C, editorial-подача) - */ .vd-work { padding-block: clamp(3rem, 6vw, 6rem); } .vd-story { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.5rem); } .vd-story__aside { position: sticky; top: 20vh; align-self: start; } .vd-story__slot { position: relative; min-height: 320px; } .vd-story__card { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events: none; } .vd-story__card.is-on { opacity: 1; transform: none; pointer-events: auto; } .vd-story__idx { font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); } .vd-story__card h3 { font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); letter-spacing: -.042em; margin: .9rem 0 1rem; } .vd-story__card p { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 40ch; } .vd-story__facts { margin-top: 1.75rem; border-top: 1px solid var(--navy); } .vd-story__facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); } .vd-story__facts b { font-family: var(--head); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .vd-story__facts span { font-size: .85rem; color: var(--muted); } .vd-story__prog { margin-top: 1.75rem; display: flex; gap: .4rem; } .vd-story__prog i { display: block; width: 38px; height: 2px; background: var(--line); transition: background .4s var(--ease); } .vd-story__prog i.is-on { background: var(--orange); } .vd-story__scenes { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 7rem); } .vd-scene { padding: clamp(1.25rem, 2.4vw, 2.5rem); display: grid; place-items: center; min-height: clamp(300px, 30vw, 460px); border: 1px solid var(--line); border-radius: 4px; } .vd-scene--a { background: var(--soft); } .vd-scene--b { background: var(--bg); } .vd-scene--c { background: var(--peach-soft); } .vd-scene__mock { width: 100%; } .vd-scene__phones { width: 100%; display: flex; gap: clamp(.8rem, 2vw, 2rem); align-items: center; justify-content: center; } .vd-scene__phones > * { flex: 0 1 220px; max-width: 220px; } .vd-scene__phones > *:first-child { margin-top: clamp(1rem, 3vw, 2.5rem); } @media (max-width: 900px) { .vd-story { grid-template-columns: 1fr; } .vd-story__aside { position: static; } .vd-story__slot { min-height: 0; } .vd-story__card { position: static; opacity: 1; transform: none; display: none; } .vd-story__card.is-on { display: block; } .vd-story__scenes { margin-top: 2rem; } } /* --- услуги (горизонтальный разворот концепции C, editorial-панели) ------ */ .vd-serv { padding-block: clamp(3rem, 6vw, 6rem); overflow: hidden; } .vd-serv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: clamp(1.75rem, 3vw, 2.75rem); } .vd-serv__head h2 { font-size: clamp(1.9rem, 1rem + 3.4vw, 4.2rem); letter-spacing: -.035em; max-width: 20ch; } .dj-arrows { display: flex; gap: .5rem; } .dj-arrow { width: 46px; height: 46px; border: 1px solid var(--navy); display: grid; place-items: center; transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); } .dj-arrow:hover { background: var(--navy); color: #fff; } .dj-arrow:disabled { opacity: .3; cursor: default; } .dj-arrow:disabled:hover { background: transparent; color: inherit; } .dj-arrow svg { width: 16px; height: 16px; } .dj-rail { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; padding-inline: var(--pad); margin-inline: calc(var(--pad) * -1); } .dj-rail::-webkit-scrollbar { display: none; } .vd-card { scroll-snap-align: start; flex: 0 0 clamp(260px, 30vw, 400px); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; min-height: clamp(340px, 34vw, 430px); transition: border-color .4s var(--ease), background .4s var(--ease); } .vd-card:hover { border-color: var(--navy); background: var(--soft); } .vd-card__n { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--orange); } .vd-card h3 { font-family: var(--head); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); letter-spacing: -.03em; margin: .9rem 0 .75rem; } .vd-card p { color: var(--muted); font-size: .92rem; line-height: 1.6; } .vd-card__vis { margin-top: auto; padding-top: 1.5rem; } .vd-card__meta { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; } /* мини-визуалы услуг */ .dj-vis { height: 92px; background: var(--soft); position: relative; overflow: hidden; border-radius: 3px; } .dj-vis--bars { display: flex; align-items: flex-end; gap: 6px; padding: 12px; } .dj-vis--bars i { flex: 1; background: #DDE3ED; display: block; } .dj-vis--bars i:nth-child(1) { height: 34%; } .dj-vis--bars i:nth-child(2) { height: 55%; } .dj-vis--bars i:nth-child(3) { height: 76%; background: var(--orange); } .dj-vis--bars i:nth-child(4) { height: 46%; } .dj-vis--bars i:nth-child(5) { height: 64%; } .dj-vis--bars i:nth-child(6) { height: 88%; } .dj-vis--stack { padding: 14px; display: flex; flex-direction: column; gap: 6px; } .dj-vis--stack i { height: 9px; background: #DDE3ED; display: block; } .dj-vis--stack i:nth-child(1) { width: 78%; } .dj-vis--stack i:nth-child(2) { width: 54%; background: var(--orange); } .dj-vis--stack i:nth-child(3) { width: 88%; } .dj-vis--stack i:nth-child(4) { width: 40%; } .dj-vis--screens { display: flex; align-items: center; justify-content: center; gap: 8px; } .dj-vis--screens i { display: block; border: 1.5px solid #D5DBE6; } .dj-vis--screens i:nth-child(1) { width: 22px; height: 40px; } .dj-vis--screens i:nth-child(2) { width: 58px; height: 52px; border-color: var(--orange); } .dj-vis--screens i:nth-child(3) { width: 30px; height: 34px; } .dj-vis--flow { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .dj-vis--flow::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 1.5px; background: #E1E6EF; } .dj-vis--flow i { width: 26px; height: 26px; border: 1.5px solid #D5DBE6; display: block; position: relative; z-index: 1; background-color: var(--soft); } .dj-vis--flow i.o { border-color: var(--orange); background-color: rgba(255,90,44,.1); } .dj-vis--dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; padding: 16px; place-items: center; } .dj-vis--dots i { width: 7px; height: 7px; background: #DDE3ED; display: block; } .dj-vis--dots i:nth-child(3n) { background: #C9D1DE; } .dj-vis--dots i:nth-child(7), .dj-vis--dots i:nth-child(12), .dj-vis--dots i:nth-child(19) { background: var(--orange); } .dj-vis--steps { display: flex; align-items: center; gap: 6px; padding: 0 14px; } .dj-vis--steps i { flex: 1; height: 4px; background: #DDE3ED; display: block; position: relative; } .dj-vis--steps i.o { background: var(--orange); } .dj-vis--steps i::after { content: ""; position: absolute; left: 0; top: -6px; width: 8px; height: 8px; border-radius: 50%; background: inherit; } /* --- финальный блок (концепция C, светлый) ------------------------------ */ .vd-cta { padding-block: clamp(4rem, 9vw, 9rem) clamp(2.5rem, 4vw, 4rem); overflow: hidden; } .vd-cta__flame { position: absolute; right: -4%; top: 46%; transform: translateY(-50%); height: 130%; width: auto; opacity: .07; pointer-events: none; z-index: 0; } .vd-cta > .dj-wrap { position: relative; z-index: 1; } .vd-cta h2 { font-family: var(--head); font-weight: 800; font-size: clamp(2.4rem, .7rem + 7.6vw, 7.6rem); line-height: .96; letter-spacing: -.045em; } .vd-cta h2 em { font-style: normal; color: var(--orange); display: block; margin-left: 8.33%; margin-top: .1em; } .vd-cta__sub { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: end; } .vd-cta__sub p { grid-column: 1 / 6; color: var(--muted); font-size: 1.02rem; } .vd-cta__sub div { grid-column: 7 / 13; display: flex; gap: .9rem; flex-wrap: wrap; justify-self: end; } @media (max-width: 900px) { .vd-cta h2 em { margin-left: 0; } .vd-cta__sub > * { grid-column: 1 / 13 !important; justify-self: start !important; } } /* =========================================================================== 8. ФОРМА СВЯЗИ — общая структура (.dj-form*), визуал задаётся в каждом варианте ========================================================================= */ .dj-form { display: grid; gap: clamp(.85rem, 1.5vw, 1.15rem); } .dj-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.85rem, 1.5vw, 1.15rem); } @media (max-width: 640px) { .dj-form__row { grid-template-columns: 1fr; } } .dj-field { position: relative; display: block; } .dj-field__lbl { display: block; font-family: var(--head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .38rem; transition: color .25s var(--ease); } .dj-field.is-error .dj-field__lbl { color: #D93025; } .dj-field input, .dj-field textarea, .dj-field select { width: 100%; font-family: var(--body); font-size: 1.02rem; color: var(--navy); transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .dj-field input::placeholder, .dj-field textarea::placeholder { color: #A6ADBB; } .dj-field textarea { resize: vertical; min-height: 64px; } .dj-field__err { display: block; min-height: 0; margin-top: .3rem; font-size: .8rem; color: #D93025; } .dj-choice { display: flex; flex-wrap: wrap; gap: .5rem; } .dj-choice button { font-family: var(--head); font-weight: 600; font-size: .85rem; padding: .55rem .95rem; border: 1px solid var(--line-strong); color: var(--muted); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .dj-choice button:hover { color: var(--navy); border-color: var(--navy); } .dj-choice button.is-on { background: var(--navy); border-color: var(--navy); color: #fff; } .dj-consent { display: flex; gap: .8rem; align-items: flex-start; font-size: .85rem; color: var(--muted); line-height: 1.5; cursor: pointer; } .dj-consent input { position: absolute; opacity: 0; width: 0; height: 0; } .dj-consent__box { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--line-strong); display: grid; place-items: center; margin-top: .1rem; transition: background .25s var(--ease), border-color .25s var(--ease); } .dj-consent__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .25s var(--ease-out); } .dj-consent input:checked + .dj-consent__box { background: var(--orange); border-color: var(--orange); } .dj-consent input:checked + .dj-consent__box svg { opacity: 1; transform: none; } .dj-consent input:focus-visible + .dj-consent__box { outline: 2px solid var(--orange); outline-offset: 2px; } .dj-field.is-error .dj-consent__box { border-color: #D93025; } .dj-consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } .dj-form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .dj-form__status { font-size: .88rem; color: var(--muted); } .dj-form__status.is-ok { color: #1B8F62; font-weight: 600; } .dj-form.is-sent .dj-form__row, .dj-form.is-sent .dj-field, .dj-form.is-sent .dj-choice { opacity: .45; pointer-events: none; } .dj-form.is-sent .dj-form__actions button { opacity: .45; pointer-events: none; } /* --- форма варианта D: поля-подчёркивания, ноль боксов ------------------- */ .vd-form { padding-block: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--line); } .vd-form__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .vd-form__aside { grid-column: 1 / 5; position: sticky; top: 18vh; } .vd-form__aside h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem); letter-spacing: -.035em; margin: 1rem 0 1rem; } .vd-form__aside p { color: var(--muted); font-size: .97rem; max-width: 34ch; } .vd-contacts { margin-top: 2rem; border-top: 1px solid var(--navy); } .vd-contacts a, .vd-contacts div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); } .vd-contacts span { font-family: var(--head); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .vd-contacts b { font-family: var(--head); font-weight: 700; font-size: 1rem; transition: color .25s var(--ease); } .vd-contacts a:hover b { color: var(--orange); } .vd-trust { margin-top: 1.75rem; display: grid; gap: .55rem; } .vd-trust li { position: relative; padding-left: 1.4rem; font-size: .87rem; color: var(--muted); } .vd-trust li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--orange); } .vd-form__body { grid-column: 6 / 13; } @media (max-width: 980px) { .vd-form__aside, .vd-form__body { grid-column: 1 / 13; position: static; } .vd-form__body { margin-top: 2.5rem; } } .vd .dj-field input, .vd .dj-field textarea { border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; padding: .65rem 0; border-radius: 0; } .vd .dj-field input:focus, .vd .dj-field textarea:focus { outline: none; border-bottom-color: var(--orange); } .vd .dj-field.is-error input, .vd .dj-field.is-error textarea { border-bottom-color: #D93025; } .vd .dj-choice button { border-radius: 0; } /* --- подвал варианта D --------------------------------------------------- */ .vd-foot { border-top: 1px solid var(--navy); padding-block: 1.75rem 2.5rem; } .vd-foot__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .vd-foot svg { height: 24px; width: 74px; color: var(--navy); } .vd-foot span, .vd-foot a { font-size: .84rem; color: var(--muted); } .vd-foot a:hover { color: var(--orange); } /* --- автономная панель интерфейса вне браузерного фрейма ------------------ */ .dj-frag { container-type: inline-size; } .dj-frag .mk-panel { padding: 2.4cqw 2.8cqw; border-radius: 3px; } .dj-frag .mk-panel + .mk-panel { margin-top: 2cqw; } .dj-frag .mk-panel__h { font-size: 2.4cqw; margin-bottom: 2.2cqw; } .dj-frag .mk-panel__h span:last-child { font-size: 2.2cqw; } .dj-frag .mk-row { gap: 2cqw; padding: 1.5cqw 0; } .dj-frag .mk-row__t { font-size: 2.4cqw; } .dj-frag .mk-row__m { font-size: 2.1cqw; } .dj-frag .mk-state { font-size: 2cqw; padding: .5cqw 1.3cqw; border-radius: .8cqw; } .dj-frag .mk-av { width: 4.2cqw; height: 4.2cqw; font-size: 1.9cqw; } .dj-frag .mk-tl { gap: 1.4cqw; } .dj-frag .mk-tl__row { gap: 1.6cqw; } .dj-frag .mk-tl__n { font-size: 2.1cqw; width: 9.5cqw; } .dj-frag .mk-tl__bar { height: 2.4cqw; border-radius: .9cqw; } .dj-frag .mk-tl__fill { border-radius: .9cqw; } /* =========================================================================== 8. ФОРМА СВЯЗИ — общая структура (.dj-form*), визуал задаётся в каждом варианте ========================================================================= */ .dj-form { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); } .dj-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.2vw, 1.75rem); } @media (max-width: 640px) { .dj-form__row { grid-template-columns: 1fr; } } .dj-field { position: relative; display: block; } .dj-field__lbl { display: block; font-family: var(--head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; transition: color .25s var(--ease); } .dj-field.is-error .dj-field__lbl { color: #D93025; } .dj-field input, .dj-field textarea, .dj-field select { width: 100%; font-family: var(--body); font-size: 1.02rem; color: var(--navy); transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .dj-field input::placeholder, .dj-field textarea::placeholder { color: #A6ADBB; } .dj-field textarea { resize: vertical; min-height: 92px; } .dj-field__err { display: block; min-height: 1.15em; margin-top: .4rem; font-size: .8rem; color: #D93025; } .dj-choice { display: flex; flex-wrap: wrap; gap: .5rem; } .dj-choice button { font-family: var(--head); font-weight: 600; font-size: .85rem; padding: .55rem .95rem; border: 1px solid var(--line-strong); color: var(--muted); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .dj-choice button:hover { color: var(--navy); border-color: var(--navy); } .dj-choice button.is-on { background: var(--navy); border-color: var(--navy); color: #fff; } .dj-consent { display: flex; gap: .8rem; align-items: flex-start; font-size: .85rem; color: var(--muted); line-height: 1.5; cursor: pointer; } .dj-consent input { position: absolute; opacity: 0; width: 0; height: 0; } .dj-consent__box { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--line-strong); display: grid; place-items: center; margin-top: .1rem; transition: background .25s var(--ease), border-color .25s var(--ease); } .dj-consent__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .25s var(--ease-out); } .dj-consent input:checked + .dj-consent__box { background: var(--orange); border-color: var(--orange); } .dj-consent input:checked + .dj-consent__box svg { opacity: 1; transform: none; } .dj-consent input:focus-visible + .dj-consent__box { outline: 2px solid var(--orange); outline-offset: 2px; } .dj-field.is-error .dj-consent__box { border-color: #D93025; } .dj-consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } .dj-form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .dj-form__status { font-size: .88rem; color: var(--muted); } .dj-form__status.is-ok { color: #1B8F62; font-weight: 600; } .dj-form.is-sent .dj-form__row, .dj-form.is-sent .dj-field, .dj-form.is-sent .dj-choice { opacity: .45; pointer-events: none; } .dj-form.is-sent .dj-form__actions button { opacity: .45; pointer-events: none; } /* --- автономная панель интерфейса вне браузерного фрейма ------------------ */ .dj-frag { container-type: inline-size; } .dj-frag .mk-panel { padding: 2.4cqw 2.8cqw; border-radius: 3px; } .dj-frag .mk-panel + .mk-panel { margin-top: 2cqw; } .dj-frag .mk-panel__h { font-size: 2.4cqw; margin-bottom: 2.2cqw; } .dj-frag .mk-panel__h span:last-child { font-size: 2.2cqw; } .dj-frag .mk-row { gap: 2cqw; padding: 1.5cqw 0; } .dj-frag .mk-row__t { font-size: 2.4cqw; } .dj-frag .mk-row__m { font-size: 2.1cqw; } .dj-frag .mk-state { font-size: 2cqw; padding: .5cqw 1.3cqw; border-radius: .8cqw; } .dj-frag .mk-av { width: 4.2cqw; height: 4.2cqw; font-size: 1.9cqw; } .dj-frag .mk-tl { gap: 1.4cqw; } .dj-frag .mk-tl__row { gap: 1.6cqw; } .dj-frag .mk-tl__n { font-size: 2.1cqw; width: 9.5cqw; } .dj-frag .mk-tl__bar { height: 2.4cqw; border-radius: .9cqw; } .dj-frag .mk-tl__fill { border-radius: .9cqw; } /* мини-визуалы услуг */ .dj-vis { height: 92px; background: var(--soft); position: relative; overflow: hidden; border-radius: 3px; } .dj-vis--bars { display: flex; align-items: flex-end; gap: 6px; padding: 12px; } .dj-vis--bars i { flex: 1; background: #DDE3ED; display: block; } .dj-vis--bars i:nth-child(1) { height: 34%; } .dj-vis--bars i:nth-child(2) { height: 55%; } .dj-vis--bars i:nth-child(3) { height: 76%; background: var(--orange); } .dj-vis--bars i:nth-child(4) { height: 46%; } .dj-vis--bars i:nth-child(5) { height: 64%; } .dj-vis--bars i:nth-child(6) { height: 88%; } .dj-vis--stack { padding: 14px; display: flex; flex-direction: column; gap: 6px; } .dj-vis--stack i { height: 9px; background: #DDE3ED; display: block; } .dj-vis--stack i:nth-child(1) { width: 78%; } .dj-vis--stack i:nth-child(2) { width: 54%; background: var(--orange); } .dj-vis--stack i:nth-child(3) { width: 88%; } .dj-vis--stack i:nth-child(4) { width: 40%; } .dj-vis--screens { display: flex; align-items: center; justify-content: center; gap: 8px; } .dj-vis--screens i { display: block; border: 1.5px solid #D5DBE6; } .dj-vis--screens i:nth-child(1) { width: 22px; height: 40px; } .dj-vis--screens i:nth-child(2) { width: 58px; height: 52px; border-color: var(--orange); } .dj-vis--screens i:nth-child(3) { width: 30px; height: 34px; } .dj-vis--flow { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .dj-vis--flow::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 1.5px; background: #E1E6EF; } .dj-vis--flow i { width: 26px; height: 26px; border: 1.5px solid #D5DBE6; display: block; position: relative; z-index: 1; background-color: var(--soft); } .dj-vis--flow i.o { border-color: var(--orange); background-color: rgba(255,90,44,.1); } .dj-vis--dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; padding: 16px; place-items: center; } .dj-vis--dots i { width: 7px; height: 7px; background: #DDE3ED; display: block; } .dj-vis--dots i:nth-child(3n) { background: #C9D1DE; } .dj-vis--dots i:nth-child(7), .dj-vis--dots i:nth-child(12), .dj-vis--dots i:nth-child(19) { background: var(--orange); } .dj-vis--steps { display: flex; align-items: center; gap: 6px; padding: 0 14px; } .dj-vis--steps i { flex: 1; height: 4px; background: #DDE3ED; display: block; position: relative; } .dj-vis--steps i.o { background: var(--orange); } .dj-vis--steps i::after { content: ""; position: absolute; left: 0; top: -6px; width: 8px; height: 8px; border-radius: 50%; background: inherit; } /* =========================================================================== 9. VARIANT E · LIGHT TECHNOLOGY Инженерная система при дневном свете: холодный серый как среда, белые ПЛОСКИЕ панели с хайрлайнами, технические направляющие, моно-лейблы. ========================================================================= */ .dj-page { background: var(--bg); color: var(--navy); position: relative; } .dj-page section { position: relative; } .dj-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; } /* --- header --- */ /* sticky живёт на обёртке template-part: внутри неё
ограничен собственной высотой и «прилипать» не может */ .dj-head-wrap { position: sticky; top: 0; z-index: 60; } /* WordPress adds a 24px block gap between top-level template parts. The header and main are one continuous shell, so that generated gap must not become a visible strip. */ .wp-site-blocks > .dj-head-wrap + main { margin-block-start: 0; } .wp-site-blocks > main + .wp-block-template-part { margin-block-start: 0; } /* The home page starts with inert