/* =========================================================================== CE-19 · Siatka bloków tekstowych (text grid) Root: section.ce-text-grid – or a div inside a section whose H2 stands outside the root (then data-ce-from="#section-id") Parts: __title (optional H2, with .lf-h2), __grid, __item (H3 + paragraph, no frame and no fill; an in pair-with-number), __heading (H3), __text, __num (pair-with-number: "06"), __stat, __stat-big, __stat-label (pair-with-number: the figure by the second block), __more (pair-with-number: the link cue "Zobacz pozycję 06 →" – small type, underlined like .lf-link) Variants: three-columns (O nas: three blocks in a row) · pair-with-number (Home: offer items 06 and 07 as links, with "80%+" by the second one) · photo-cards (O nas, 26.09: a photo over each block, white type on #1A1A1C; with three-columns; parts __eyebrow, __media, __img) Layout: 2 × 2 from 640 px → 1 column Base: uslugi.html#zespol-bloki · registry: ce-registry.js → CE-19 =========================================================================== */ .ce-text-grid__title { margin-bottom: var(--sp-blk); } .ce-text-grid__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 4rem); } .ce-text-grid__heading { font-family: var(--font-heading); font-size: var(--t-h3); line-height: 1.25; letter-spacing: var(--track-h3); font-weight: 500; text-wrap: balance; } .ce-text-grid__text { margin-top: .5rem; max-width: 52ch; font-size: .9375rem; color: var(--ink-2); } @media (min-width: 640px) { .ce-text-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- variants ------------------------------------------------------------ */ /* three-columns: three blocks in a row from 900 px; one column below. */ @media (min-width: 640px) { .ce-text-grid[data-ce-variant~="three-columns"] .ce-text-grid__grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 900px) { .ce-text-grid[data-ce-variant~="three-columns"] .ce-text-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* pair-with-number: two blocks that are links, each opened by a rule. */ .ce-text-grid[data-ce-variant~="pair-with-number"] .ce-text-grid__item { display: block; padding-top: 1.5rem; border-top: 1px solid var(--ink); color: inherit; text-decoration: none; } .ce-text-grid[data-ce-variant~="pair-with-number"] a.ce-text-grid__item:hover .ce-text-grid__heading { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } .ce-text-grid__num { display: block; margin-bottom: .75rem; font-size: var(--t-sm); letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; } .ce-text-grid__stat { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; } .ce-text-grid__stat-big { font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: var(--track-hero); font-weight: 500; color: var(--ink); } .ce-text-grid__stat-label { font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); } /* The link cue under a block: the whole block is the link, so this is a span dressed as .lf-link – thicker underline while the block is hovered. */ .ce-text-grid__more { display: inline-block; margin-top: 1rem; font-size: var(--t-sm); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .ce-text-grid[data-ce-variant~="pair-with-number"] a.ce-text-grid__item:hover .ce-text-grid__more { text-decoration-thickness: 2px; } /* photo-cards (O nas, 26.09.2026 – Figma crear-v2.0, frame 608:1127, node 608:1366), with three-columns: a dark band #1A1A1C, 64 px from the top, 80 px to the bottom. The section title is the eyebrow „• CO Z TEGO WYNIKA DLA PROJEKTU” (an H2 with .lf-eyebrow, #B9B9B9 at .7), 120 px to three blocks 420 px wide spread across the width: a photo 420 × 350, 40 px, the H3 in 28 px Expanded Regular (−1.12 px, white, two lines), 16 px, the text in 18 px (line 1.38, white at .6). 1:1 at 1440 px, proportionally below; ≤ 900 px one column. Scroll-in (data-appear on __media, the kit sets .is-in): the photo is uncovered from the top down while it settles from 1.2 to 1 (as the CE-27 cards, ref.digital), 0.9 s power2.out, the blocks 120 ms apart; the text fades in after it. Reduced motion: shown at once. */ .ce-text-grid[data-ce-variant~="photo-cards"] { padding-block: clamp(48px, 4.44vw, 64px) clamp(56px, 5.56vw, 80px); background: #1A1A1C; color: #fff; } .ce-text-grid[data-ce-variant~="photo-cards"] .ce-text-grid__eyebrow { margin-bottom: clamp(56px, 8.33vw, 120px); color: rgba(185, 185, 185, .72); } .ce-text-grid[data-ce-variant~="photo-cards"] .ce-text-grid__grid { gap: 48px clamp(24px, 4.58vw, 66px); } .ce-text-grid__media { position: relative; aspect-ratio: 420 / 350; overflow: hidden; margin-bottom: clamp(24px, 2.78vw, 40px); background: #26262a; } .ce-text-grid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ce-text-grid[data-ce-variant~="photo-cards"] .ce-text-grid__heading { max-width: 10.2em; /* two lines, as in the design */ font-size: clamp(1.375rem, 1.944vw, 28px); font-weight: 400; line-height: 1.2; letter-spacing: -.04em; /* −1.12 px at 28 px */ color: #fff; } .ce-text-grid[data-ce-variant~="photo-cards"] .ce-text-grid__text { margin-top: 16px; max-width: none; font-size: clamp(1rem, 1.25vw, 18px); line-height: 1.38; letter-spacing: -.01em; color: rgba(255, 255, 255, .6); } @media (prefers-reduced-motion: no-preference) { .cr-js .ce-text-grid__media[data-appear] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out-power2) var(--appear-delay, 0ms); } .cr-js .ce-text-grid__media[data-appear] .ce-text-grid__img { scale: 1.2; transition: scale 1.1s var(--ease-out-power2) var(--appear-delay, 0ms); } .cr-js .ce-text-grid__media[data-appear].is-in { clip-path: inset(0); } .cr-js .ce-text-grid__media[data-appear].is-in .ce-text-grid__img { scale: 1; } }