/* ============================================================ LAYOUT GRID — the Figma 12-column grid, bound to Bootstrap ------------------------------------------------------------ The page is drawn in Figma against 12 columns on a 24px gutter inside a 1280 content box, inset from the viewport by the page gutter (80 desktop / 40 tablet / 16 mobile). Sections used to reproduce that by hand — `margin-left: 217px`, `width: 57.55%`, `width: 302px` — numbers that are only correct at one viewport width and drift everywhere else. This file replaces the arithmetic with Bootstrap's real grid, so an element is *placed on* a column (`.col-3`, `.offset-5`) rather than pushed to where a column happens to be. Bootstrap's grid is not an approximation of the Figma one, it is the same grid: a .col-n resolves to n(W+g)/12 - g wide, which is algebraically identical to "n columns plus the n-1 gutters between them". So the columns land on the Figma overlay at every width, not just at 1280. Depends on bootstrap-grid.min.css being loaded first. ============================================================ */ /* ── Gutter ──────────────────────────────────────────────────── Bootstrap drives every row and column off --bs-gutter-x. Pin it to our token so the grid and the design file share one number. Rows apply a -12px side margin and columns a +12px side padding, which cancel at the container edge — so the first and last columns sit flush with the content box while adjacent columns are held 24px apart. That is exactly the Figma gutter. */ .row { --bs-gutter-x: var(--grid-gutter); } /* ── Reaching the grid from below a column ───────────────────── A few elements sit one level under a .col-* and so cannot be a column themselves, yet still have to start on a page column. Nested rows cannot place them: a row inside a .col-9 re-divides those 9 columns into 12 of its own, so page column 6 lands at nested column 2.67 — not whole, not reachable with .offset-*. They are placed with percentages of their own parent instead, via the identity at the top of this file. If a parent is P wide and the page content box is W, then P = n(W+g)/12 - g, so (W+g) = 12(P+g)/n — every page-grid distance can be rewritten in terms of P and the gutter alone. Concretely, inside a 9-column parent, one column-plus-gutter is (100% + g)/9. Deliberately NOT a viewport-unit token: 100vw includes the scrollbar, which put every derived value ~15px out. ============================================================ */ /* ── Container ───────────────────────────────────────────────── Bootstrap's own .container tops out at 1320 (xxl) / 1140 (xl), neither of which is our 1280, and it steps in fixed jumps rather than tracking --page-gutter. So we use our own: full width, inset by the page gutter, capped at the content box. `.k-grid > .row` is then the 12 columns, edge to edge. */ .k-grid { width: 100%; max-width: var(--grid-max); margin-inline: auto; } /* Section-level wrapper: the page gutter plus the container above. Use on a section that has no padding rule of its own. */ .k-section { padding-inline: var(--page-gutter); } /* ── Debug overlay ───────────────────────────────────────────── Append ?grid to any URL to paint the 12 columns over the page, so the build can be checked against the Figma overlay at any width. Off unless asked for, and costs nothing when absent. The inline script in sets .grid-debug on . */ .grid-debug::before { content: ""; position: fixed; top: 0; bottom: 0; z-index: 9999; pointer-events: none; /* Inset to the content box the same way a section is, so the overlay tracks --page-gutter across breakpoints on its own and never has to know the viewport width. */ left: var(--page-gutter); right: var(--page-gutter); max-width: var(--grid-max); margin-inline: auto; /* One band per column. Percentages in gradient stops resolve against the gradient line — this element's own width, i.e. the content box W — so a column is (100% - 11g)/12 and the period is a column plus a gutter, (100% + g)/12. Exact at any width. */ background-image: repeating-linear-gradient( to right, rgba(224, 49, 49, 0.16) 0, rgba(224, 49, 49, 0.16) calc((100% - 11 * var(--grid-gutter)) / 12), transparent calc((100% - 11 * var(--grid-gutter)) / 12), transparent calc((100% + var(--grid-gutter)) / 12) ); }