/** * 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 .page-main and .columns to full viewport width, then 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. * * .page-main must also be expanded — it carries max-width + padding in Hyvä * which would otherwise prevent full-bleed components from reaching the edges. */ :is(.cms-page-view, .cms-home) .page-main { max-width: 100%; padding-inline: 0; margin-top: 0; } :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; } /* ── Content constraint wrapper ─────────────────────────────────────────── * Use inside full-width / full-bleed sections to constrain content to the * same visual column as the CSS grid's center column. * * Formula matches grid column 2: min(80rem, calc(100% - 3rem)) * - viewport > ~83rem → gutters = (100% - 80rem) / 2 * - viewport ≤ ~83rem → gutters = 1.5rem (half of the 3rem gap) */ .kreng-content-wrap { padding-inline: max(1.5rem, calc((100% - 80rem) / 2)); } /* ── Hero ───────────────────────────────────────────────────────────────── * Only set display:flex here. Alignment (items-start/center/end) and * justification are controlled by Tailwind classes in each template so * individual projects can customise without overriding this file. */ .kreng-hero { display: flex; } .kreng-hero__content { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; padding-top: 3rem; padding-bottom: 4rem; } @media (min-width: 640px) { .kreng-hero__content { padding-inline: 2.5rem; padding-bottom: 5rem; } } @media (min-width: 1024px) { .kreng-hero__content { padding-inline: 4rem; } } /* ── 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; } /* ── Component visibility ───────────────────────────────────────────────── * Visibility wrappers are regular block-level divs. The CSS Grid > * rule * assigns grid-column:2 (center column) automatically. Full-width and * full-bleed components get style="grid-column:1/-1" applied inline by * ContentRenderer::buildGridColumnStyle() so the wrapper spans correctly * without needing display:contents (which breaks CSS > child selectors). */ /* Device visibility — hide via media queries */ @media (max-width: 767px) { [data-kreng-visible-devices]:not([data-kreng-visible-devices~="mobile"]) { display: none !important; } } @media (min-width: 768px) and (max-width: 1023px) { [data-kreng-visible-devices]:not([data-kreng-visible-devices~="tablet"]) { display: none !important; } } @media (min-width: 1024px) { [data-kreng-visible-devices]:not([data-kreng-visible-devices~="desktop"]) { display: none !important; } } /* Customer group visibility — applied by kreng-cms-visibility.js */ .kreng-vis-group-hidden { display: none !important; } /* ── Tabs component ─────────────────────────────────────────────────────── * Desktop: standard underline tab nav. * Mobile (<768px): tab nav hidden; accordion buttons shown instead. */ @media (max-width: 767px) { .kreng-tabs__nav { display: none; } } @media (min-width: 768px) { .kreng-tabs__acc-btn { display: none; } }