/* Scoped under .oilgaz-inquiry-* so it does not collide with the art-design / lk template button styles. */ .oilgaz-inquiry-btn { display: inline-block; padding: 12px 24px; background: #d23030; color: #fff; border: 0; border-radius: 4px; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 120ms ease; } .oilgaz-inquiry-btn:hover, .oilgaz-inquiry-btn:focus { background: #b62828; outline: none; } .oilgaz-inquiry-btn:focus-visible { box-shadow: 0 0 0 3px rgba(210, 48, 48, 0.35); } .oilgaz-inquiry-btn[disabled] { background: #999; cursor: not-allowed; } /* Standalone "Связаться с компанией" CTA at the top of news.detail pages (equipment-detail, technology-detail, customers-detail, etc.) is hidden everywhere — operators contact suppliers through the per-row buttons in the providers list instead. The wrapper class may still leak into the DOM from cached parent component output; hide it unconditionally so stale cache entries can't resurrect the button after we removed the IncludeComponent call. */ .equipment-detail__inquiry-action, .technology-detail__inquiry-action, .customers-detail__inquiry-action, .innovation-detail__inquiry-action, .programm-detail__inquiry-action, .client-detail__inquiry-action, .material-detail__inquiry-action { display: none !important; } /* --- Modal --- */ .oilgaz-inquiry-modal[hidden] { display: none; } /* z-index has to clear the site's fixed header (z-index:30 today) AND any third-party widgets that ship at z-index:9999. The site doesn't define a stacking-context-creating ancestor for the modal in the public templates, so a single very high value keeps it above anything in the chrome without forcing a CSS variable contract. */ .oilgaz-inquiry-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; overflow-y: auto; /* let the viewport scroll the modal itself when the panel is taller than the visible area */ } .oilgaz-inquiry-modal__backdrop { position: fixed; inset: 0; background: rgba(20, 22, 28, 0.62); /* fixed (not absolute) so the backdrop fully covers the viewport even when the modal container itself starts to scroll. */ } /* Apply on when the modal is open. -only overflow:hidden is unreliable on layouts that scroll on the html element (this site does); locking both is the safe choice. */ html.oilgaz-inquiry-modal-open, html.oilgaz-inquiry-modal-open body { overflow: hidden !important; } .oilgaz-inquiry-modal__panel { position: relative; width: 100%; max-width: 560px; max-height: 92vh; /* Panel itself no longer scrolls — scrolling is delegated to `__panel-scroll`. Keeping overflow:hidden here so the scroll hints can be absolute-positioned children of `__panel` without being dragged by scroll, and so the panel's rounded corners still clip inner content. */ overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); box-sizing: border-box; } .oilgaz-inquiry-modal__panel-scroll { max-height: 92vh; overflow-y: auto; padding: 28px 32px 24px; box-sizing: border-box; /* Hide the native scrollbar — the up/down chevrons in the panel are the only scroll affordance the spec calls for. The element still scrolls, both via wheel/touch and programmatically; nothing here disables the scroll behavior itself. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / legacy Edge */ } .oilgaz-inquiry-modal__panel-scroll::-webkit-scrollbar { width: 0; height: 0; background: transparent; /* Chrome / Safari */ } /* --- Scroll-direction hints --- Floating chevrons that appear at the top and bottom edges of the panel when more content exists in that direction. Sit on top of the scrolling content via z-index but never block clicks/scroll thanks to pointer-events:none. JS toggles `is-scrollable-up`/`-down` on the panel; both classes can be active simultaneously when content is taller than the panel and the user has scrolled into the middle. */ .oilgaz-inquiry-modal__scroll-hint { position: absolute; left: 0; right: 0; height: 28px; line-height: 28px; text-align: center; font-size: 16px; color: #1f3a68; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 140ms ease; } .oilgaz-inquiry-modal__scroll-hint--up { top: 0; /* fade the chevron over a soft white-to-transparent gradient so it doesn't visually clash with the form labels behind it */ background: linear-gradient(to bottom, rgba(255,255,255,0.96) 40%, rgba(255,255,255,0)); border-radius: 8px 8px 0 0; } .oilgaz-inquiry-modal__scroll-hint--down { bottom: 0; background: linear-gradient(to top, rgba(255,255,255,0.96) 40%, rgba(255,255,255,0)); border-radius: 0 0 8px 8px; } .oilgaz-inquiry-modal__panel.is-scrollable-up .oilgaz-inquiry-modal__scroll-hint--up, .oilgaz-inquiry-modal__panel.is-scrollable-down .oilgaz-inquiry-modal__scroll-hint--down { opacity: 1; } .oilgaz-inquiry-modal__close { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: #999; cursor: pointer; /* 44×44 hits the iOS / Material tap-target minimum so the close control is reliably reachable on touch devices. */ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .oilgaz-inquiry-modal__close:hover { color: #444; } .oilgaz-inquiry-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 58, 104, 0.25); border-radius: 4px; } .oilgaz-inquiry-modal__header { margin-bottom: 18px; } .oilgaz-inquiry-modal__title { font-size: 22px; line-height: 1.25; margin: 0 0 4px; color: #1f3a68; font-weight: 700; } .oilgaz-inquiry-modal__supplier { font-size: 14px; margin: 6px 0 0; color: #1f3a68; font-weight: 600; } .oilgaz-inquiry-modal__product { font-size: 13px; margin: 4px 0 0; color: #4a5562; } /* --- Form --- */ .oilgaz-inquiry-form { display: block; } .oilgaz-inquiry-form__row { margin-bottom: 14px; } .oilgaz-inquiry-form__label { display: block; font-size: 13px; color: #1f3a68; margin-bottom: 6px; font-weight: 700; } .oilgaz-inquiry-form__req { color: #e92525; margin-left: 2px; } .oilgaz-inquiry-form__input { width: 100%; padding: 11px 14px; border: 1px solid #d6dde6; border-radius: 8px; font: inherit; font-size: 14px; color: #1a1d21; background: #fff; box-sizing: border-box; } .oilgaz-inquiry-form__input::placeholder { color: #9aa3b0; opacity: 1; } .oilgaz-inquiry-form__input:focus { border-color: #1f3a68; outline: none; box-shadow: 0 0 0 2px rgba(31, 58, 104, 0.18); } .oilgaz-inquiry-form__textarea { resize: vertical; min-height: 96px; line-height: 1.45; } .oilgaz-inquiry-form__error { display: block; color: #c0392b; font-size: 12px; line-height: 1.2; margin-top: 4px; } /* Collapse the error slot when empty so it does not permanently reserve ~14px under every field — that previously bloated the form even when there were no errors. The slot is filled by the JS validators and grows back to its single-line height of ~14px when an error appears. Setting margin: 0 prevents the 4px margin-top from leaving a phantom gap below the input in the empty state. */ .oilgaz-inquiry-form__error:empty { display: none; margin: 0; } .oilgaz-inquiry-form__row--has-error .oilgaz-inquiry-form__input, .oilgaz-inquiry-form__row--has-error .oilgaz-inquiry-form__drop { border-color: #c0392b; } .oilgaz-inquiry-form__row--has-error .oilgaz-inquiry-form__label { color: #c0392b; } /* --- Drag-drop file area --- Per the spec the file row has three pieces stacked above the drop target: a bold label, a single muted hint line, and the drop area itself. Inside the drop area the paperclip icon + "Прикрепить файл" render as a centered link-style row, with "или перетащите файл сюда" in muted gray below it. */ .oilgaz-inquiry-form__file-hint { display: block; font-size: 12px; color: #8b95a3; margin: -4px 0 8px; line-height: 1.4; } .oilgaz-inquiry-form__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 16px; border: 1.5px dashed #cfd4db; border-radius: 8px; background: #fff; color: #4a5562; text-align: center; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; box-sizing: border-box; } .oilgaz-inquiry-form__drop:hover { border-color: #1d8afa; background: #f4f9ff; } .oilgaz-inquiry-form__drop--active { border-color: #1d8afa; background: #e8f2ff; } .oilgaz-inquiry-form__drop--has-file { border-style: solid; border-color: #1d8afa; background: #f4f9ff; color: #1f3a68; } /* When a file is attached, the chosen filename takes the place of the "Прикрепить файл" link text. The "or drop a file here" hint would be misleading at that point, so hide it; the inline clear button takes its slot below the filename. */ .oilgaz-inquiry-form__drop--has-file .oilgaz-inquiry-form__drop-or { display: none; } .oilgaz-inquiry-form__drop--has-file .oilgaz-inquiry-form__drop-text { color: #1f3a68; } .oilgaz-inquiry-form__drop-row { display: inline-flex; align-items: center; gap: 8px; color: #1d8afa; font-weight: 600; } .oilgaz-inquiry-form__drop-icon { display: inline-flex; align-items: center; color: #1d8afa; } .oilgaz-inquiry-form__drop-text { font-size: 14px; font-weight: 600; color: #1d8afa; word-break: break-word; } .oilgaz-inquiry-form__drop-or { display: block; font-size: 12px; color: #8b95a3; } .oilgaz-inquiry-form__drop-clear { margin-top: 4px; background: transparent; border: 0; color: #c0392b; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; } .oilgaz-inquiry-form__file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* JS-managed per-file list. Rendered below the drop area; one

per attached file with filename + × remove button. Empty (no files) state is rendered as an empty

wrapper is rendered layout- transparent (display:contents) so its children — chip and button — become direct grid items / positioned elements of __header-block. Click semantics still work: any click on chip or button bubbles up to the

and triggers the anchor scroll. When there are no providers (рис. 7) the chip isn't rendered at all — the button is the only CTA element, still pinned at bottom-right over the underline level. */ /* Header block becomes the positioning anchor for the chip+button stack. Reserve just enough bottom padding to clear the absolutely-positioned CTA stack (chip on top, button below, anchored at right/bottom with translateY(24px)). Stack height is ~78px (chip 30 + gap 8 + button 40), shifted down 24px — so the chip top sits 54px above the header-block bottom edge. 60px padding clears that with a small margin while avoiding the giant empty band the old 100px value was leaving inside the header on technology / projects / customers pages. */ .technology-detail__header-block:has(.oilgaz-providers-cta), .innovations-detail__header-block:has(.oilgaz-providers-cta), .projects-detail__header-block:has(.oilgaz-providers-cta), .customers-detail__header-block:has(.oilgaz-providers-cta), .oilgaz-cta-header-block:has(.oilgaz-providers-cta) { position: relative; padding-bottom: 60px; /* QA flagged the CTA button visually touching the first paragraph of the article description because the button is translateY(24px)'d below the header-block bottom edge while .article-content-snippet starts right at that edge. 40px margin-bottom on the header-block clears the 24px translate overflow + adds ~16px breathing room before the article. */ /* QA slide C wanted a small, deliberate gap between the CTA button bottom and the first paragraph of the article — not a huge band. 56px on the header-block leaves ~32px of clean whitespace below the button (after subtracting the button's translateY(24px) overflow), matching the slide's green-box reference. */ margin-bottom: 56px; } /* On equipment/programms the

CTA is wrapped in .oilgaz-providers-cta-flow as a flow-after-H1+number row; neutralize that wrapper so the inner

can position itself directly. */ .oilgaz-cta-header-block .oilgaz-providers-cta-flow { display: block; margin: 0; } /* The actual