/* ========================================================================== main.css — deferred stylesheet (loaded non-render-blocking). Icons (Font Awesome 7 subset), footer, cookie banner and all shared components. url() paths are relative to /assets/css/. ========================================================================== */ /* --- Font Awesome 7 Free (subset: solid + brands) ------------------------- */ @font-face { font-family: 'fa-solid'; src: url('../icons/fa-solid-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: block; } @font-face { font-family: 'fa-brands'; src: url('../icons/fa-brands-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } .fa-solid, .fa-brands { display: inline-block; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; } .fa-solid { font-family: 'fa-solid'; font-weight: 900; } .fa-brands { font-family: 'fa-brands'; font-weight: 400; } .fa-magnifying-glass::before { content: "\f002"; } .fa-envelope::before { content: "\f0e0"; } .fa-phone::before { content: "\f095"; } .fa-calendar-check::before { content: "\f274"; } .fa-building::before { content: "\f1ad"; } .fa-circle-play::before { content: "\f144"; } .fa-link::before { content: "\f0c1"; } .fa-arrow-right::before { content: "\f061"; } .fa-arrow-left::before { content: "\f060"; } .fa-layer-group::before { content: "\f5fd"; } .fa-table-cells::before { content: "\f00a"; } .fa-users::before { content: "\f0c0"; } .fa-cloud::before { content: "\f0c2"; } .fa-address-book::before { content: "\f2b9"; } .fa-arrows-rotate::before { content: "\f021"; } .fa-store::before { content: "\f54e"; } .fa-comments::before { content: "\f086"; } .fa-key::before { content: "\f084"; } .fa-headset::before { content: "\f590"; } .fa-gear::before { content: "\f013"; } .fa-check::before { content: "\f00c"; } .fa-linkedin-in::before { content: "\f0e1"; } .fa-facebook-f::before { content: "\f39e"; } .fa-youtube::before { content: "\f167"; } /* --- Active nav item (driven by page-* class) ---------------------- */ .page-services .nav__links [data-nav="services"], .page-bitrix24 .nav__links [data-nav="bitrix24"], .page-cases .nav__links [data-nav="cases"], .page-blog .nav__links [data-nav="blog"], .page-about .nav__links [data-nav="about"], .page-contacts .nav__links [data-nav="contacts"] { color: var(--c-brand); font-weight: 600; } /* --- Utilities ------------------------------------------------------------ */ /* Desktop-only media: the wrapper is hidden on mobile AND its s use media="(min-width:641px)", so the file is never fetched on phones. */ .dmedia { display: none; } .split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); } .split--center { align-items: center; } .stack-lg > * + * { margin-top: 1rem; } .mw-520 { max-width: 520px; margin-inline: auto; } .mw-820 { max-width: 820px; margin-inline: auto; } .mw-960 { max-width: 960px; margin-inline: auto; } .mw-1100 { max-width: 1100px; margin-inline: auto; } .mw-1180 { max-width: 1180px; margin-inline: auto; } .text-center { text-align: center; } .mt-gap { margin-top: 1.5rem; } .flow > * + * { margin-top: 0.875rem; } @media (min-width: 641px) { .dmedia { display: block; } .split--2 { grid-template-columns: 1fr 1fr; } .split--sidebar { grid-template-columns: 240px 1fr; align-items: start; } .split--media { grid-template-columns: 1.3fr 1fr; } .split--form { grid-template-columns: 0.9fr 1.1fr; } } /* --- Section heading cluster --------------------------------------------- */ .eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-brand); } .eyebrow--muted { color: var(--c-muted-2); } .sect-head { text-align: center; margin-bottom: 1.5rem; } .sect-head__title { font-family: var(--f-head); letter-spacing: -0.02em; font-size: clamp(1.5rem, 4vw, 2.375rem); font-weight: 700; color: var(--c-ink); margin-top: 0.75rem; } .sect-head__lead { font-size: 1rem; line-height: 1.6; color: var(--c-muted); max-width: 62ch; margin: 1rem auto 0; } .section-title { font-family: var(--f-head); letter-spacing: -0.02em; font-size: clamp(1.375rem, 3.5vw, 1.875rem); font-weight: 700; color: var(--c-ink); } .mw-760l { max-width: 760px; } /* max-width, left-aligned (no auto-centering) */ /* Article/Case header cluster (shared — used by both article.html & case.html) */ .case-head__tags { display: flex; gap: 0.625rem; margin-top: 1.5rem; } .case-head__title { font-family: var(--f-head); letter-spacing: -0.02em; font-size: clamp(1.875rem, 5vw, 2.75rem); line-height: 1.12; font-weight: 700; color: var(--c-ink-strong); margin-top: 1.5rem; } /* Badge/eyebrow after a breadcrumb sits equidistant from breadcrumb and title. */ .tag + .hero__title, .eyebrow + .hero__title { margin-top: 1.5rem; } .case-head__lead { font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); line-height: 1.6; color: var(--c-muted); margin-top: 1.125rem; } /* --- Grids ---------------------------------------------------------------- */ .grid { display: grid; gap: 1.5rem; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } /* --- Divider -------------------------------------------------------------- */ .divider { display: flex; justify-content: center; padding: 1.125rem 0; } .divider span { width: 144px; height: 28px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, oklch(0.9 0.06 255) 18%, oklch(0.68 0.17 255) 50%, oklch(0.9 0.06 255) 82%, transparent 100%); } /* --- Page hero (text only, e.g. About/Services/Blog/Contacts) ------------- */ /* Mobile: match the original's tighter hero (≈32px top, smaller bottom). */ @media (max-width: 640px) { .page-hero { padding-top: 2rem; padding-bottom: 1.5rem; } } .page-hero .eyebrow { display: block; margin-top: 1.5rem; } .page-hero > .tag { margin-top: 1.5rem; } .page-hero__lead { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.6; color: var(--c-muted); margin-top: 1.25rem; max-width: 60ch; } .page-hero--center { text-align: center; } .page-hero--center .page-hero__lead, .page-hero--center .hero__title { margin-inline: auto; } /* --- Partner band (brand-coloured feature block) -------------------------- */ /* Partner band (About): logo sits between the text and the link on mobile; on desktop it moves to a centered right-hand column. */ .partner-band { background: var(--c-brand); border-radius: 20px; padding: clamp(2rem, 4vw, 3.5rem); display: grid; gap: 1.5rem; } .partner-band__eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.9 0.03 255); } .partner-band__title { font-family: var(--f-head); font-size: clamp(1.5rem, 3.5vw, 1.875rem); font-weight: 700; color: #fff; margin-top: 0.75rem; } .partner-band__text { font-size: 0.97rem; line-height: 1.7; color: oklch(0.95 0.02 255); margin-top: 1rem; } .partner-band__link { display: inline-block; font-size: 0.875rem; font-weight: 600; color: #fff; text-decoration: underline; } .partner-band__media { display: flex; justify-content: center; align-items: center; } @media (min-width: 641px) { .partner-band { grid-template-columns: 1.3fr 1fr; grid-template-areas: "intro media" "foot media"; align-items: center; column-gap: clamp(2rem, 4vw, 3rem); } .partner-band__intro { grid-area: intro; } .partner-band__foot { grid-area: foot; } .partner-band__media { grid-area: media; } } /* --- Media hero content (over image; used on Home & Bitrix24) -------------- */ .hero-media__badge { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: oklch(0.4 0.16 45); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.5rem 1rem; border-radius: 100px; text-transform: uppercase; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); } .hero-media__title { font-family: var(--f-head); letter-spacing: -0.02em; font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.05; font-weight: 700; color: #fff; margin-top: 1.1rem; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero-media__lead { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.6; color: #fff; margin-top: 0.9rem; max-width: 44ch; text-shadow: 0 2px 16px rgba(0,0,0,.35); } .hero-media__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; } @media (min-width: 641px) { .hero-media__actions { flex-direction: row; } } /* --- Trust stats ---------------------------------------------------------- */ .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 2rem var(--pad); background: var(--c-brown); } .stats__item { text-align: center; } .stats__num { font-family: var(--f-head); letter-spacing: -0.02em; font-size: 1.75rem; font-weight: 700; color: #fff; } .stats__label { font-size: 0.75rem; color: var(--c-brown-text); margin-top: 0.25rem; } /* --- Feature cards (What we do) ------------------------------------------- */ .cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } .card { border: 1px solid var(--c-line); border-top: 4px solid var(--c-brand); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; background: #fff; } .card__num { font-family: var(--f-head); font-size: 0.8125rem; font-weight: 700; color: var(--c-brand); letter-spacing: 0.04em; } .card__title { font-family: var(--f-head); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); margin-top: 0.75rem; } .card__text { font-size: 0.875rem; line-height: 1.55; color: var(--c-muted-2); margin-top: 0.5rem; } .card__link { display: inline-block; font-size: 0.8125rem; font-weight: 600; color: var(--c-brand-ink); margin-top: 1rem; } .card--flat { border-top: 1px solid var(--c-line); display: flex; flex-direction: column; padding: 2rem 1.75rem; } .card--flat .card__text { flex: 1; } .card__icon { font-size: 1.875rem; color: var(--c-brand-ink); } /* Icon sits inline with the title. */ .card__head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.75rem; } .card__head .card__title { margin-top: 0; } .section--soft { background: var(--c-bg-soft); } /* "Continuation" sections tuck tight against the previous block so junctions don't double up on padding. flush-t applies at all widths (e.g. filters under a hero); flush-b and the -m variants are mobile-only. */ .section.section--flush-t { padding-top: 0.5rem; } /* A hero immediately followed by a flush-t list (Blog/Cases/Contacts): trim its bottom so the two don't stack padding on wider screens. */ .page-hero:has(+ .section--flush-t) { padding-bottom: 1.5rem; } @media (max-width: 640px) { .section.section--flush-b { padding-bottom: 0.5rem; } .section.section--flush-t-m { padding-top: 0.5rem; } } /* --- Process timeline ----------------------------------------------------- */ .process__steps { display: flex; flex-direction: column; gap: 1.375rem; list-style: none; margin: 0; padding: 0; } .process__step { display: flex; gap: 1rem; align-items: flex-start; } .process__dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c-brand); margin-top: 5px; } .process__label { font-family: var(--f-head); font-size: 0.75rem; font-weight: 700; color: var(--c-brand); letter-spacing: 0.05em; } .process__name { font-size: 0.9375rem; font-weight: 600; color: var(--c-ink); margin-top: 0.375rem; } .process__text { font-size: 0.8125rem; color: var(--c-muted); margin-top: 0.25rem; line-height: 1.5; } /* --- Post / case cards ---------------------------------------------------- */ .post-card { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s; } a.post-card:hover { border-color: var(--c-brand); color: inherit; } .post-card__media { width: 100%; aspect-ratio: 15 / 8; object-fit: cover; display: block; } .post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; } .post-card__cat { font-size: 0.75rem; font-weight: 600; color: oklch(0.5 0.15 255); text-transform: uppercase; letter-spacing: 0.04em; } .post-card__title { font-family: var(--f-head); font-size: 1.1875rem; font-weight: 600; color: var(--c-ink); margin-top: 0.625rem; line-height: 1.3; } .post-card__excerpt { font-size: 0.875rem; color: var(--c-muted); margin-top: 0.625rem; line-height: 1.5; flex: 1; } .post-card__meta { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.125rem; font-size: 0.8125rem; color: var(--c-faint); } .post-card__meta .dot { color: oklch(0.8 0.01 255); } /* Teaser variant used on Homepage/Service (top-border, image optional) */ .teaser { border-top: 2px solid var(--c-brand); padding-top: 1.125rem; } .teaser__media { width: 100%; aspect-ratio: 15 / 8; border-radius: var(--radius); object-fit: cover; display: block; margin-bottom: 1rem; } .teaser__cat { font-size: 0.75rem; font-weight: 600; color: oklch(0.5 0.15 255); text-transform: uppercase; letter-spacing: 0.04em; } .teaser__title { font-family: var(--f-head); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); margin-top: 0.625rem; line-height: 1.35; } .teaser__text { font-size: 0.875rem; color: var(--c-muted); margin-top: 0.625rem; line-height: 1.5; } .teaser__meta { font-size: 0.8125rem; color: var(--c-faint); margin-top: 0.875rem; } /* Case card (no media): industry pill + category + client + result */ .case-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; } .case-card__pill { align-self: flex-start; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.4 0.02 255); background: var(--c-bg-soft); border-radius: 100px; padding: 0.3rem 0.75rem; } .case-card__cat { font-size: 0.75rem; font-weight: 600; color: oklch(0.5 0.15 255); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1rem; } .case-card__title { font-family: var(--f-head); font-size: 1.1875rem; font-weight: 600; color: var(--c-ink); margin-top: 0.625rem; line-height: 1.3; } .case-card__summary { font-size: 0.875rem; color: var(--c-muted); margin-top: 0.5rem; line-height: 1.5; flex: 1; } .case-card__result { font-family: var(--f-head); font-size: 1.375rem; font-weight: 700; color: var(--c-brand-ink); margin-top: 1rem; } .list-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; gap: 1rem; } .list-head__link { font-size: 0.875rem; font-weight: 600; color: var(--c-brand); white-space: nowrap; } /* --- Service list rows ---------------------------------------------------- */ .svc-list { display: flex; flex-direction: column; } .svc-row { display: grid; gap: 1.25rem 2rem; padding: 2rem 0; border-top: 1px solid var(--c-line); } .svc-row:last-child { border-bottom: 1px solid var(--c-line); } .svc-row__media { width: 100%; } /* full-width on mobile */ .svc-row__media img, .svc-row__media .ph { width: 100%; border-radius: 14px; } .svc-row__num { font-family: var(--f-head); font-size: 0.8125rem; font-weight: 700; color: var(--c-brand); } .svc-row__title { font-family: var(--f-head); font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 700; color: var(--c-ink); margin-top: 0.625rem; } .svc-row__text { font-size: 0.9375rem; line-height: 1.6; color: var(--c-muted-2); max-width: 60ch; margin-top: 0.75rem; } .svc-row__tags { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 1.125rem; } .svc-row__cta { display: flex; } .svc-row__cta .btn { width: 100%; } /* full-width on mobile */ @media (min-width: 641px) { .svc-row { grid-template-columns: 200px 1fr 240px; align-items: center; } .svc-row__media { width: auto; max-width: none; } /* fill the 200px column */ .svc-row__cta { justify-content: flex-end; } .svc-row__cta .btn { width: auto; } } /* --- CTA ------------------------------------------------------------------ */ .cta { text-align: center; padding: clamp(3.5rem, 6vw, 4.5rem) var(--pad); } /* 56px mobile → 72px desktop */ .cta--brand { background: var(--c-brand); } .cta--dark { background: var(--c-dark); } .cta__title { font-family: var(--f-head); letter-spacing: -0.02em; font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 700; color: #fff; } .cta__text { font-size: 1rem; margin: 0.875rem 0 1.75rem; color: oklch(0.94 0.02 255); } .cta--dark .cta__text { color: oklch(0.75 0.01 255); } .cta__actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; } /* --- Forms ---------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 0.875rem; } .form-card { background: #fff; border-radius: var(--radius-lg); padding: 2rem; } .form-card--soft { background: var(--c-bg-soft); } /* Contacts: don't stretch the form to the taller info column — keep its bottom padding equal to the top (only the taller sibling would stretch it). */ .page-contacts .form-card { align-self: start; } .field { font-family: var(--f-sans); font-size: 0.875rem; padding: 0.85rem 1rem; border: 1px solid var(--c-line-2); border-radius: 8px; background: #fff; color: var(--c-ink); width: 100%; } .field:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; border-color: var(--c-brand); } textarea.field { resize: vertical; min-height: 120px; } select.field { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* --- Privacy consent checkbox --------------------------------------------- */ .form__consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--c-muted); cursor: pointer; } .form__consent input { flex: none; width: 1rem; height: 1rem; margin-top: 0.12rem; accent-color: var(--c-brand); cursor: pointer; } .form__consent a { color: var(--c-brand); text-decoration: underline; } .subscribe__form .form__consent { color: #fff; justify-content: center; } .subscribe__form .form__consent a { color: #fff; } .subscribe__form .form__consent input { accent-color: #fff; } /* --- Contact info list ---------------------------------------------------- */ .contact-list { display: flex; flex-direction: column; gap: 1.375rem; } .contact-item { display: flex; gap: 1rem; } .contact-item__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); background: var(--c-bg-tint); display: flex; align-items: center; justify-content: center; color: var(--c-brand-ink); font-size: 1.1875rem; } .contact-item__label { font-size: 0.8125rem; color: var(--c-muted-2); } .contact-item__value { font-size: 0.97rem; font-weight: 600; color: var(--c-ink); line-height: 1.5; } .contact-follow { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--c-line-soft); } .contact-follow .contact-item__label { margin-bottom: 0.875rem; } .social-row { display: flex; gap: 0.625rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .social-btn { width: 40px; height: 40px; border-radius: var(--radius); background: var(--c-bg-tint); display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; color: var(--c-brand-ink); } /* --- Subscribe ------------------------------------------------------------ */ .subscribe { padding: clamp(3rem, 6vw, 4rem) var(--pad); background: var(--c-brand); } /* 48px mobile → 64px desktop */ .subscribe__inner { max-width: 640px; margin: 0 auto; text-align: center; } .subscribe__form { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; } /* --- Chips / tags / pills ------------------------------------------------- */ .chip { font-size: 0.8125rem; font-weight: 600; padding: 0.55rem 1rem; border-radius: 100px; background: #fff; color: oklch(0.4 0.02 255); border: 1px solid var(--c-line-2); cursor: pointer; } .chip--on { background: var(--c-brand); color: #fff; border-color: var(--c-brand); } .chip[hidden] { display: none; } .tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 1rem; border-radius: 100px; } .tag--brand { background: var(--c-bg-tint); color: oklch(0.4 0.16 255); } .tag--plain { background: var(--c-bg-soft); color: var(--c-muted); } .pill { font-size: 0.78rem; color: oklch(0.4 0.02 255); background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.375rem 0.875rem; } /* --- Feature list (icon + text) ------------------------------------------- */ .feature { display: flex; gap: 1rem; } .feature__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--c-brand-ink); font-size: 1.375rem; } .feature__title { font-family: var(--f-head); font-size: 1rem; font-weight: 600; color: var(--c-ink); } .feature__text { font-size: 0.875rem; line-height: 1.6; color: var(--c-muted); margin-top: 0.375rem; } .check-item { display: flex; gap: 0.875rem; align-items: flex-start; } .check-item__mark { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--c-brand-ink); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } /* --- Metrics (case results) ---------------------------------------------- */ .metric { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 1.375rem; } .metric__num { font-family: var(--f-head); font-size: 1.875rem; font-weight: 700; color: var(--c-brand); white-space: nowrap; } .metric__text { font-size: 0.85rem; color: var(--c-muted); line-height: 1.5; } .metric { display: flex; flex-direction: column; } .metric .card__title { font-family: var(--f-head); font-size: 1rem; margin-top: 0.75rem; } .metric .card__text { flex: 1; } .metric__row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-line-soft); } .metric__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted-2); } /* Brand contact / who-we-are block (Bitrix24 & Service) */ .whowe { background: var(--c-brand); } .whowe__eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; } .whowe__title { font-family: var(--f-head); font-size: clamp(1.5rem, 3.5vw, 1.875rem); font-weight: 700; color: #fff; margin-top: 0.75rem; } .whowe__text { font-size: 1rem; line-height: 1.7; color: oklch(0.96 0.02 255); margin-top: 1rem; } .whowe__more .whowe__title { margin-top: 0; } .whowe__checks { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1rem; } .whowe .check-item div:last-child { font-size: 0.9rem; line-height: 1.6; color: #fff; } .whowe__media { display: flex; justify-content: center; align-items: center; } /* Same intro / logo / more layout as the partner band: logo between the two text blocks on mobile, centered right column on desktop. */ .whowe-grid { display: grid; gap: 1.5rem; } @media (min-width: 641px) { .whowe-grid { grid-template-columns: 1.3fr 1fr; grid-template-areas: "intro media" "more media"; align-items: center; column-gap: clamp(2rem, 4vw, 3.5rem); } .whowe__intro { grid-area: intro; } .whowe__more { grid-area: more; } .whowe__media { grid-area: media; } } /* Partner badge centered (and smaller) on mobile — Bitrix24 & About blocks. */ @media (max-width: 640px) { .whowe__media img, .partner-band__media img { width: 180px; height: auto; } } .whowe__link { color: #fff; font-weight: 600; text-decoration: underline; } .whowe__link:hover { color: #fff; } /* --- Video embed ---------------------------------------------------------- */ .video { max-width: 560px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line-2); background: var(--c-dark); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); } .video__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } .video__dot { width: 11px; height: 11px; border-radius: 50%; } .video__dot--r { background: oklch(0.62 0.19 25); } .video__dot--y { background: oklch(0.78 0.15 85); } .video__dot--g { background: oklch(0.72 0.17 145); } .video__label { flex: 1; text-align: right; font-size: 0.75rem; font-weight: 600; color: oklch(0.7 0.02 255); letter-spacing: 0.03em; } .video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* --- Pricing -------------------------------------------------------------- */ .pricing { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .plan { border: 1px solid oklch(0.9 0.02 235); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .plan--featured { border: 2px solid var(--c-brand); box-shadow: 0 18px 40px -20px oklch(0.5 0.15 250 / 0.5); } .plan__head { padding: 1.625rem 1.5rem; text-align: center; background: oklch(0.97 0.02 235); } .plan--featured .plan__head { background: var(--c-brand); } .plan__tier { font-size: 0.75rem; font-weight: 600; color: var(--c-muted-2); text-transform: uppercase; letter-spacing: 0.05em; } .plan--featured .plan__tier { color: oklch(0.88 0.05 255); } .plan__name { font-family: var(--f-head); font-size: 1.625rem; font-weight: 700; color: var(--c-ink); margin-top: 0.375rem; } .plan--featured .plan__name { color: #fff; } /* Mobile: options flow as a wrapped row; desktop: one per line. */ .plan__features { padding: 1.375rem 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.84rem; color: oklch(0.4 0.02 255); flex: 1; } @media (min-width: 641px) { .plan__features { flex-direction: column; gap: 0.5625rem; } } .plan__cta { padding: 0 1.5rem 1.5rem; } .plan__cta .btn { width: 100%; } /* full card width */ /* --- Prose (article / case body) ----------------------------------------- */ .prose { min-width: 0; } .prose h2 { font-family: var(--f-head); font-size: clamp(1.375rem, 3.5vw, 1.75rem); font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; margin: 2.75rem 0 0; scroll-margin-top: 96px; } .prose h3 { font-family: var(--f-head); font-size: 1.25rem; font-weight: 600; color: var(--c-ink); margin: 2rem 0 0; scroll-margin-top: 96px; } .prose p { font-size: 1.0625rem; line-height: 1.75; color: var(--c-body); margin: 1.125rem 0 0; } .prose ul { margin: 1.125rem 0 0; padding-left: 1.375rem; } .prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--c-body); margin: 0.5rem 0; } .prose a.link { color: var(--c-brand-ink); text-decoration: underline; } .prose figure { margin: 1.75rem 0 0; } .prose figcaption { font-size: 0.8125rem; color: var(--c-faint); margin-top: 0.625rem; text-align: center; } .prose blockquote { margin: 1.75rem 0 0; padding: 1.25rem 1.625rem; border-left: 4px solid var(--c-brand); background: var(--c-bg-soft); border-radius: 0 10px 10px 0; font-size: 1.125rem; line-height: 1.6; color: oklch(0.28 0.02 255); font-style: italic; } .prose pre { margin: 1.375rem 0 0; padding: 1.25rem 1.375rem; background: oklch(0.16 0.015 255); border-radius: 12px; overflow-x: auto; } .prose pre code { font-family: var(--f-mono); font-size: 0.84rem; line-height: 1.6; color: oklch(0.9 0.02 255); } .prose .data-table { margin: 1.5rem 0 0; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .prose thead tr { background: var(--c-bg-soft); } .prose th { text-align: left; padding: 0.875rem 1.125rem; font-weight: 600; color: var(--c-ink); border-bottom: 1px solid var(--c-line); } .prose td { padding: 0.8rem 1.125rem; color: oklch(0.35 0.02 255); border-bottom: 1px solid oklch(0.94 0.005 255); } .prose tr:last-child td { border-bottom: 0; } .pull-quote { margin: 2.25rem 0 0; padding: 2rem 2.25rem; border-radius: var(--radius-lg); background: oklch(0.96 0.03 255); border: 1px solid oklch(0.9 0.03 255); } .pull-quote blockquote { font-family: var(--f-head); margin: 0; font-size: 1.375rem; line-height: 1.5; font-weight: 500; color: oklch(0.24 0.04 255); font-style: normal; padding: 0; border: 0; background: none; } .pull-quote figcaption { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.5rem; text-align: left; } .avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--c-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-weight: 700; } /* --- Table of contents (article) ------------------------------------------ */ .toc { } .toc__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted-2); margin-bottom: 0.75rem; } .toc a { display: block; padding: 0.375rem 0 0.375rem 0.875rem; border-left: 2px solid var(--c-line); color: var(--c-muted); font-size: 0.875rem; line-height: 1.5; } .toc a:hover, .toc a.is-active { color: var(--c-brand-ink); border-left-color: var(--c-brand); } /* --- Share buttons -------------------------------------------------------- */ .share { display: flex; align-items: center; gap: 0.5rem; } .share__btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--c-line-2); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: oklch(0.4 0.02 255); } /* --- Placeholder tiles (design mockups that have no real asset yet) -------- */ .ph { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 14px; padding: 0.5rem; color: oklch(0.5 0.02 255); font: 0.6875rem var(--f-mono); aspect-ratio: 1; background: repeating-linear-gradient(135deg, oklch(0.93 0.01 255) 0 10px, oklch(0.97 0.005 255) 10px 20px); } .ph--tint { color: oklch(0.45 0.1 255); background: repeating-linear-gradient(135deg, oklch(0.94 0.05 255) 0 10px, oklch(0.97 0.02 255) 10px 20px); } .ph--43 { aspect-ratio: 4 / 3; } .team-member { text-align: center; margin: 0; } .team-member__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; border: 1px solid oklch(0.9 0.01 255); } .team-member__name { font-family: var(--f-head); font-size: 1rem; font-weight: 600; color: var(--c-ink); margin-top: 0.875rem; } .team-member__role { font-size: 0.8125rem; color: var(--c-muted-2); margin-top: 0.125rem; } /* --- Filters + search + pagination (Blog / Cases) ------------------------- */ .filters { display: flex; gap: 0.625rem; flex-wrap: wrap; } .filters--center { justify-content: center; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .search { position: relative; display: flex; align-items: center; } .search__icon { position: absolute; left: 0.875rem; color: var(--c-faint); font-size: 0.9375rem; pointer-events: none; } .search__input { padding: 0.7rem 1rem 0.7rem 2.5rem; border-radius: var(--radius); border: 1px solid var(--c-line-2); font-size: 0.875rem; width: 100%; max-width: 260px; font-family: var(--f-sans); } .search__input:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; } .result-count { font-size: 0.8125rem; color: var(--c-muted-2); margin-bottom: 1.25rem; } /* --- Search bar (search hero + 404) --------------------------------------- */ .search-bar { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; } .search-bar__field { position: relative; display: flex; align-items: center; flex: 1; } .search-bar__icon { position: absolute; left: 1rem; color: var(--c-faint); font-size: 0.9375rem; pointer-events: none; } .search-bar__input { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; border-radius: 12px; border: 1px solid var(--c-line-2); font-size: 1rem; font-family: var(--f-sans); color: var(--c-ink); background: #fff; } .search-bar__input:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; border-color: var(--c-brand); } .search-bar .btn { width: 100%; } @media (min-width: 641px) { .search-bar { flex-direction: row; } .search-bar .btn { width: auto; } } .pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 3rem; } .pagination:empty { display: none; } .page-btn { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-family: var(--f-sans); font-size: 0.875rem; font-weight: 600; cursor: pointer; background: #fff; color: oklch(0.35 0.02 255); border: 1px solid var(--c-line-2); } .page-btn--on { background: var(--c-brand); color: #fff; border-color: var(--c-brand); } .page-btn--arrow { font-size: 1rem; } .page-btn:disabled { color: oklch(0.82 0.01 255); cursor: default; } /* --- Footer --------------------------------------------------------------- */ .site-footer { padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad) 2rem; background: var(--c-dark); color: oklch(0.7 0.01 255); } .site-footer a:hover { color: #fff; } .site-footer__grid { display: flex; flex-direction: column; gap: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,.1); } .site-footer__brand-logo { height: 28px; width: auto; display: block; } .site-footer__brand-text { font-size: 0.8125rem; margin-top: 0.75rem; line-height: 1.6; max-width: 34ch; } .site-footer__col-title { font-size: 0.75rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.875rem; } .site-footer__links { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.8125rem; } /* Mobile: two columns — Services | Company / Legal | We are */ .site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; } .site-footer__bottom { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; font-size: 0.75rem; } .site-footer__social { display: flex; gap: 1rem; } .site-footer__bottom .site-footer__social { display: none; } /* social lives in the "We are" column on mobile */ /* --- Cookie banner -------------------------------------------------------- */ .cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -8px 30px -12px rgba(0,0,0,.15); padding: 1.125rem var(--pad); display: flex; flex-direction: column; gap: 0.875rem; } .cookie[hidden] { display: none; } .cookie__text { font-size: 0.8125rem; line-height: 1.6; color: oklch(0.35 0.02 255); } .cookie__actions { display: flex; gap: 0.625rem; } .cookie__actions .btn { flex: 1; } /* ========================================================================== Desktop (>= 641px) ========================================================================== */ @media (min-width: 641px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .stats { display: flex; justify-content: center; } .stats__item { padding: 0 3rem; border-right: 1px solid rgba(255,255,255,.15); } .stats__item:last-child { border-right: 0; } .stats__num { font-size: 2.125rem; } .stats__label { font-size: 0.8125rem; } .cards { grid-template-columns: repeat(4, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } .process__steps { display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 1rem; position: relative; padding-top: 0.875rem; } .process__steps--5 { --steps: 5; } .process__steps--4 { --steps: 4; } .process__steps::before { content: ""; position: absolute; top: 20px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, oklch(0.6 0.05 255) 0 8px, transparent 8px 16px); } .process__step { flex-direction: column; text-align: center; align-items: center; position: relative; z-index: 1; } .process__dot { margin: 0 auto; } .process__label { margin-top: 1.75rem; } .cta__actions { flex-direction: row; justify-content: center; } .subscribe__form { flex-direction: row; flex-wrap: wrap; justify-content: center; } .subscribe__form .field { max-width: 300px; } .subscribe__form .form__consent { flex-basis: 100%; } .pricing { grid-template-columns: repeat(4, 1fr); } .cookie { flex-direction: row; align-items: center; gap: 2rem; } .cookie__text { flex: 1; min-width: 280px; } .cookie__actions { flex-shrink: 0; } .cookie__actions .btn { flex: none; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem; padding-bottom: 2.25rem; } .site-footer__cols { display: contents; } .site-footer__col--weare { display: none; } /* social returns to the bottom bar */ .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } .site-footer__bottom .site-footer__social { display: flex; } }