` carries no box model of its own — every mockup's `

` is `display: flex; flex-direction: column` and nothing else (`Home2.dc.html`, `Privacy.dc.html`, `Compare.dc.html`, …: same three declarations on every one of them). Each `

` inside it owns its *own* full width, side padding and top spacing (and bottom, on the last section before the footer) — the layout spec §3 says so explicitly ("a section sets only its own top offset, so paddings never stack") and every page confirms it: legal pages pad `88px 60px 40px`, Compare `96px 60px 120px`, Integrations `72px 60px 56px`, About `88px 60px 96px`, Demo `88px 60px 80px`, the home hero `72px 60px 112px`, NotFound (a full-bleed amber band, like `../components/DemoBlock/DemoBlock.css`) `120px 60px`. A page's own `

` needs the same "full-bleed background, inner `max-width: 1320px` + side padding, `box-sizing: content-box`" shape `Header`/`Footer`/`DemoBlock` already use — copy that pattern, not `

`'s padding, which would double up with a section's own. */ main { display: flex; flex-direction: column; } @media (max-width: 767px) { h1 { font-size: 36px; } h2 { font-size: 28px; } } /* Form controls draw in the browser's own system font unless told otherwise: «Развернуть» on /business came out in Arial (owner's report, 09.11). Every button and field starts from the page's font; a component's own `font-family` still wins. */ button, input, textarea, select { font-family: inherit; } /* Everything a visitor can click shows a hand (the mockups' own `button{cursor:pointer}`, which the port lost). Links get it from the browser; buttons, tabs, selects and summaries do not. A draggable strip sets `grab` on its own container, which this does not touch. */ button:not(:disabled), select:not(:disabled), summary, [role="tab"], [role="button"] { cursor: pointer; } /* A tap on a control never selects its words and never flashes the browser's grey tap box (a quick second tap on a tab, a chip or the accordion used to select text on a phone); `manipulation` also drops the double-tap zoom that caused it. Controls only — buttons, tabs, the switch, navigation and the card-shaped links. A link inside a sentence keeps selection, so its text can still be copied. The pressed and focused looks stay each control's own. */ html { -webkit-tap-highlight-color: transparent; } button, summary, label, [role="tab"], [role="button"], nav a, .oj-header a, .oj-btn, .oj-different__card, .oj-works-with__all { -webkit-user-select: none; user-select: none; touch-action: manipulation; } /* A strip the mouse can drag and wheel (`client/dragScroll.ts` adds `is-draggable` only while it overflows, `is-dragging` while held: no snap then, it snaps on release). A sideways scroll that reaches the strip's end stops there instead of swiping the browser back a page. */ /* No scrollbar on a draggable strip (the mockups' own `.oj-noscroll`): it scrolls by swipe or drag, the bar is only noise. The roles, connectors and compare strips hide theirs in their own CSS. */ [data-drag-scroll] { scrollbar-width: none; overscroll-behavior-x: contain; } [data-drag-scroll]::-webkit-scrollbar { display: none; } [data-drag-scroll].is-draggable { cursor: grab; user-select: none; } [data-drag-scroll].is-dragging { scroll-snap-type: none; } [data-drag-scroll].is-dragging, [data-drag-scroll].is-dragging * { cursor: grabbing; } /* The page's side padding: 60 on desktop and at 1024 (tokens.css), 40 from 1023 down to 768 (layout spec §3) — the header, the footer and every section read this one variable, so their text lines up at every width. Below 768 each section sets its own mobile inset. */ @media (max-width: 1023px) { :root { --oj-page-pad-desktop: 40px; } } /* Page to page: a cross-document view transition (Chrome/Edge, Safari 18.2+; elsewhere a plain navigation). The header stays put (`oj-header`), the nav's current-page rhombus slides from the old item to the new one like a moving lens (`oj-nav-mark`, Header.css), the page under them cross-fades quickly. Off under reduced motion. */ @view-transition { navigation: auto; } ::view-transition-group(oj-nav-mark) { animation-duration: 360ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* A label that turns bold when its tab is picked, without moving its neighbours: an invisible, zero-height bold copy under the text holds the bold width from the start. The `/ ""` keeps screen readers from reading the name twice. */ .oj-bold-stable { display: inline-flex; flex-direction: column; } .oj-bold-stable::after { /* the first line for browsers without alt text on `content` */ content: attr(data-text); content: attr(data-text) / ""; font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; } /* Read by assistive tech, never seen: the logo link's name in plain text (its visible wordmark spells the brand with a dotless "ı"). The link has no aria-label, so its name is its own text — Lighthouse's label-content-name-mismatch has nothing to compare. */ .oj-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Words a catalog text keeps on one line (`` in the B2C home's texts): the SEO spec wants a plain hyphen in headings, not U+2011. */ .oj-nowrap { white-space: nowrap; } /* src/components/Button/Button.css */ /* Layout spec §3: primary/outline/secondary. One height for every size (`--oj-btn-h`, base.css; owner's call, 22.10, over the spec's 44/48/60) — one type size, one corner radius and one side padding too: a narrower header button read taller than the page's at the same height (owner's reports, 22.10), so two buttons with the same label are now the same button. The size classes stay for the markup's sake. Hover states are not drawn in the mockups. Primary fades to a lighter navy (owner's call, 22.10: the 8% darkening it had could not be seen); outline and secondary take a navy tint and a navy edge, staying light beside a navy button (owner's call, 22.10); focus-visible a 2px cyan ring with 2px offset, disabled 0.5 opacity. */ .oj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--oj-r-lg); border: none; font-family: var(--oj-font-body); font-weight: 700; font-size: 17px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; } .oj-btn:focus-visible { outline: 2px solid var(--oj-cyan); outline-offset: 2px; } .oj-btn:disabled, .oj-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .oj-btn--sm { height: var(--oj-btn-h); padding: 0 28px; } .oj-btn--md { height: var(--oj-btn-h); padding: 0 28px; } .oj-btn--lg { height: var(--oj-btn-h); padding: 0 28px; } .oj-btn--primary { background: var(--oj-navy); color: #fff; } /* The text colour is repeated on hover: base.css's `a:hover` (the mockups' own) outranks a single class, and turned a link-button's white label navy on navy. */ .oj-btn--primary:hover { background: var(--oj-navy-hover); color: #fff; } .oj-btn--outline { background: transparent; color: var(--oj-navy); border: 2px solid var(--oj-navy); } .oj-btn--outline:hover { background: var(--oj-light-hover); color: var(--oj-navy); } .oj-btn--secondary { background: var(--oj-surface); color: var(--oj-navy); border: 1px solid var(--oj-border-2); } .oj-btn--secondary:hover { border-color: var(--oj-navy); box-shadow: inset 0 0 0 1px var(--oj-navy); background: var(--oj-light-hover); color: var(--oj-navy); } @media (prefers-reduced-motion: reduce) { .oj-btn { transition: none; } } /* src/components/CookieBanner/CookieBanner.css */ /* Cookies spec §2, layout spec §4/§6: fixed to the bottom, above the header (Header.css z-index 20) and any sticky compare-table chrome. Geometry copied from docs/site-handoff/source/Cookies*.dc.html at each of their own widths (1440/1024 identical, 768, 390) rather than the prose breakpoint numbers, which the mockups themselves do not reproduce; the banner stays a fluid flex row/wrap between those widths like the rest of the site (layout spec §4). `[hidden]` is client/consent.ts's only way to show or hide it once cloned from the template — see CookieBanner.tsx for why it starts absent instead. */ .oj-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; height: 144px; padding: 24px 60px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid rgba(28, 44, 90, 0.12); box-shadow: 0 -24px 48px -32px rgba(28, 44, 90, 0.35); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; z-index: 40; } .oj-cookie-banner[hidden] { display: none; } .oj-cookie-banner__body { flex: 1 1 320px; max-width: 860px; display: flex; flex-direction: column; gap: 6px; } .oj-cookie-banner__title { font-family: var(--oj-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--oj-navy); } .oj-cookie-banner__text { margin: 0; font-family: var(--oj-font-body); font-size: 15px; line-height: 1.5; color: var(--oj-text); } .oj-cookie-banner__text a { color: var(--oj-blue); text-decoration: underline; text-underline-offset: 3px; } .oj-cookie-banner__text a:hover { color: var(--oj-navy); } .oj-cookie-banner__actions { flex: 0 1 340px; display: flex; gap: 10px; } .oj-cookie-banner__decline, .oj-cookie-banner__accept { flex: 1 1 140px; box-sizing: border-box; height: var(--oj-btn-h); padding: 0 24px; border-radius: var(--oj-r-lg); font-family: var(--oj-font-body); font-size: 17px; font-weight: 700; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; } .oj-cookie-banner__decline { border: 1px solid rgba(28, 44, 90, 0.25); background: rgba(255, 255, 255, 0.6); color: var(--oj-navy); } .oj-cookie-banner__accept { border: 0; background: var(--oj-navy); color: #fff; } /* Hover as the site's buttons (components/Button/Button.css; owner's call, 22.10): the light one takes a navy tint and a navy edge — «Отклонить» never looks like «Принять» — the navy one fades to a lighter navy. */ .oj-cookie-banner__decline:hover { border-color: var(--oj-navy); box-shadow: inset 0 0 0 1px var(--oj-navy); background: var(--oj-light-hover); color: var(--oj-navy); } .oj-cookie-banner__accept:hover { background: var(--oj-navy-hover); } @media (prefers-reduced-motion: reduce) { .oj-cookie-banner__decline, .oj-cookie-banner__accept { transition: none; } } /* Cookies768.dc.html: no fixed height, tighter padding/gap, the heading a size down. The two buttons still sit beside the text here — the fluid wrap below only kicks in once the row genuinely runs out of room. */ @media (max-width: 1023px) { .oj-cookie-banner { height: auto; padding: 24px 40px 28px; gap: 16px 24px; } .oj-cookie-banner__body { flex: 1 1 300px; max-width: 560px; } .oj-cookie-banner__title { font-size: 19px; } .oj-cookie-banner__actions { flex: 0 0 auto; } .oj-cookie-banner__decline, .oj-cookie-banner__accept { flex: 0 0 auto; min-width: 140px; } } /* CookiesMobile.dc.html (390): heading/text and the two full-width buttons stack, text starts at the top edge instead of centering on the row. */ @media (max-width: 599px) { .oj-cookie-banner { padding: 20px 20px 24px; align-items: flex-start; } .oj-cookie-banner__body { flex: 1 1 240px; max-width: 560px; } .oj-cookie-banner__title { font-size: 18px; } .oj-cookie-banner__text { font-size: 14px; } .oj-cookie-banner__actions { flex: 0 1 100%; } .oj-cookie-banner__decline, .oj-cookie-banner__accept { flex: 1 1 140px; } } /* src/components/Footer/Footer.css */ /* B2C layout spec §1.3, B2C-Home3 artboards, made more compact (owner's call, 22.10, DECISIONS.md): the brand block (logo, slogan, the two contacts in one line) and the three link columns share one row down to 1024; from 1023 the brand block sits above the columns, and below 767 the columns go two by two. The contacts stay under the slogan at every width. The bottom row: copyright left, company details and the language switch right — stacked on a phone, with the registration numbers on a line of their own. The small grey text uses `--oj-muted`, not the artboard's #7A7E8A, which reads at 4.05:1 on white — under the 4.5:1 the Lighthouse target needs. */ .oj-footer { background: var(--oj-surface); border-top: 1px solid var(--oj-border); } .oj-footer__inner { /* content-box: see ../Header/Header.css for why — same container bug. */ box-sizing: content-box; max-width: 1320px; margin: 0 auto; padding: 48px var(--oj-page-pad-desktop) 28px; display: grid; /* the artboard's 1.25fr + 3 × 1fr with 48px gaps: the link columns' own two inner gaps (96px) count in the right-hand share */ grid-template-columns: minmax(0, 1.25fr) minmax(0, 3.35fr); gap: 40px 48px; } .oj-footer__top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .oj-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .oj-footer__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--oj-navy); text-decoration: none; } .oj-footer__logo svg { width: 36px; height: 36px; } .oj-footer__logo .oj-wordmark { font-size: 26px; } .oj-footer__slogan { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--oj-font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--oj-navy); } .oj-footer__slogan-mark { display: inline-block; width: 11px; height: 11px; border-radius: 2.4px; background: var(--oj-amber); transform: rotate(45deg); flex: none; } .oj-footer__contacts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; } .oj-footer__contacts a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--oj-font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--oj-navy); text-decoration: none; } .oj-footer__contacts a:hover span { text-decoration: underline; text-underline-offset: 4px; } .oj-footer__contacts svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--oj-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* the site's language switch (kept from the live site), at the bottom row's end */ .oj-footer__lang { display: flex; align-items: center; gap: 16px; } .oj-footer__lang a { color: var(--oj-muted); text-decoration: none; } .oj-footer__lang a:hover { color: var(--oj-navy); text-decoration: underline; text-underline-offset: 6px; } .oj-footer__lang [aria-current] { color: var(--oj-navy); font-weight: 700; } .oj-footer__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .oj-footer__column { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .oj-footer__column-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oj-muted); } .oj-footer__column ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .oj-footer__column a { font-size: 16px; line-height: 1.35; color: var(--oj-text-2); text-decoration: none; } .oj-footer__column a:hover { color: var(--oj-navy); text-decoration: underline; text-underline-offset: 4px; } .oj-footer__bottom { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--oj-border-2); display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 14px; line-height: 1.5; color: var(--oj-muted); } .oj-footer__copyright, .oj-footer__company { margin: 0; color: inherit; } .oj-footer__copyright .oj-wordmark { color: inherit; } .oj-footer__bottom-end { display: flex; align-items: center; gap: 32px; } /* B2C-Home3-1024 put the brand block above the columns; one row is ~250px lower. The slogan wraps; each link column takes its text's width. */ @media (min-width: 1024px) and (max-width: 1279px) { .oj-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); column-gap: 32px; } } /* Below 1440 each link column takes its text's width (15px links below 1280), so the three fit side by side down to 768 with «Приложение для Android и iOS» in «Сервис»; a column short of room wraps rather than overflow. */ @media (min-width: 768px) and (max-width: 1439px) { .oj-footer__columns { grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: space-between; gap: 24px 20px; } } @media (min-width: 768px) and (max-width: 1279px) { .oj-footer__column a { font-size: 15px; } } @media (max-width: 1023px) { .oj-footer__inner { grid-template-columns: minmax(0, 1fr); padding: 48px 40px 28px; row-gap: 32px; } /* the copyright on a line of its own, the details and languages under it */ .oj-footer__bottom { flex-wrap: wrap; } .oj-footer__copyright { flex-basis: 100%; } .oj-footer__bottom-end { flex: 1; justify-content: space-between; } } @media (max-width: 767px) { .oj-footer__inner { padding: 36px 20px 24px; row-gap: 28px; } .oj-footer__top, .oj-footer__brand { gap: 16px; } .oj-footer__logo svg { width: 30px; height: 30px; } .oj-footer__logo .oj-wordmark { font-size: 23px; } .oj-footer__slogan { font-size: 17px; } .oj-footer__contacts { gap: 8px 20px; } .oj-footer__contacts a { font-size: 15px; } /* «Сервис» and «Для бизнеса» side by side, «Документы» under them */ .oj-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .oj-footer__column:last-child { grid-column: 1 / -1; } .oj-footer__column, .oj-footer__column ul { gap: 12px; } .oj-footer__column a { font-size: 15px; } .oj-footer__bottom { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; padding-top: 20px; font-size: 13px; } .oj-footer__copyright { flex-basis: auto; } .oj-footer__bottom-end { flex: none; flex-direction: column; align-items: flex-start; gap: 6px; } /* «ООО «Октоджинн»», then the registration numbers on a line of their own */ .oj-footer__company-sep { display: none; } .oj-footer__company-ids { display: block; } } /* src/components/Header/Header.css */ /* B2C layout spec §1.2: desktop 80px static bar; compact (<=1023) fixed bar with a burger that opens `.oj-header__menu` (client/menu.ts) — 72px with «Войти» still in it down to 768 (B2C-Home3-768), 64px below that with «Войти» moved into the panel (B2C-Home3-Mobile). Without JS the panel has no `hidden` attribute and sits open under the bar — see ../../client/menu.ts for how JS collapses it on load. */ .oj-header { border-bottom: 1px solid var(--oj-border); background: var(--oj-bg); position: relative; /* In-app browsers (Telegram/VK/WhatsApp WebViews, iOS — task brief item 5): `viewport-fit=cover` (`layout/Document.tsx`) exposes this as non-zero only inside such a chrome; everywhere else it resolves to 0, so nothing moves. Padding, not margin: the header's own background (above) covers the inset instead of leaving it transparent, and the bar's logo/buttons keep their usual position inside `.oj-header__bar`, which carries its own padding unchanged. */ padding-top: env(safe-area-inset-top); } .oj-header__bar { height: var(--oj-header-h); /* content-box, not the sitewide border-box reset (base.css): layout spec §3's container is "1320 content + N px side padding" — under border-box, `max-width: 1320px` would cap padding *and* content together, leaving only 1200px of content and, once centred, an extra unwanted margin (content starting at x=120 instead of 60 at 1440). With content-box, `max-width` bounds content alone and this box's rendered width becomes exactly 1320 + 2 * padding, self-centering past that. */ box-sizing: content-box; max-width: 1320px; margin: 0 auto; padding: 0 var(--oj-page-pad-desktop); display: flex; align-items: center; justify-content: space-between; } .oj-header__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--oj-navy); text-decoration: none; } .oj-header__logo svg { width: 28px; height: 28px; } .oj-header__logo .oj-wordmark { font-size: 20px; } .oj-header__nav { display: flex; align-items: center; gap: 36px; } .oj-header__nav a { color: var(--oj-navy); text-decoration: none; font-weight: 600; font-size: 17px; white-space: nowrap; } /* The current page's mark: the mockup's own rhombus (`Integrations.dc.html`), 8px, radius 2, 14px above the label, centred. */ .oj-header__nav a.is-current { position: relative; } .oj-header__mark { position: absolute; left: 50%; top: -14px; width: 8px; height: 8px; margin-left: -4px; border-radius: 2px; background: var(--oj-amber); transform: rotate(45deg); /* slides between pages (base.css, `@view-transition`) */ view-transition-name: oj-nav-mark; } /* the bar stays put while the page under it changes */ .oj-header { view-transition-name: oj-header; } .oj-header__nav a:hover { text-decoration: underline; text-underline-offset: 6px; } .oj-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; /* The menu sits midway between the logo and this box, so a box that changed width from page to page («Попробовать бесплатно», «Забронировать демо», nothing on /plans and /demo) moved the menu with it — by up to 144px at 1440 (owner's report from domovoy.io, 09.11). The box keeps the widest one's width everywhere (338px measured, Russian), its content pushed right. */ min-width: 340px; } .oj-header__login { color: var(--oj-navy); text-decoration: none; font-weight: 600; font-size: 17px; } .oj-header__burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--oj-r-md); color: var(--oj-navy); } .oj-header__burger svg { width: 24px; height: 24px; } .oj-header__burger .oj-icon-close { display: none; } .oj-header__burger[aria-expanded="true"] .oj-icon-burger { display: none; } .oj-header__burger[aria-expanded="true"] .oj-icon-close { display: block; } .oj-header__menu { display: none; flex-direction: column; border-bottom: 1px solid var(--oj-border); } .oj-header__menu a { height: 56px; display: flex; align-items: center; padding: 0 20px; border-top: 1px solid var(--oj-border); color: var(--oj-navy); text-decoration: none; font-family: var(--oj-font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.025em; } /* the same current-page rhombus, before the label in the mobile panel */ .oj-header__menu a.is-current::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 12px; border-radius: 2px; background: var(--oj-amber); transform: rotate(45deg); } /* The short action label («Попробовать», «Демо») is for phones only; the full one stays the link's accessible name there too (visually hidden). */ .oj-header__connect-short { display: none; } /* «Войти» in the panel only once the bar is compact (below) */ .oj-header__menu .oj-header__menu-login { display: none; } /* «Приложение для Android и iOS» (install layout spec): not for someone who already opened the site from its home-screen icon. `display-mode` covers Chrome; iOS Safari reports it through `navigator.standalone` only, which `client/displayMode.ts` copies onto ``. */ @media (display-mode: standalone) { .oj-header__menu .oj-header__menu-install { display: none; } } html[data-display-mode="standalone"] .oj-header__menu .oj-header__menu-install { display: none; } /* The compact bar's own height: the bar plus its 1px bottom border, without the safe-area padding above it. `body` reserves it (and the safe area) at the top, since the fixed bar below takes no room. */ :root { --oj-header-compact-h: 73px; } /* Four menu items since «Тарифы» joined (owner's call, 22.10): from 1024 to 1279 the artboard's gaps would run «О компании» into «Войти». */ @media (min-width: 1024px) and (max-width: 1279px) { .oj-header__nav { gap: 22px; } .oj-header__nav a, .oj-header__login { font-size: 16px; } .oj-header__actions { gap: 20px; /* the widest, «Войти» + «Попробовать бесплатно» at 16px: 331px */ min-width: 332px; } } @media (max-width: 767px) { :root { --oj-header-compact-h: 65px; } } @media (max-width: 1023px) { /* Fixed, not sticky (in-app browsers, spec of 21.10): a WebView (Telegram/VK/WhatsApp on iOS) pins a sticky bar to the edge of its own content inset, below the strip where its collapsed address bar sits, and the page scrolled through that strip above the bar; a fixed bar is placed against the visible area itself. `body` takes the room the bar no longer holds in the flow, so the page below sits where it did. */ .oj-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; } body { padding-top: calc(var(--oj-header-compact-h) + env(safe-area-inset-top)); } /* an anchor or a focused field scrolled into view stops below the bar */ html { scroll-padding-top: calc(var(--oj-header-compact-h) + env(safe-area-inset-top)); } /* Task brief item 5: some in-app browsers momentarily mis-place the header while their own chrome collapses/rubber-bands, and the page's next section peeks through the gap above it for a frame. A same-background fill directly above the header's own box (it moves with the header, the fixed bar is its containing block) papers over that gap instead of showing content — `bottom: 100%` stacks it flush above, `100vh` is taller than any such gap gets. */ .oj-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--oj-bg); } /* B2C-Home3-768: the page's 40px side padding at the logo edge, 28 at the burger's (its 48px button holds 12 of its own) */ .oj-header__bar { height: 72px; padding: 0 28px 0 40px; } .oj-header__nav { display: none; } /* As on the live site (owner's call, 22.10, over the B2C layout spec's «Войти» in the bar at 768): once the burger shows, the bar holds the logo and the burger only. «Войти» moves into the panel; the page's button waits until the hero's own CTA has scrolled away (client/headerCta.ts). */ .oj-header__login { display: none; } .oj-header__menu .oj-header__menu-login { display: flex; } .oj-header__connect { transition: opacity 200ms, transform 200ms, background-color 180ms ease; } .oj-header__connect[data-hidden="true"] { opacity: 0; transform: translateY(-4px); pointer-events: none; } .oj-header__actions { /* compact bar: the burger layout, no reserved width */ min-width: 0; gap: 12px; } .oj-header__burger { display: inline-flex; } .oj-header__menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--oj-bg); box-shadow: 0 24px 40px -28px rgba(28, 44, 90, 0.45); transition: opacity 180ms, transform 180ms; } .oj-header__menu[hidden] { display: none; } .oj-header__menu:not([hidden]) { display: flex; } } @media (max-width: 767px) { .oj-header__bar { height: 64px; /* B2C-Home3-Mobile: 20px at the logo edge, 8px at the burger edge — the burger button is 48px square with a centred 24px icon, so its own 12px of inner space already reads as most of a 20px margin. */ padding: 0 8px 0 20px; } .oj-header__actions { gap: 2px; } .oj-header__connect { /* B2C-Home3-Mobile: 16px padding, narrower than the md button's */ padding: 0 16px; } .oj-header__connect-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .oj-header__connect-short { display: inline; } } /* B2C-Home3-768: the panel's links line up with the bar's 40px edge */ @media (min-width: 768px) and (max-width: 1023px) { .oj-header__menu a { padding: 0 40px; } } /* Below the 390 control width (fluid territory, layout spec §4: no horizontal scroll 320-1920), the burger (fixed 48px) plus the "Подключить" CTA at its 390-width padding no longer fit next to the logo at 320px (item 3) — the CTA's own padding is the one thing here with room to give without changing the 390 design itself. */ @media (max-width: 359px) { .oj-header__connect { padding: 0 10px; } } @media (prefers-reduced-motion: reduce) { .oj-header__connect, .oj-header__menu { transition: none; } } /* src/components/Wordmark/Wordmark.css */ /* The `.oj-wordmark`/`.oj-i` rules ship from docs/site-handoff/tokens.css itself (build.mjs concatenates it first into dist/styles.css, before this file) — this file only adds what tokens.css does not know about, plus one override: tokens.css hard-codes `.oj-wordmark`'s colour to navy, which is right everywhere the mockups use it (on `--oj-bg`/`--oj-surface`) but wrong the moment a page needs the word on a dark band. Same specificity, loaded later, so this wins; `Header.css`/`Footer.css` set navy explicitly on the link that wraps their own wordmark, so nothing changes there. */ .oj-wordmark { color: inherit; } .oj-logo-mark { display: block; flex: none; } /* The rhombus over the dotless ı, placed from the text's own baseline rather than tokens.css's box-bottom offset: the inline-block box's bottom depends on how each browser and OS read the font's ascent/descent (it sat lower in Safari), while the baseline does not. An empty inline-block sits with its bottom on the baseline; the margins pull it back over the stem and give the width back so "nn" does not move; the transform lifts it and turns it. Measured in Plus Jakarta Sans 700: the ı advances 0.203em (letter-spacing included), its stem is centred 0.1163em from its left edge, the J's top is 0.75em above the baseline. So: centre over the stem, top corner level with the J — lifted a further 0.012em, the amount the rounded corner (radius 0.0295em) takes off the apex. */ .oj-wordmark .oj-i::after { position: static; display: inline-block; vertical-align: baseline; left: auto; bottom: auto; width: 0.14em; height: 0.14em; margin-left: -0.1567em; margin-right: 0.0167em; transform: translateY(-0.593em) rotate(45deg); }