/* «Безбар'єрність» — Figma `3651:13595` (1440) and `4429:31316` (390), ТЗ §4.10, plan 06 task 9. Seven kinds of block, in the frame's order: · the banner `3977:17454` / `4429:31418` — the H1 with its paragraph and four cards, each a photograph with the shared poster band across its bottom and «Дізнатися більше» pointing at a section of this page; · «Постійні елементи доступності театру» `3671:14030` / `4430:31648` — a card per `access_feature`, two photographs wide or one narrow; · «про безбар'єрність Театру у відео» `4106:11469` / `4430:31678`; · the three service sections `3671:14031`, `3671:14079`, `3673:14131` — the same composition three times: photograph and telephone on the left, that service's questions on the right; · «Як підготуватися до візиту» `3673:14445` / `4430:31844` — five numbered steps; · «Залишилися питання?» `3673:14446` / `4430:31913` — the shared FAQ component in its own frame, with a sentence and the questionnaire link in the heading's column; · «Потрібна допомога?» `3673:14736` — the dark block that closes the page. Widths come from the shared column (container.css): the frame draws the banner and the features heading at x=57 and everything else at x=56, so every block sits on the shared 1328 column and the 1 px is a residual (task-9-report.md). Vertical rhythm: 120 between blocks at 390, 180 at 1440, measured between the frames' own boxes; the dark block alone sits flush under the grey FAQ band, as the frame draws it. Type comes from tokens.css, which steps at the same breakpoints the file draws. There is no 768 or 1920 frame for this page (inventory.md), so the 390 layout stays fluid up to 1440 and the 1440 one grows with the column above it. Animations — the four annotation blocks of the 22.09 .fig (animations.md, «Безбар'єрність»): parallax on the banner cards (`4550:25438`) and on the feature photographs (`4550:25448`) through the shared `c-parallax` (parallax.css), and `position: sticky` on the service photograph (`4550:25445`) and on the FAQ heading (`4550:25451`). Both sticky effects are off under `prefers-reduced-motion` and `html[data-motion=reduced]`: they are what the reader scrolls past, and a layer that stays put while the page moves is motion (accessibility-ua.md §4). The accordion itself has no transition — `interactions` is empty on every node of these frames. */ /* ================================================================== банер */ /* «Hero» 3977:17454 starts at y=0 and its own 136 px of top padding puts the breadcrumbs under the bar (`3651:13596`), which carries the same #F3F4F6 as an override fill. The banner used to paint that strip itself, from below, with a `::before` carried up over the header's box — one colour drawn by two things, and only one of them stayed put: the header is sticky, the banner is not, so on the way back up the menu row met the feature photographs instead of the grey. The header now carries the grey, as the frame has it (`podil_header_variant()` → 'gray', inc/parts/accessibility.php); the strip is gone and with it the second mechanism (client fix ПР-10). */ .access-hero { padding-inline: var(--page-gutter); padding-block: 0 80px; background: var(--color-neutral-100); } .access-hero__inner, .access-features__inner, .access-video__inner, .access-topic__inner, .access-steps__inner, .access-help__inner { margin-inline: auto; } .access-hero__inner { display: flex; flex-direction: column; /* 4429:31418 itemSpacing — the head block → the cards. */ gap: 40px; } /* 4429:31417 — breadcrumbs → the H1 block, in a 292 column of its own. */ .access-hero__head { display: flex; flex-direction: column; gap: 24px; max-width: 292px; } /* The shared breadcrumbs is a block `