` 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; } } /* 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; } /* src/components/Button/Button.css */ /* Layout spec §3: primary/outline/secondary, heights 44/48/60. Hover states are not drawn in the mockups — darken 8% (outline: fill navy, white text), 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-md); border: none; font-family: var(--oj-font-body); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; } .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-sm); padding: 0 20px; } .oj-btn--md { height: var(--oj-btn-h-md); padding: 0 24px; border-radius: var(--oj-r-md); } .oj-btn--lg { height: var(--oj-btn-h-lg); padding: 0 36px; border-radius: var(--oj-r-lg); font-size: 17px; } .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: color-mix(in srgb, var(--oj-navy) 92%, #000); color: #fff; } .oj-btn--outline { background: transparent; color: var(--oj-navy); border: 2px solid var(--oj-navy); } .oj-btn--outline:hover { background: var(--oj-navy); color: #fff; } .oj-btn--secondary { background: var(--oj-surface); color: var(--oj-navy); border: 1px solid var(--oj-border-2); } .oj-btn--secondary:hover { background: color-mix(in srgb, var(--oj-surface) 92%, #000); color: var(--oj-navy); } /* 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: 48px; padding: 0 24px; border-radius: var(--oj-r-md); font-family: var(--oj-font-body); font-size: 16px; font-weight: 700; cursor: pointer; } .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; } /* 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/DemoBlock/DemoBlock.css */ /* Layout spec §4 + `Home2.dc.html`/`Home1024.dc.html`/`HomeMobile.dc.html`: a full-bleed amber band, no radius — not a card. `.oj-demo-block` breaks out of `

`'s own max-width the same way `Header`/`Footer` sit outside it: a full-width box with only vertical padding, an inner row capped at 1320px re-applying the shared side padding. The negative-margin breakout is why `base.css` sets `overflow-x: hidden` on `html` — `100vw` in the `calc()` below includes the scrollbar gutter some browsers give it, which would otherwise add a few px of horizontal scroll on every page. */ .oj-demo-block { background-color: var(--oj-amber); /* The mockup's own decorative pattern: a rounded-square grid fading in from the right, behind the number. Desktop/tablet only — `HomeMobile. dc.html`'s section has no background-image at all. */ background-image: linear-gradient(90deg, var(--oj-amber) 42%, rgba(240, 180, 65, 0) 78%), url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27130%27%20height%3D%27130%27%3E%3Crect%20width%3D%27112%27%20height%3D%27112%27%20rx%3D%2732%27%20fill%3D%27rgba%2815%2C18%2C51%2C0.05%29%27%2F%3E%3C%2Fsvg%3E"); background-size: auto, 130px 130px; background-position: 0 0, right -10px top 22px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 96px 0; } .oj-demo-block__inner { /* content-box: see ../Header/Header.css for why — same container bug. */ box-sizing: content-box; max-width: 1320px; margin: 0 auto; padding: 0 60px; display: flex; align-items: center; justify-content: space-between; gap: 64px; } .oj-demo-block__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 760px; } .oj-demo-block__text h2 { margin: 0; font-family: var(--oj-font-display); font-weight: 600; font-size: 72px; line-height: 1.02; letter-spacing: -0.045em; color: var(--oj-ink); } .oj-demo-block__description { margin: 0; max-width: 640px; font-size: 22px; line-height: 1.5; color: var(--oj-ink); } .oj-demo-block__cta { margin-top: 12px; background: var(--oj-ink); } .oj-demo-block__cta:hover { background: color-mix(in srgb, var(--oj-ink) 92%, #000); } .oj-demo-block__minutes { margin: 0; flex: none; display: flex; align-items: baseline; gap: 16px; font-family: var(--oj-font-display); font-weight: 600; color: var(--oj-ink); } .oj-demo-block__value { font-size: 300px; line-height: 0.8; letter-spacing: -0.07em; } .oj-demo-block__label { font-size: 34px; letter-spacing: -0.03em; } @media (max-width: 1279px) { .oj-demo-block__inner { gap: 48px; } .oj-demo-block__text { max-width: 560px; } .oj-demo-block__text h2 { font-size: 64px; } .oj-demo-block__minutes { flex-direction: column; align-items: flex-start; gap: 14px; } .oj-demo-block__value { font-size: 200px; letter-spacing: -0.06em; } .oj-demo-block__label { font-size: 28px; padding-left: 8px; } } /* Layout spec §3's container table: side padding steps to 40px at the 768 tablet tier (60px above it, 20px below 767) — this file only had the 1279 and 767 steps, so at exactly 768 the "минут" column (`flex: none`) and the text column's own longest word together needed a few px more than the still-60px-padded row gave them (item 3). */ @media (max-width: 1023px) { .oj-demo-block__inner { padding-left: 40px; padding-right: 40px; } } @media (max-width: 767px) { .oj-demo-block { background-image: none; padding: 56px 0; } .oj-demo-block__inner { padding: 0 20px; flex-direction: column-reverse; align-items: stretch; gap: 18px; } .oj-demo-block__text { max-width: none; gap: 18px; } .oj-demo-block__text h2 { font-size: 36px; line-height: 1.06; letter-spacing: -0.04em; } .oj-demo-block__description { max-width: none; font-size: 18px; } .oj-demo-block__cta { margin-top: 8px; width: 100%; height: 56px; } .oj-demo-block__minutes { flex-direction: row; align-items: baseline; gap: 10px; } .oj-demo-block__value { font-size: 150px; letter-spacing: -0.07em; } .oj-demo-block__label { font-size: 24px; padding-left: 0; } } /* src/components/Footer/Footer.css */ /* Layout spec §6: mark + wordmark + a yellow rhombus + the slogan in one row, larger than plain body text; a divider; links left (wraps into two rows), copyright right. Padding 64/36 (mobile 40/28). */ .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: 64px var(--oj-page-pad-desktop) 36px; display: flex; flex-direction: column; gap: 48px; } .oj-footer__brand { display: flex; align-items: center; gap: 24px; } /* the language switch sits at the far end of the brand row */ .oj-footer__lang { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 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__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: 24px; font-family: var(--oj-font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.03em; color: var(--oj-navy); } .oj-footer__slogan-mark { display: inline-block; width: 12px; height: 12px; border-radius: 2.6px; background: var(--oj-amber); transform: rotate(45deg); flex: none; } .oj-footer__bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding-top: 24px; border-top: 1px solid var(--oj-border-2); } .oj-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; } .oj-footer__links a { color: var(--oj-muted); text-decoration: none; font-size: 16px; /* Without this, a flex item's default min-width: auto lets a narrow container shrink a multi-word link below its content width and break mid-link (the mockup only ever wraps whole links to the next row). */ white-space: nowrap; } .oj-footer__links a:hover { color: var(--oj-navy); text-decoration: underline; text-underline-offset: 6px; } .oj-footer__copyright { margin: 0; color: var(--oj-muted); font-size: 16px; white-space: nowrap; } /* A third tier `Compare768.dc.html` has and `Home1024.dc.html` does not: the brand row stays a row, but links + copyright stack instead of sharing a space-between row — at this width that row was squeezing the links down far enough to wrap every link onto its own line. 1023, not 767 or the shared 1279 breakpoint: same reasoning as the container padding fix in ../Header/Header.css, this is where these specific numbers change. */ @media (max-width: 1023px) { .oj-footer__inner { padding: 56px 40px 32px; } .oj-footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; } } @media (max-width: 767px) { .oj-footer__inner { padding: 40px 20px 28px; gap: 24px; } .oj-footer__brand { flex-direction: column; align-items: flex-start; gap: 24px; } .oj-footer__lang { margin-left: 0; } .oj-footer__logo svg { width: 32px; height: 32px; } .oj-footer__logo .oj-wordmark { font-size: 23px; } .oj-footer__slogan { gap: 12px; font-size: 17px; letter-spacing: -0.02em; } .oj-footer__slogan-mark { width: 11px; height: 11px; border-radius: 2.4px; } .oj-footer__bottom { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 22px; } .oj-footer__links { flex-direction: column; gap: 14px; } .oj-footer__links a { /* Column layout, one link per row: nothing left to protect from shrinking (that was only for the row layout above), and `HomeMobile.dc.html`'s longest link does wrap onto a second line. */ white-space: normal; } .oj-footer__copyright { font-size: 14px; white-space: normal; } } /* src/components/Header/Header.css */ /* Layout spec §6: desktop/tablet 80px static bar; compact (<=899 — the spec says <=767, but four nav items no longer fit a bar below 900) 64px fixed bar with a burger that opens `.oj-header__menu` (client/menu.ts). 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; gap: 24px; } .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); } /* Layout spec §3's container table: 60px side padding holds all the way down to 1024 (content 904), only narrowing to 40 between there and 768. 1023, not the shared 1279 "tablet" breakpoint, is deliberate: it is where this specific number changes, not where the header's own layout does. */ /* 1024-1279: items a little closer than the groups (logo, nav, actions) */ @media (max-width: 1279px) { .oj-header__nav { gap: 28px; } } @media (max-width: 1023px) { .oj-header__bar { padding: 0 40px; } /* Four nav items, not the artboard's two (DECISIONS.md 2а): a notch smaller and closer so the bar still fits in one line down to 900. */ .oj-header__nav { gap: 20px; } .oj-header__nav a, .oj-header__login { font-size: 16px; } .oj-header__actions { gap: 20px; } } /* The compact bar's own height: the 64px 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: 65px; } @media (max-width: 899px) { /* 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); } .oj-header__bar { height: 64px; /* HomeMobile.dc.html: 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__nav { display: none; } .oj-header__login { display: none; } .oj-header__actions { gap: 2px; } .oj-header__burger { display: inline-flex; } .oj-header__connect { /* HomeMobile.dc.html: 44px tall, 18px padding — smaller than the md button this reuses everywhere else. */ height: 44px; padding: 0 18px; transition: opacity 200ms, transform 200ms; } .oj-header__connect[data-hidden="true"] { opacity: 0; transform: translateY(-4px); pointer-events: none; } .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; } } /* 768-899: the compact bar keeps the page's 40px side padding (28 at the burger's edge — its 48px button holds 12 of its own), so the logo lines up with the content under it. */ @media (min-width: 768px) and (max-width: 899px) { .oj-header__bar { padding: 0 28px 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 12px; } } @media (prefers-reduced-motion: reduce) { .oj-header__connect, .oj-header__menu { transition: none; } } /* src/components/LegalDocument/LegalDocument.css */ /* Geometry from Privacy.dc.html / PrivacyMobile.dc.html (Consent and Terms share the same structure per the mockups). No separate tablet rule: at 1024 the two-column grid simply reflows inside its 60px page margins (Privacy1024.dc.html renders the same markup, only narrower) — the single breakpoint below is the shared 767px one (../../../AGENTS.md contract 9). `main` carries no padding of its own (../../styles/base.css) — this page's own top/side/bottom inset lives here: mockup's hero section is `88px 60px 40px` and its TOC+sections one is `0 60px 96px`; since both sit inside this single wrapper, one `padding: 88px 60px 96px` reproduces both edges at once (the 40px gap between them is `.oj-legal__hero`'s own `margin-bottom` below, not this wrapper). */ .oj-legal { padding: 40px 20px 56px; } .oj-legal__hero { display: flex; flex-direction: column; gap: 12px; margin: 0 auto 24px; max-width: 1000px; } .oj-legal__title { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.035em; /* "конфиденциальности" alone, at 320px (below the 390 control width, so not in any mockup), is wider than the column and has no soft-wrap point of its own — without this the word overflows past the column the way ordinary text wrap never would (item 3). */ overflow-wrap: break-word; } .oj-legal__date { margin: 0; font-size: 15px; color: var(--oj-muted); } .oj-legal__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .oj-legal__toc { box-sizing: border-box; border: 1px solid var(--oj-border); border-radius: var(--oj-r-lg); background: var(--oj-surface); /* A closed `

` collapses its own box to the summary's height as part of its native rendering — the link list stays in normal flow underneath and, without this, would still paint past that collapsed box (`overflow: visible`'s default) instead of actually disappearing when a mobile reader taps `

` to close it. */ overflow: hidden; } .oj-legal__tocSummary { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-family: var(--oj-font-display); font-weight: 700; font-size: 16px; color: var(--oj-navy); list-style: none; cursor: pointer; } .oj-legal__tocSummary::-webkit-details-marker { display: none; } .oj-legal__tocChevron { flex: none; width: 16px; height: 16px; } .oj-legal__tocLabel { display: none; } .oj-legal__tocNav { flex-direction: column; gap: 2px; padding: 0 10px 14px; } /* `display` scoped to the open state, not unconditional: an unscoped `display: flex` here is an *author* declaration, which always beats the UA stylesheet's non-important `details:not([open]) > * { display: none }` regardless of specificity — it would keep the link list visible even after tapping `

` to close it at mobile, the one place the native toggle still runs (≥768px hides the summary instead, below). */ details[open] > .oj-legal__tocNav { display: flex; } .oj-legal__tocNav a { font-size: 16px; line-height: 1.4; color: var(--oj-text-2); text-decoration: none; padding: 8px 10px; border-radius: var(--oj-r-sm); } .oj-legal__tocNav a:hover { background: var(--oj-surface-2); } .oj-legal__sections { display: flex; flex-direction: column; gap: 28px; } .oj-legal__section { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; } .oj-legal__section h2 { margin: 0; font-family: var(--oj-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--oj-navy); } .oj-legal__section p { margin: 0; font-family: var(--oj-font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--oj-text-2); } @media (min-width: 768px) { .oj-legal { padding: 88px var(--oj-page-pad-desktop) 96px; } .oj-legal__hero { gap: 16px; margin-bottom: 40px; } .oj-legal__title { font-size: 56px; line-height: 1.1; letter-spacing: -0.04em; } .oj-legal__date { font-size: 17px; } .oj-legal__grid { grid-template-columns: 250px 1fr; gap: 56px; align-items: start; max-width: 1000px; margin: 0 auto; } .oj-legal__toc { border: none; border-radius: 0; background: none; position: sticky; top: 24px; align-self: start; } .oj-legal__tocSummary { display: none; } .oj-legal__tocLabel { display: block; padding: 0 10px 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oj-muted); } .oj-legal__tocNav { padding: 0; } .oj-legal__sections { gap: 40px; max-width: 700px; } .oj-legal__section { gap: 12px; scroll-margin-top: 24px; } .oj-legal__section h2 { font-size: 26px; } .oj-legal__section p { font-size: 18px; line-height: 1.6; } } /* 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); } /* src/components/home/HomeAdvantages.css */ /* The "why OctoJinn" accordion (layout spec §4/§5, `Home2.dc.html` / `Home1024.dc.html` / `HomeMobile.dc.html`). Full-bleed section on the page background (no colour change of its own) + inner `max-width: 1320px` + side padding, the shape `../Header/Header.css` explains. Default (no `.is-closed` anywhere, i.e. no JS yet) renders every item as an open card: full text, always in the DOM — `client/advantages.ts` is the only thing that ever adds `.is-closed`, once it runs. */ .oj-advantages { background: var(--oj-bg); } .oj-advantages__inner { box-sizing: content-box; max-width: 1320px; margin: 0 auto; padding: 120px var(--oj-page-pad-desktop) 56px; display: flex; flex-direction: column; gap: 56px; } .oj-advantages__inner h2 { margin: 0; font-size: 64px; line-height: 1.04; letter-spacing: -0.045em; } /* The mobile-only shared animation window (`HomeAdvantages.tsx`): hidden above 767 (each open card gets its own window instead, below); at 767 it replaces every per-item window with one shared box showing the currently open item's scene (`client/advantages.ts` toggles `.is-active`). */ .oj-advantages__mobileWindow { display: none; } .oj-advantages__list { position: relative; /* its own stacking context, so the lens's `z-index: -1` lands behind the items but above the section's background, not beneath it */ isolation: isolate; display: flex; flex-direction: column; } /* The sliding lens (owner's ask, not the mockup's): the open card's own look, carried by a separate element behind the items instead of the item itself, so `client/advantages.ts` can glide it from the old open item to the new one. Hidden by default — pre-JS every item keeps its own card look below and no lens ever appears; `.has-lens` (JS-added to the list) switches both at once. `z-index: -1` inside the list's own stacking context puts it behind the items. */ .oj-advantages__lens { display: none; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 28px; background: var(--oj-surface); box-shadow: 0 30px 60px -44px rgba(28, 44, 90, 0.45); } .oj-advantages__list.has-lens .oj-advantages__lens { display: block; } .oj-advantages__list.has-lens .oj-advantages__item:not(.is-closed) { background: transparent; box-shadow: none; } .oj-advantages__item { border-radius: 28px; } /* The third column is never a grid item (the window below is positioned out of flow) — it exists only to cap the text column's width at exactly the mockup's, so a long title can never grow wide enough to run under the window. */ /* `min-height`: the window is positioned out of grid flow (below), so a short title+description no longer forces the card tall enough to hold it — pin the card to at least padding + the window's own height, matching the mockup's card height exactly (it gets there by making the window a normal, if oversized, grid item instead; same end result). */ .oj-advantages__item:not(.is-closed) { position: relative; display: grid; grid-template-columns: 96px 1fr 480px; align-items: start; align-content: start; column-gap: 8px; row-gap: 16px; margin: 6px 0; padding: 24px 24px 24px 28px; min-height: 268px; background: var(--oj-surface); box-shadow: 0 30px 60px -44px rgba(28, 44, 90, 0.45); } /* The row/panel wrappers exist for the closed layout and the collapse animation (below); once an item is open they get out of the way (`display: contents`) so num/title/desc/window become direct grid items of the item itself — the layout the mockup's own open card uses. */ .oj-advantages__item:not(.is-closed) .oj-advantages__row, .oj-advantages__item:not(.is-closed) .oj-advantages__panelOuter, .oj-advantages__item:not(.is-closed) .oj-advantages__panelInner, .oj-advantages__item:not(.is-closed) .oj-advantages__panelBody { display: contents; } /* Closed row: `96px 1fr 32px`, gap 8 — the same number column and gap the open card above uses, so opening another item never moves this text. `position: relative`: the toggle's `::after` below stretches over the whole row (number, title, "+") so the entire row is the click target, as in the mockup — harmless when the row is `display: contents` (open). */ .oj-advantages__row { position: relative; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; column-gap: 8px; padding: 24px 28px; } /* Owner's decision: lines only between items — none above the first or below the last. */ .oj-advantages__item + .oj-advantages__item.is-closed .oj-advantages__row { border-top: 1px solid var(--oj-border); } /* Owner's decision (not the mockup's): no line above an open card (already true — an open row carries no border-top of its own) and none below it either — the closed row right after an open one skips its border-top too. */ .oj-advantages__item:not(.is-closed) + .oj-advantages__item.is-closed .oj-advantages__row { border-top: none; } .oj-advantages__num { font-family: var(--oj-font-display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--oj-slate-300); } .oj-advantages__item:not(.is-closed) .oj-advantages__num { grid-column: 1; grid-row: 1 / -1; align-self: start; padding-top: 2px; color: var(--oj-cyan); } .oj-advantages__heading { margin: 0; /* lets the button inside act as this row's own grid item (a11y: the heading tag stays, but it never intercepts layout) */ display: contents; } .oj-advantages__toggle { box-sizing: border-box; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--oj-font-display); font-weight: 700; font-size: 27px; line-height: 1.15; letter-spacing: -0.025em; color: var(--oj-navy); } /* Owner's decision: the whole closed row is the click target, not just the title text — a transparent overlay stretched to the row's own bounds (`position: relative` above), the same trick as a "stretched link". */ .oj-advantages__item.is-closed .oj-advantages__toggle::after { content: ""; position: absolute; inset: 0; cursor: pointer; } .oj-advantages__item:not(.is-closed) .oj-advantages__toggle { grid-column: 2; grid-row: 1; font-size: 42px; font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; } .oj-advantages__plus { font-family: var(--oj-font-display); font-weight: 500; font-size: 30px; line-height: 1; color: var(--oj-blue); } .oj-advantages__item:not(.is-closed) .oj-advantages__plus { display: none; } /* The collapse: `grid-template-rows` 0fr <-> 1fr (layout spec §5 allows either an animated or an instant switch) — no JS means no `.is-closed`, so this rule never fires pre-JS and every panel stays at its natural (`1fr`) height. Only meaningful for a closed item now — an open one turns this wrapper transparent above. No `transition` of its own any more: the sliding-lens view transition (below) covers the smooth case, and without it the switch is meant to be instant, not a leftover 240ms fade. */ .oj-advantages__panelOuter { display: grid; grid-template-rows: 1fr; } .oj-advantages__item.is-closed .oj-advantages__panelOuter { grid-template-rows: 0fr; } .oj-advantages__panelInner { overflow: hidden; min-width: 0; display: grid; grid-template-columns: 96px 1fr; column-gap: 8px; /* no vertical padding here: a `0fr` row cannot shrink below its item's own padding, so the bottom space lives on the body instead */ min-height: 0; padding: 0 28px; } /* The number column stays empty here — column 1 exists only so this text lines up under the row's own num/heading columns above, for the closed collapse. */ .oj-advantages__panelBody { grid-column: 2; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 40px; padding-bottom: 28px; } .oj-advantages__desc { margin: 0; max-width: 520px; font-size: 22px; line-height: 1.45; color: var(--oj-text); flex: 1 1 320px; } .oj-advantages__item:not(.is-closed) .oj-advantages__desc { grid-column: 2; grid-row: 2; } /* Fixed-size animation window (contract 5, ../../../AGENTS.md: no CLS) — width fluid between breakpoints, but always a concrete box, never auto-sized to content. `aspect-ratio` gives the 1440 2:1 shape; 1024 breaks that ratio on purpose (the mockup's own 300x200), so it is overridden explicitly below rather than derived. Positioned (contract: the open card's redesign) at the card's own top-right corner — `top`/ `right` match the card's own padding exactly, so it sits at the top, beside the title, spanning the height, independent of how wide the text column happens to be. `position: relative` stays the base value (the scene inside centres on it) — the open-card rule below switches it to `absolute` without losing that. */ .oj-advantages__window { position: relative; flex: none; box-sizing: border-box; width: clamp(260px, 33vw, 440px); aspect-ratio: 2 / 1; border-radius: 22px; background: var(--oj-surface-2); overflow: hidden; --oj-scene-scale: 0.65; } .oj-advantages__item:not(.is-closed) .oj-advantages__window { position: absolute; top: 24px; right: 24px; } .oj-advantages__sceneWrap { position: absolute; left: 50%; top: 50%; width: 500px; height: 340px; margin: -170px 0 0 -250px; transform: scale(var(--oj-scene-scale)); display: flex; align-items: center; justify-content: center; } /* Loops run only while their item is open and in the viewport (`client/advantages.ts`, layout spec §5 rule 4). Paused only on the script's explicit `data-running="false"`, never by the attribute's absence: without JavaScript nothing sets it, and a scene frozen on its first keyframe would be an empty box (§5 rule 2 — content visible without JS; audit 2026-09-30). `.oj-a`'s own `prefers-reduced-motion` kill switch (tokens.css) wins regardless. `!important`: each scene element carries its own `animation` in an inline `style` (React — durations/delays come from data, `HomeAdvantagesScene.tsx`), which always outranks a selector rule regardless of specificity — same reason `tokens.css`'s reduced-motion override uses it. */ .oj-advantages__window[data-running="false"] .oj-a { animation-play-state: paused !important; } /* The mobile shared window's own copy of the same gate — a separate class, a separate pause rule (`client/advantages.ts` drives `data-running` on this container the same way it drives it on a per-item window). */ .oj-advantages__mobileWindow[data-running="false"] .oj-a { animation-play-state: paused !important; } .oj-advantages__mobileScene { display: none; } /* No-JS start state (layout spec §5 rule 2, task brief item 3): the scene matching the initially open accordion item is visible by default — not set by a script, so a visitor with JavaScript off never sees an empty 250px box. `client/advantages.ts` removes `data-default-open` once it runs, so `.is-active` alone decides visibility from then on and this rule never fights a later switch. */ .oj-advantages__mobileScene[data-default-open="true"], .oj-advantages__mobileScene.is-active { display: block; } /* The sliding-lens same-document view transition (`client/advantages.ts` adds/removes `oj-vt-advantages` on `` around the switch, only when motion is allowed and the API exists) — scoped to that class so it never touches the page-to-page transition (`../../styles/base.css`) or leaves rules active once the switch settles. `oj-adv-lens` and each item's own `oj-adv-item-N` (inline style, `HomeAdvantages.tsx`) share the same 360ms/easing as the header's own sliding mark (`../Header/Header.css`) — the items between the old and new open one carry the same name-based groups, so the browser slides them instead of jumping. */ /* Defensive: the UA stylesheet's overlay (`::view-transition`, fixed and full-viewport) is not `pointer-events: none` by default. A click while a switch is still animating is a rare, sub-360ms window (a real click on another item lands well after) — this at least does not make it worse in an engine that already lets clicks reach the live page during one. */ html.oj-vt-advantages::view-transition { pointer-events: none; } /* While the switch animates, the browser hit-tests the whole page as the root element: a quick second tap (a double tap on a phone) landed on `` and selected the nearest word of the page. No selection starts during those 360ms. */ html.oj-vt-advantages { -webkit-user-select: none; user-select: none; } /* Names exist only while a switch runs, so a page-to-page transition (`../../styles/base.css`) never captures the accordion piece by piece. */ html.oj-vt-advantages .oj-advantages__lens { view-transition-name: oj-adv-lens; } html.oj-vt-advantages .oj-advantages__item[data-index="0"] { view-transition-name: oj-adv-item-1; } html.oj-vt-advantages .oj-advantages__item[data-index="1"] { view-transition-name: oj-adv-item-2; } html.oj-vt-advantages .oj-advantages__item[data-index="2"] { view-transition-name: oj-adv-item-3; } html.oj-vt-advantages .oj-advantages__item[data-index="3"] { view-transition-name: oj-adv-item-4; } html.oj-vt-advantages .oj-advantages__item[data-index="4"] { view-transition-name: oj-adv-item-5; } html.oj-vt-advantages .oj-advantages__item[data-index="5"] { view-transition-name: oj-adv-item-6; } html.oj-vt-advantages .oj-advantages__item[data-index="6"] { view-transition-name: oj-adv-item-7; } html.oj-vt-advantages::view-transition-group(*) { animation-duration: 360ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } /* Clip, don't stretch: a closed row and an open card have very different aspect ratios, and the browser's default "scale the snapshot to fit" morph would visibly distort the text while the box grows or shrinks. */ html.oj-vt-advantages::view-transition-old(*), html.oj-vt-advantages::view-transition-new(*) { height: 100%; object-fit: none; object-position: top; } /* The closing and the opening item (`is-switching`, set by `client/advantages.ts`) lose their old look fast, so an item's big and small titles never sit on top of each other for the whole glide. Only those two: an unchanged item cross-fades with itself at equal speed and stays solid, where unequal fades would dim it. */ html.oj-vt-advantages .oj-advantages__item.is-switching { view-transition-class: oj-adv-switching; } html.oj-vt-advantages::view-transition-old(*.oj-adv-switching) { animation-duration: 140ms; } /* Keep it local to the accordion: the root snapshot's rect never actually changes (same viewport before and after), but by default it still cross-fades old-for-new across the *whole page* — switched off, and reset out of the clip-not-stretch rule above (it does not need it: nothing about the root's own box is animating). */ html.oj-vt-advantages::view-transition-old(root), html.oj-vt-advantages::view-transition-new(root) { animation: none; mix-blend-mode: normal; height: auto; object-fit: cover; object-position: center; } @media (max-width: 1279px) { .oj-advantages__inner { padding: 96px var(--oj-page-pad-desktop) 48px; gap: 44px; } .oj-advantages__inner h2 { font-size: 48px; } .oj-advantages__item:not(.is-closed) { grid-template-columns: 96px 1fr 324px; row-gap: 14px; padding: 28px; min-height: 256px; } .oj-advantages__item:not(.is-closed) .oj-advantages__num { padding-top: 0; } .oj-advantages__item:not(.is-closed) .oj-advantages__toggle { font-size: 34px; } .oj-advantages__item.is-closed .oj-advantages__toggle { font-size: 24px; } .oj-advantages__desc { max-width: 420px; font-size: 19px; } .oj-advantages__panelBody { gap: 14px 24px; } .oj-advantages__window { width: 300px; height: 200px; aspect-ratio: auto; --oj-scene-scale: 0.58; } .oj-advantages__item:not(.is-closed) .oj-advantages__window { top: 28px; right: 28px; } } @media (max-width: 767px) { .oj-advantages__inner { padding: 72px 20px 36px; gap: 28px; } .oj-advantages__inner h2 { font-size: 34px; line-height: 1.06; letter-spacing: -0.04em; } .oj-advantages__mobileWindow { display: block; position: relative; box-sizing: border-box; width: 100%; height: 250px; border-radius: 24px; background: var(--oj-surface-2); overflow: hidden; --oj-scene-scale: 0.7; } .oj-advantages__row { grid-template-columns: 44px 1fr 24px; padding: 18px 16px; } .oj-advantages__item:not(.is-closed) { grid-template-columns: 44px 1fr 24px; row-gap: 10px; border-radius: 22px; padding: 20px 16px 22px; /* no window in the open card at this width (hidden below) — the card goes back to its natural, text-driven height */ min-height: 0; } .oj-advantages__lens { border-radius: 22px; } .oj-advantages__num { font-size: 24px; } .oj-advantages__item:not(.is-closed) .oj-advantages__num { padding-top: 1px; } .oj-advantages__toggle { font-size: 19px; } /* the open title keeps the closed size on mobile (HomeMobile.dc.html: 19px), and needs the open rule's own specificity to say so */ .oj-advantages__item:not(.is-closed) .oj-advantages__toggle { font-size: 19px; line-height: 1.15; letter-spacing: -0.025em; } .oj-advantages__plus { font-size: 24px; } .oj-advantages__panelInner { grid-template-columns: 44px 1fr; padding: 0 16px; } /* in a column the desktop flex-basis (320px) would become a height */ .oj-advantages__desc { flex: none; font-size: 17px; } .oj-advantages__item:not(.is-closed) .oj-advantages__desc { max-width: 560px; line-height: 1.5; color: var(--oj-text-2); } .oj-advantages__panelBody { flex-direction: column; padding-bottom: 20px; } /* Per-item windows are hidden below 768 — the shared mobile window above takes over. */ .oj-advantages__window { display: none; } } /* src/components/home/HomeAdvantagesScene.css */ /* The seven advantages scenes (`HomeAdvantagesScene.tsx`), keyframes copied verbatim from `Home2.dc.html`'s own `