/** * Kreng CMS — Frontend Styles * Implements a 3-tier width system for CMS components on CMS pages: * * Normal — component within the standard content column * Full Width (.kreng-width-full) — background edge-to-edge, content constrained * Full Bleed (.kreng-width-full-bleed) — everything edge-to-edge * * Uses CSS Grid (Hyvä Method 3) instead of the legacy negative-margin hack. */ /* ── CSS Grid layout — CMS pages only ──────────────────────────────────── * On CMS pages Magento adds `cms-page-view` to ; the homepage gets * `cms-home` instead. We target both. * We expand .columns to full viewport width and turn .column.main into a * 3-column grid: [1fr] [content ≤ 80rem] [1fr] * The two 1fr side columns act as padding for "Normal" components and * collapse to 0 on narrow viewports so content fills the screen. */ :is(.cms-page-view, .cms-home) .columns { max-width: 100%; padding-inline: 0; margin-inline: 0; } :is(.cms-page-view, .cms-home) .column.main { display: grid; grid-template-columns: minmax(0, 1fr) min(80rem, calc(100% - 3rem)) minmax(0, 1fr); } /* Default (Normal): place every direct child in the center column */ :is(.cms-page-view, .cms-home) .column.main > * { grid-column: 2; } /* Full Width + Full Bleed: span all 3 columns (viewport edge-to-edge) */ :is(.cms-page-view, .cms-home) .column.main > .kreng-width-full, :is(.cms-page-view, .cms-home) .column.main > .kreng-width-full-bleed { grid-column: 1 / -1; } /* ── Hero ───────────────────────────────────────────────────────────────── * Flexbox centering is declared in the template; we only add display here * as a safety net for non-CMS-page contexts where the grid doesn't apply. */ .kreng-hero { display: flex; align-items: center; justify-content: center; } /* ── Features grid ──────────────────────────────────────────────────────── * Subtle separator from preceding sections. */ .kreng-features-grid { border-top: 1px solid #f3f4f6; } /* ── Two-column section ─────────────────────────────────────────────────── * Ensure columns can shrink below their content size on narrow viewports. */ .kreng-two-column__left, .kreng-two-column__right { min-width: 0; } /* ── Stats bar number styling ───────────────────────────────────────────── * Ensure stat numbers look sharp across fonts. */ .kreng-stats-bar .kreng-stat-number { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }