/** * Полоса доверия под шапкой главной: Доставка / Оплата / Возврат / Самовывоз. * * The block used to be a centred flex row: four groups with `justifyContent: center` * inside an `alignfull` wrapper. Two things went wrong with that. * * 1. Alignment. Centring a row whose items are only as wide as their text left the bar * huddled in the middle of a 1280px viewport (measured: content from 264px to 462px) * while the logo above it and the hero heading below it both start at 64px — the * theme's content edge. The bar read as floating debris rather than as part of the * page grid. The wrapper is now a `constrained` group, so WordPress caps and centres * its single child at exactly the same content width the hero columns use, and the * four items are a 4x1fr grid filling that width — first item flush left, last flush * right, dividers landing on an even rhythm. * * 2. Wrapping. `flexWrap: wrap` plus a `border-left` on every item but the first meant * that as soon as the row wrapped (tablet and below) an item could start a new line * still carrying a vertical divider, with nothing to its left to divide. The grid * below re-assigns the dividers per breakpoint instead: vertical between columns, * horizontal between rows. * * Typography and the icons live here rather than in the block's inline styles so the * bar can step down on small screens; the block markup keeps only the palette colour * classes, which the editor needs in order to show the right colours. * * Loaded on the front page only (see the plugin's enqueue) — this is the only page the * block appears on. Priority 20 lands it after Blocksy's global.css. */ /* ---------- Раскладка ---------- */ /* One row of four equal columns at the theme content width. The wrapper group is `alignfull`, so its bottom border still spans the viewport edge to edge. */ .ds-trust-bar__grid { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } /* Each item: icon in a fixed first column, label and value stacked in the second. The icon is placed explicitly across both rows — auto-placement would otherwise put the label beside it and push the value onto its own row. The items stretch to the row height (the grid's default `align-items`) and centre their own content instead of centring themselves: on a narrow screen a value that wraps to two lines makes its row taller, and a centred item would then sit with its top edge — and its divider — a few pixels off from its neighbour's. */ .ds-trust-bar__item { display: grid; grid-template-columns: 20px minmax( 0, 1fr ); align-items: center; align-content: center; column-gap: 12px; padding-inline: 28px; } .ds-trust-bar__item:first-child { padding-inline-start: 0; } .ds-trust-bar__item:last-child { padding-inline-end: 0; } /* Divider between neighbouring columns, never before the first one. */ .ds-trust-bar__item + .ds-trust-bar__item { border-inline-start: 1px solid var( --theme-palette-color-5, #bbc4bc ); } /* ---------- Типографика ---------- */ .ds-trust-bar__label { grid-column: 2; margin: 0 0 3px; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .ds-trust-bar__value { grid-column: 2; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; } /* ---------- Иконки ---------- */ /* Drawn as a mask over a palette-coloured box rather than as an inline , so the icon follows the accent colour if the palette changes and needs no markup of its own inside the block (nothing extra for the editor to trip over). Each item sets only its own `--ds-trust-icon`; the shared box below does the rest. */ .ds-trust-bar__item::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; background-color: var( --theme-palette-color-1, #227f53 ); -webkit-mask-image: var( --ds-trust-icon ); mask-image: var( --ds-trust-icon ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .ds-trust-bar__item--delivery { --ds-trust-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h11v10h-11z'/%3E%3Cpath d='M13.5 10h3.6l3.4 3.2V16h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E" ); } .ds-trust-bar__item--payment { --ds-trust-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3Cpath d='M6 14.5h3'/%3E%3C/svg%3E" ); } .ds-trust-bar__item--returns { --ds-trust-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h10.5a4.5 4.5 0 1 1 0 9H9'/%3E%3Cpath d='M7.5 5 4 8.5 7.5 12'/%3E%3C/svg%3E" ); } .ds-trust-bar__item--pickup { --ds-trust-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 10.5c0 5.5-7 11-7 11s-7-5.5-7-11a7 7 0 0 1 14 0z'/%3E%3Ccircle cx='12' cy='10.5' r='2.6'/%3E%3C/svg%3E" ); } /* ---------- Планшет: 2 x 2 ---------- */ /* Four columns of Russian labels stop fitting well before the theme's 999px breakpoint, so the bar becomes a 2x2 block: vertical divider between the two columns, horizontal divider between the two rows. The row gap above a divider matches the padding below it, so each rule sits centred in its own gutter. The range is closed at the bottom (690px) rather than left open, because the phone layout below is a different arrangement, not a tweak of this one — bounding both keeps each set of divider rules to itself instead of overriding the other's. */ @media only screen and ( min-width: 690px ) and ( max-width: 999px ) { .ds-trust-bar__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); row-gap: 18px; } .ds-trust-bar__item { padding-inline: 20px; } .ds-trust-bar__item:nth-child( odd ) { padding-inline-start: 0; } .ds-trust-bar__item:nth-child( even ) { padding-inline-end: 0; border-inline-start: 1px solid var( --theme-palette-color-5, #bbc4bc ); } .ds-trust-bar__item:nth-child( n + 3 ) { padding-top: 18px; border-top: 1px solid var( --theme-palette-color-5, #bbc4bc ); } } /* ---------- Телефон: список в одну колонку ---------- */ /* Two columns on a 375px screen leave each value about 122px, and the longest of them ("СДЭК / Почта России") needs ~140px at 13px — so a 2x2 phone layout means two of the four values wrap mid-phrase ("Пн–Пт 11:00– / 17:00"). One column has room for all of them on one line: label on the left, value flushed right, the way a spec list reads. Four short rows also come out no taller than the wrapped 2x2 did. */ @media only screen and ( max-width: 689px ) { .ds-trust-bar__grid { grid-template-columns: minmax( 0, 1fr ); } .ds-trust-bar__item { grid-template-columns: 18px auto minmax( 0, 1fr ); align-items: center; column-gap: 10px; padding-block: 11px; padding-inline: 0; } /* The wrapper already pads the whole bar by 18px, so the outer rows drop their own vertical padding and only the gutters around the dividers keep it. */ .ds-trust-bar__item:first-child { padding-top: 0; } .ds-trust-bar__item:last-child { padding-bottom: 0; } .ds-trust-bar__item::before { grid-row: 1; width: 18px; height: 18px; } .ds-trust-bar__item + .ds-trust-bar__item { border-inline-start: 0; border-top: 1px solid var( --theme-palette-color-5, #bbc4bc ); } .ds-trust-bar__label { grid-column: 2; margin: 0; font-size: 10px; } .ds-trust-bar__value { grid-column: 3; font-size: 13px; text-align: end; } }