/* ImagineIf — the layout floor. * * WHY THIS FILE EXISTS. `site.css` is the client's own 117 KB of hand-written CSS with its * selectors renamed off Divi (1,081 of 1,095 rules). Those rules were written to layer ON TOP OF * Divi's base stylesheet — its reset, its flexbox grid, its module defaults — and a selector * rename does not bring that base across. This is the replacement for it: the smallest floor * those 1,081 rules need in order to mean what they meant. * * SCOPE DISCIPLINE. Nothing here is a design choice. Every value is either measured from the * live site (the 1080px content width, the 767px breakpoint, the gutter) or is the arithmetic a * column fraction requires. §5.1: a token we invent is a visual change we were not paid to make. * * COLUMN VARIANTS. Exactly the nine that appear in the migrated content, no more: * 4_4 (144x) 1_2 (144x) 1_3 (93x) 1_5 (85x) 1_6 (12x) 1_4 (6x) 2_5 (3x) 3_5 (3x) 2_3 (1x) * A variant with no width rule is a column that collapses, so `build.py` guard 1 asserts every * variant used has a rule here. */ /* ---- reset: only what Divi's base provided and site.css assumes ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } img, video, iframe { max-width: 100%; height: auto; border: 0; } a { text-decoration: none; color: inherit; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } p { margin: 0 0 1em; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 500; } table { border-collapse: collapse; width: 100%; } /* ---- the section / row / column skeleton ---- * Divi's own measurements: a section is full-bleed with vertical padding, a row is a centred * 1080px track, columns are flex children separated by a 5.5% gutter (Divi's gutter width 3). */ .sec { position: relative; padding: 4% 0; } .row { width: 80%; max-width: 1080px; margin: 0 auto; display: flex; /* NOWRAP on purpose — this is what Divi's .iif-row does, measured at 1440 on the live site: * 4 rows nowrap/flex, 4 nowrap/block, 1 wrap/flex; ours had all 9 wrapping. A Divi column is a * flex item that SHRINKS to fit the line (flex-shrink:1), so three 1/3 columns whose images are * intrinsically 527+404+437 = 1368 get squeezed into the 1238 row as 458+351+380. With wrap they * instead keep their content width and spill onto extra lines: on the-happy-homeworkers-club * that turned live's tidy 3-across gallery into 2+1+1+1 and the page ran +866px. Nineteen * desktop pages carried an excess in the same 820-890px band. * Mobile re-enables wrap below, because live wraps there too (5 wrap/flex at 390) — that is how * the 100%-width columns stack instead of overflowing. */ flex-wrap: nowrap; align-items: flex-start; position: relative; } /* no clearfix: .row is a flex container, so a float clear would be dead code. (Flagged by an * independent reviewer — it was carried over from habit, not from anything Divi needed.) */ .row-inner { width: 100%; max-width: none; margin: 0; } /* Divi's "equal columns" row stretches its columns to the row's height. That is not cosmetic: a column whose only content is a background image (iif-column-empty) collapses to 1px without it, which is how the hero photo on /bespoke-education-experience/ went missing. */ .row.iif-equal-columns { align-items: stretch; } /* Our generic list typography is for CONTENT lists. Divi resets lists to margin:0;padding:0 and builds the nav out of