/* Theme Name: Sego Leadership — Divi Child Description: Divi child theme for the Sego Leadership website. Loads brand fonts and design tokens, and applies base overrides on top of Divi. Visual reference: the React prototype in this repo + Figma "WLI Website Design System". Template: Divi Version: 1.25.4 Author: Sego Leadership build team */ /* Tokens are defined in tokens.css (loaded before this file). */ /* --------------------------------------------------------------------------- Base typography Literata = headings. The body font is whatever SEGO_BODY_FONT resolves to — this file only ever consumes the token, never names a family. To change it, see inc/fonts/fonts.php (mode table + licensing), not this rule. --------------------------------------------------------------------------- */ /* `html body` outranks Divi's customizer-generated `body` rule (loaded later at equal specificity) so the token stack — and its fallbacks — always win. */ html body, body .et_pb_text, body .et_pb_blurb_content { font-family: var(--sego-font-body); color: var(--sego-text-primary); } /* Form controls do NOT inherit font-family from body — the UA sheet sets its own on them — so they have to be named or they fall to the browser default. Divi used to name them for us: its customizer CSS emits `body,input,textarea,select{font-family:var(--et_global_body_font)}`, which is the ONLY consumer of that variable. Theme Options now sets the body font to a websafe family so Divi stops shipping 336 unused @font-face rules (see inc/fonts/fonts.php), which left these three elements pointing at Arial while everything else followed SEGO_BODY_FONT — visible the moment the Newsletter and Contact forms land. Claiming them here makes the token authoritative in every mode. `html` prefix outranks Divi's bare element selectors; font-family only, because Divi's rule never set colour on them and this must stay a no-op. */ html input, html textarea, html select { font-family: var(--sego-font-body); } h1, h2, h3, h4, h5, h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3 { font-family: var(--sego-font-heading); font-weight: 500; color: var(--sego-text-primary); } /* Type ramp per responsive-conventions.md (H1 36→30→26 · H2 28→24→22 · H3 20→18→18). `body` prefix outranks Divi's customizer-generated heading scale (which would derive H2≈31/H3≈26 from the H1 size). Hero display sizes are per-section, not global. */ body h1 { font-size: 36px; line-height: 1.2; } body h2 { font-size: 28px; } body h3 { font-size: 20px; } @media (max-width: 980px) { body h1 { font-size: 30px; } body h2 { font-size: 24px; } body h3 { font-size: 18px; } } @media (max-width: 767px) { body h1 { font-size: 26px; } body h2 { font-size: 22px; } } /* --------------------------------------------------------------------------- Buttons — radius 6px, no default Divi arrow --------------------------------------------------------------------------- */ .et_pb_button { border-radius: var(--sego-radius-button); font-family: var(--sego-font-body); font-weight: 600; } /* --------------------------------------------------------------------------- Persona pill (reusable utility for label chips) Usage: apply .sego-pill plus one of the color modifiers to a Text module. --------------------------------------------------------------------------- */ .sego-pill { display: inline-block; border-radius: var(--sego-radius-pill); padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sego-white); } .sego-pill--plum { background: var(--sego-plum-mid); } .sego-pill--coral { background: var(--sego-coral); } .sego-pill--teal { background: var(--sego-teal-dark); } /* Eyebrow label above sections (gold, all-caps) */ .sego-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sego-gold); } /* Quote left-border treatment (TAPPD story) */ .sego-quote { border-left: 3px solid var(--sego-teal); padding-left: 24px; font-family: var(--sego-font-heading); font-style: italic; } /* Minimum tap target on touch devices */ @media (max-width: 980px) { .et_pb_button, .et_mobile_menu a { min-height: 44px; } } /* --------------------------------------------------------------------------- Global header (Theme Builder layout "Sego Global Header") Figma: navbar-default 80:213 · behavior ref: src/app/components/Layout.tsx --------------------------------------------------------------------------- */ .et-l--header { position: sticky; top: 0; z-index: 50; } .sego-header-section { padding: 0; } .sego-header-row { display: flex; align-items: center; width: 100%; } /* Divi bumps 1/4, 1/5 and 1/6 columns to `margin-bottom: 30px` below 480px (`.et_pb_row .et_pb_column.et_pb_column_1_4`, 0-3-0). `align-items: center` then centres the 40+30 margin box, dropping the logo 15px and inflating the header to 87px. A 0-2-0 reset only wins 480–980px on source order and loses below 480 on specificity — hence the four-class selector, which wins on specificity alone and does not depend on stylesheet order. */ .et-l--header .sego-header-section .sego-header-row .et_pb_column { margin-bottom: 0; } .sego-header-row .et_pb_module { margin-bottom: 0; } .sego-header-logo img { height: 48px; width: auto; } .sego-header-menu, .sego-header-menu .et_pb_menu__wrap { background: transparent; } .sego-header-menu .et_pb_menu__menu > nav > ul { column-gap: 32px; } .sego-header-menu .et_pb_menu__menu > nav > ul > li > a { font-size: 14px; color: var(--sego-text-secondary); } /* Chevron on items with submenus (Figma dropdown-icon asset). THE SELECTOR IS THE WHOLE POINT — do not simplify it. Divi's own .et-menu .menu-item-has-children>a:first-child:after { font-family:ETmodules; content:"3"; position:absolute; right:0; top:0 } targets the SAME ::after we do, at 0-3-2. The obvious .sego-header-menu li.menu-item-has-children > a::after is only 0-2-3, so it lost `content` and `font-family` and won just `background` — painting our SVG into Divi's box, i.e. TWO chevrons stacked in one 14px square, with `margin-left`/`vertical-align` silently dead under Divi's position:absolute. This selector is 0-4-3: it takes `content` back (killing the ETmodules glyph) and returns the arrow to the inline flow the design draws it in. */ .sego-header-menu .et-menu li.menu-item-has-children > a:first-child::after { content: ""; font-family: inherit; position: static; display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; background: url(images/chevron-down.svg) center / contain no-repeat; transition: transform 0.2s; } .sego-header-menu .et-menu li.menu-item-has-children:hover > a:first-child::after { transform: rotate(180deg); } /* Divi reserves 20px of padding-right for the arrow it absolutely positions there (.et-menu .menu-item-has-children>a:first-child, 0-3-1). Ours is back in the flow, so that reservation is now just 20px of dead space giving this one item a 52px trailing gap where every other nav item has 32px. 0-4-2 beats it. */ .sego-header-menu .et-menu li.menu-item-has-children > a:first-child { padding-right: 0; } /* Dropdown card — white, radius 8, soft shadow (prototype NavDropdown) */ .sego-header-menu .sub-menu { /* margin-top MUST stay 0. The submenu is position:absolute with top:auto, so it resolves to the static position — the bottom of the link's line box, 1px inside the li. Any margin here pushes it OUTSIDE the li, and since Divi reveals it with a plain `.nav li:hover > ul` rule, that margin is an unhoverable dead band: the pointer leaves the li, :hover goes false, and the card vanishes before you reach it. A 12px margin here made the whole dropdown unclickable (caught 2026-07-30). For visual separation use the link's own padding-bottom, which is inside the li. */ margin-top: 0; border: 1px solid var(--sego-border) !important; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); padding: 8px 0 !important; min-width: 180px; overflow: hidden; } .sego-header-menu .sub-menu li a { padding: 10px 20px !important; font-size: 14px !important; color: var(--sego-text-primary) !important; width: auto !important; } .sego-header-menu .sub-menu li a:hover { background: var(--sego-plum-light); color: var(--sego-plum) !important; opacity: 1; } a.sego-header-cta { font-weight: 400; } a.sego-header-cta:hover { background-color: var(--sego-plum) !important; } /* Header on tablet/phone: logo left, then CTA + hamburger grouped hard right, hamburger outermost (responsive-conventions.md). DOM order is logo / menu / CTA, so the menu column is re-ordered past the CTA. */ @media (max-width: 980px) { .sego-header-row { flex-wrap: nowrap; justify-content: flex-end; gap: 12px; } /* Divi's row clearfix becomes a flex item here and eats one 12px gap off the right end, holding the hamburger short of the content edge. */ .sego-header-row::after { display: none; } .sego-header-row .et_pb_column { width: auto !important; flex: 0 0 auto; } .sego-header-row .et_pb_column:nth-child(1) { margin-right: auto; /* logo hard left; the rest packs right */ } .sego-header-row .et_pb_column:nth-child(2) { order: 3; /* menu column (hamburger) — outermost right */ } .sego-header-row .et_pb_column:nth-child(3) { order: 2; /* Explore Programs CTA */ } /* Divi gives the toggle `margin: 0 6px`, which would hold it off the edge. Sizing the bar to 44x44 with the glyph right-aligned keeps the ink flush with the row's content edge and meets the 44px tap-target minimum (the is the click target, not its wrapper). */ .sego-header-row .sego-header-menu .et_mobile_nav_menu { margin: 0; } .sego-header-row .sego-header-menu .mobile_menu_bar { display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; } /* Divi sizes the dropdown panel `position:absolute; left:0; width:100%` against `.et_pb_menu_inner_container`, so shrink-wrapping the column above would crush the panel to the 44px toggle. Re-anchor it to the right edge and span the row's content box (row padding is 24px a side). Anchoring right rather than left means a classic scrollbar's effect on 100vw pushes the panel further left, never past the right edge — so it can never introduce horizontal overflow. */ .sego-header-row .sego-header-menu .et_mobile_menu { left: auto; right: 0; width: 100vw; max-width: calc(100vw - 48px); } .sego-header-logo img { height: 40px; } } @media (max-width: 400px) { /* CTA yields to the hamburger on very narrow screens. KNOWN DEVIATION: responsive-conventions.md says it should become the first item inside the mobile menu; parked 2026-07-27 (see that file). */ .sego-header-row .et_pb_column:last-child { display: none; } } /* --------------------------------------------------------------------------- Global footer (Theme Builder layout post 26) — REBUILT 2026-08-02, spec 24 (footer-dark-asymmetric, Figma 324:206). Fully attr-native: no child-CSS rules needed; the old gold-footer .sego-footer-* block was removed here. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Multi-up grid utilities — opt in via the row's module_class. Approved 2026-07-25 for specs 03 impact (4up) / 04 instructors (5up) / 06 donors (6up). The 6up variant was RETIRED 2026-07-30: spec 14 replaced the donor row with a group-carousel, whose tiles are flex children of a divi/group rather than Divi columns, so it needs none of this. Verified no post references sego-grid-6up before removing it; 4up and 5up are still live on page 5. Why this can't be a Divi setting: Divi 5 ships @media (max-width:980px){ .et_block_row .et_pb_column{width:100%;margin-bottom:30px} } and re-asserts width:100%!important at ≤479px. Native D5 rows carry .et_block_row, so EVERY multi-column row collapses from tablet down, while responsive-conventions.md requires these three stay multi-up. No row or column control overrides a stock media query. Selector notes: two classes on the row (.et_pb_row.sego-grid-Nup) outrank Divi's `.et_block_row .et_pb_column` regardless of stylesheet order, and !important is required to beat Divi's own !important at ≤479px. The ≤980 nth-child(3n) rule outranks the ≤767 base rule (both apply below 767), so the narrower breakpoints must restate 3n explicitly — do not "simplify". --------------------------------------------------------------------------- */ @media (max-width: 980px) { /* impact 4-up → 2×2 */ .et_pb_row.sego-grid-4up > .et_pb_column { width: 47% !important; margin-right: 6% !important; } .et_pb_row.sego-grid-4up > .et_pb_column:nth-child(2n) { margin-right: 0 !important; } /* instructors 5-up → 3+2 */ .et_pb_row.sego-grid-5up > .et_pb_column { width: 30.66% !important; margin-right: 4% !important; } .et_pb_row.sego-grid-5up > .et_pb_column:nth-child(3n) { margin-right: 0 !important; } } @media (max-width: 767px) { /* instructors drop to 2-up; 3n must be restated (see header note) */ .et_pb_row.sego-grid-5up > .et_pb_column, .et_pb_row.sego-grid-5up > .et_pb_column:nth-child(3n) { width: 47% !important; margin-right: 6% !important; } .et_pb_row.sego-grid-5up > .et_pb_column:nth-child(2n) { margin-right: 0 !important; } } @media (max-width: 479px) { /* Divi re-asserts width:100%!important here — restore both grids at 2-up */ .et_pb_row.sego-grid-4up > .et_pb_column, .et_pb_row.sego-grid-5up > .et_pb_column, .et_pb_row.sego-grid-5up > .et_pb_column:nth-child(3n) { width: 47% !important; margin-right: 6% !important; } .et_pb_row.sego-grid-4up > .et_pb_column:nth-child(2n), .et_pb_row.sego-grid-5up > .et_pb_column:nth-child(2n) { margin-right: 0 !important; } } /* --------------------------------------------------------------------------- Program card parts (spec 09, Programs page §3) — two shared utilities, opted into via a module_class. Both are ladder tier (c): each spans 4 modules and needs a selector the module's own Custom CSS slots cannot reach. 1. .sego-pc-stats — the cohort/cost pair. One et_pb_text has a single typography surface, but the design gives the label (11/20 #4b4a48) and the value (13/20 bold #013838) different treatments. The flex container also has to be .et_pb_text_inner, a DESCENDANT of the module element, which custom_css_main_element cannot target. Nested columns aren't authorable in the D4-attr pipeline, so two side-by-side text modules is not an alternative. 2. .sego-arrow-link — the 14px "learn more" arrow. et_pb_button has NO button_icon_size attr (field dump: only button_icon, button_icon_color, button_icon_placement, button_use_icon), and Divi sizes ::after at font-size:1.6em = 19.2px here. The design's icon is also a stroked SVG, not an ETmodules glyph, so button_icon could not match its shape at any size. Painting the exported asset on ::after is the only route that keeps a real et_pb_button (proper , focus states, editable URL). !important is required on the properties Divi also sets: button_use_icon="off" emits display:none on the pseudo-element, and the base rule declares content, opacity, position and margin-left. SVG is Figma 191:150, verbatim (14×14, #4B153F, stroke-width 1.16667). THE SELECTOR PREFIX IS LEAD, NOT DECORATION. button_use_icon="off" emits body #page-container .et_pb_section .et_pb_button_N:after{display:none!important} which is specificity (1,2,2) — an ID. A plain .et_pb_button.sego-arrow-link ::after is (0,2,1) and loses however many !importants it carries; measured inert, the button box hugged its text exactly. Borrowing Divi's own `body #page-container .et_pb_section` prefix and adding our class takes it to (1,3,2), which wins. Do not "simplify" this selector. --------------------------------------------------------------------------- */ .sego-pc-stats .et_pb_text_inner { display: flex; gap: 24px; } .sego-pc-stats .sego-pc-stat { margin: 0; } .sego-pc-stats .sego-pc-stat__label, .sego-pc-stats .sego-pc-stat__value { display: block; } .sego-pc-stats .sego-pc-stat__label { font-size: 11px; line-height: 20px; color: var(--sego-text-secondary); } .sego-pc-stats .sego-pc-stat__value { margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 20px; color: var(--sego-teal-dark); } body #page-container .et_pb_section .et_pb_button.sego-arrow-link::after { content: "" !important; display: inline-block !important; position: static !important; opacity: 1 !important; width: 14px; margin-left: 6px !important; /* Figma 191:148: a.link is 16px tall, icon 191:150 is 14px at y=1 — the glyph is centred in the line box, 1px above and below. Reproduced GEOMETRICALLY: box = the full 16px line height, pinned to the top of the line box, with `background: center` doing the 1px/1px centring. Survives the Acumin -> Source Sans 3 font swap, which a baseline-relative nudge cannot. transform:none IS THE LOAD-BEARING LINE. Divi's base ships .et_pb_button:after { position:absolute; top:50%; transform:translateY(-50%) } and `position:static` only neutralises `top` — a transform keeps applying to a static box. It was silently lifting the arrow by half its own height (measured: ink 8px above the link box, overflowing it). Every earlier vertical-align tweak (-2px, -4px) was compensating for this and could not reach it. Remove this line and the arrow floats above the text again. */ height: 16px; vertical-align: top; transform: none !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.91667 7H11.0833' stroke='%234B153F' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 2.91667L11.0833 7L7 11.0833' stroke='%234B153F' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px; } /* --------------------------------------------------------------------------- Sponsorship stat-card accents — REMOVED 2026-07-30 (client ruling). The star / rule / star row was built from Figma nodes that the comp itself clips (the card is authored at a fixed 188.5px with overflow-clip), read at the time as an authoring accident. The client confirms the accents are not part of the design. The two Text modules are gone from page 6, the CSS block and images/star.svg are deleted, and the card now sits at the comp's height. Do not reinstate without a written ruling. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Two Divi buttons on one line (spec 11). et_pb_button renders
, and the block-level wrapper is what forces buttons to stack. None of the module's own slots can reach it: module_class lands on the (verified in markup), and both custom_css_main_element and free-form `selector` also resolve to .et_pb_button_N — the . :has() is the only way to select the parent from a class we control; the generated .et_pb_button_N_wrapper class is order-dependent and would break on any reorder. The column carries text-align:center so the inline-blocks centre. Do NOT add side margins here — Divi emits each button's custom_margin on this same wrapper with !important, so a margin declared in this file is inert (measured: gap 0). The designed 12px gap is authored as 6px sides in the modules' own custom_margin attr instead, which is ladder (a) anyway. --------------------------------------------------------------------------- */ .et_pb_button_module_wrapper:has(> .sego-cta-pair) { display: inline-block; vertical-align: top; } /* --------------------------------------------------------------------------- Homepage §1 Hero: rebuilt 2026-07-24 as native Divi modules (spec 01) — all styling lives in module design attrs; no child CSS needed. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Homepage §2 Fork cards: rebuilt 2026-07-25 as native Divi modules (spec 02) — all styling lives in module design attrs; no child CSS needed. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Homepage §3 Impact numbers: built 2026-07-25 (spec 03), redesigned 2026-08-13 (spec 50, Figma impact-section 1027:1054) from four divider- separated columns into four white cards on plum. The card face itself — white ground, 1px dark-teal border, 12px radius, 0 8px 12px shadow, 32px padding, 240px height — is all native column attrs. Two things are not reachable that way: 1. the 24px gap. Divi's gutter is an enum (1-4) mapping to fixed percentages; gutter 1 makes the columns touch and gutter 2 gives ~34px. Neither is 24. Divi's own rule is 0-4-0, so !important is required (donor carousel, 2026-08-12: the gutter rule beats free-form margins). calc() rather than a percentage — four 23.42% columns round differently across browsers and the fourth wraps. 2. vertical centring inside the card. A Divi column has no justify / align attr. Making the floated column a flex container is safe: float and display:flex compose. The desktop rule is fenced in min-width:981px because .sego-grid-4up's stacking rules above are also 0-3-0 + !important and appear EARLIER in this file — unfenced, this block would win at 980 and kill the 2-up stack. --------------------------------------------------------------------------- */ @media (min-width: 981px) { .et_pb_row.sego-impact-cards > .et_pb_column { width: calc((100% - 72px) / 4) !important; /* 3 gaps x 24px */ margin-right: 24px !important; } .et_pb_row.sego-impact-cards > .et_pb_column:last-child { margin-right: 0 !important; } } .et_pb_row.sego-impact-cards > .et_pb_column { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* The icon, numeral and label are each full-width blocks inside the flex column; without this they stretch and their own centring is what shows. */ .et_pb_row.sego-impact-cards > .et_pb_column > .et_pb_module { width: 100%; } /* The numeral and label centre themselves via their own textAlign attr; the image module has no such setting and the icon hugged the card's left edge. Measured rather than guessed: .et_pb_image_wrap is itself display:flex with justify-content:normal and spans the full module width, and the inside is display:block. So text-align on the module does nothing (no inline formatting context) and justify-content on the module does nothing (its only child is already full-width) — the centring has to land on the WRAP. Same shape as the About-page finding that module.advanced.align cannot centre a display:block image. */ .et_pb_row.sego-impact-cards .et_pb_image .et_pb_image_wrap { justify-content: center; } /* Divi core ships `h1-h6.et_pb_module_header { padding: 0 0 10px }`. Measured on the built card: the numeral module came out 66px tall against a 56px line box, which pushed the numeral-to-label gap to 22px where the comp has 12px. The module's own margin attr cannot reach the inner heading, so it is corrected here rather than by shrinking the margin to 2px and hiding the cause. */ .et_pb_row.sego-impact-cards .et_pb_heading .et_pb_module_header { padding-bottom: 0; } /* Below 980 .sego-grid-4up takes over the widths (2-up, then 2-up again at 767). It sets no bottom margin, so the wrapped row would touch; and a fixed 240px height clips a three-line label at narrow widths, so relax it. */ @media (max-width: 980px) { .et_pb_row.sego-impact-cards > .et_pb_column { margin-bottom: 24px !important; height: auto !important; min-height: 200px !important; } .et_pb_row.sego-impact-cards > .et_pb_column:nth-last-child(-n + 2) { margin-bottom: 0 !important; } } @media (max-width: 767px) { .et_pb_row.sego-impact-cards > .et_pb_column { min-height: 0 !important; } } /* --------------------------------------------------------------------------- Homepage §4 Instructors: rebuilt 2026-07-25 as native Divi modules (spec 04) — styling lives in module design attrs; the only child CSS it needs is the shared .sego-grid-5up utility above. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Homepage §5 TAPPD story: rebuilt 2026-07-25 as a native Divi Slider (spec 05), re-grounded onto plum 2026-08-13 (spec 50, Figma tapped-section 141:121) — still no child CSS. Everything the comp changed is either a module design attr (quote size/weight/colour/alignment, body colour) or one of the slider's own Custom CSS slots (freeForm for the name line and the inactive dots, slideActiveController for the active pill). The eyebrow row was deleted. RESOLVED 2026-08-13: the comp moved this section onto plum but left its controls at deep teal, so the read-more link and active dot measured 1.90:1 and the arrow glyphs 1.02:1 — the carousel read as static. On the user's instruction all four now use honey #eada94 (gcid-sego-honey) at 10.12:1, which clears AAA and is the client's own on-plum accent (the impact-section title uses it on this same ground). Set by build-50, which sweeps the module's CSS slots for #2f5c5c; the arrow colour is a design attr and takes the Global Color envelope. Closes launch-checklist §A12. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Homepage §6 Donor carousel (spec 14, Figma home-carousels 153:121) Rebuilt 2026-07-30 from the static 6-up grid (spec 06 Option A) to a real `divi/group-carousel`: 4 slides x 6 logo tiles = 24. Nearly everything is native — tile card, 24px gap, arrow pill, dot size and colour, dots below/centre — see spec 14. This block is the tier-(c) residue, and every rule here is something no module setting can reach: 1. tile flex sizing — divi/image has no flex-grow attr, and the tiles must divide the row evenly. Spans all 24 modules. 2. control-bar layout — Divi pins the arrows absolute at mid-height on the left/right EDGES. Figma puts them bottom-left, on the dots' line. Position is an enum (inside / outside / center), so this is unreachable natively. 3. active-dot pill — Divi's dots are one colour differing only in opacity (.3 vs 1). Figma wants a second colour AND a 22px pill. The dots are also injected by Divi's JS, so nothing exists at render time to style. --------------------------------------------------------------------------- */ /* SUPERSEDED IN PART 2026-08-13 (spec 50). The comp is now a single static row of FIVE logos on white with no arrows and no dots — the user cut the carousel to one slide in the builder, and build 50 turned the chrome off. Rules 2 and 3 below no longer render anything (Divi omits the arrow and dot markup when showArrows / showDots are off); they are kept because the module is still a group-carousel and the chrome comes back the moment the client supplies a sixth logo. Rule 1 is rewritten for the comp's fixed 150x100 tile. */ /* 1. Fixed 150x100 tiles, Figma's own dimensions, with the row centred by the module's justifyContent attr. `min-width:0` is still required — flex items default to min-width:auto and a wide logo refuses to shrink otherwise. The tile is a flex box so a short mark sits optically centred in the 100px band rather than riding its top edge. */ .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_image { flex: 0 0 150px; min-width: 0; height: 100px; display: flex; align-items: center; justify-content: center; } .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_image .et_pb_image_wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Marks vary from 310x88 to 230x190; contain inside the tile keeps them all at one optical weight instead of one width. */ .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* 2. The control bar. Divi's flex column is [track][dots]; the arrows are absolute, so giving the dots row a 32px min-height reserves the band and the arrows drop into it from `bottom:0`. */ .sego-donor-carousel .et_pb_group_carousel_dots { margin-top: 32px; /* Figma section-content gap-32 */ min-height: 32px; /* = arrow height, so the bar is one 32px line */ align-items: center; } /* Divi's own rule is `.et_pb_group_carousel_arrow` (0-1-0) — this is 0-2-0 and wins on specificity, so no !important is needed for top/bottom/transform. */ .sego-donor-carousel .et_pb_group_carousel_arrow { top: auto; bottom: 0; transform: none; /* The 16px glyph inherits a body line-height and inflates the box to 45px. Pinning line-height to the glyph size gives Figma's exact 32px control: 16 glyph + 2x7 padding + 2x1 border. */ line-height: 16px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .sego-donor-carousel .et_pb_group_carousel_arrow_prev { left: 0; right: auto; } .sego-donor-carousel .et_pb_group_carousel_arrow_next { left: 44px; /* 32px control + Figma's 12px nav-arrows gap */ right: auto; } /* 3. Dots. `width` and `background-color` are also set by Divi's per-module CSS at the same 0-2-0 specificity, so those two properties need !important; the rest win on their own (spec 04 pattern). */ .sego-donor-carousel .et_pb_group_carousel_dot { background-color: var(--sego-carousel-dot) !important; border-radius: 4px; opacity: 1; transition: width 200ms ease, background-color 200ms ease; } .sego-donor-carousel .et_pb_group_carousel_dot_active, .sego-donor-carousel .et_pb_group_carousel_dot--active { width: 22px !important; background-color: var(--sego-carousel-dot-active) !important; } /* Responsive: the slide group carries flexWrap:wrap natively (spec 14), so five fixed tiles wrap on their own — 3+2 at tablet, 2+2+1 at phone. Only the gap and tile scale need adjusting; the 40px desktop column gap is too airy once the row wraps. */ @media (max-width: 980px) { .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group { column-gap: 32px !important; row-gap: 24px !important; flex-wrap: wrap; } .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_image { flex: 0 0 130px; height: 88px; } } @media (max-width: 767px) { .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group { column-gap: 24px !important; } .sego-donor-carousel .et_pb_group_carousel_slide > .et_pb_group > .et_pb_image { flex: 0 0 120px; height: 76px; } } /* --------------------------------------------------------------------------- Program pages — "…is For You If" photo cards (spec 70, SUPERSEDES spec 26) The comps dropped the giant S/E/G/O letters and the hover reveal: each card is now a photograph with a scrim gradient and the statement ALWAYS VISIBLE over it. Build 70 deleted the four letter modules per page; what is left to style here is almost nothing, which is the point. The statement module already carries position:absolute, origin bottom-left, 24px padding and width:100% in its own block attrs, so it needs no positioning from this file — spec 26's `.sego-who-reveal{opacity:0}` was the ONLY reason it was invisible. Everything that rule dragged along is now GONE rather than commented out, because with no letter and nothing hidden there is no state to move between: the opacity/transform transitions, the :hover and :focus-within rules, the letter's text-shadow, the <=980px "show it outright" override, the prefers-reduced-motion guard, and the dead `.sego-who-num` rule (which no page ever emitted). That is ~60 lines out for the 3 below. ACCESSIBILITY — strictly better than what it replaces. The statement used to sit at opacity:0 and appear only on hover/:focus-within, which is why spec 26 had to put tabindex="0" on a non-interactive letter just so keyboard and touch users could trigger the same visual reveal. Both the letter and that tabindex are gone, no card is focusable any more, and every statement is simply readable. Contrast is carried by the per-page scrim gradient that build 70 sets on the COLUMN, not by a text-shadow here — so if a card photo is ever swapped for a lighter one, re-check that scrim instead of adding a shadow to this file. --------------------------------------------------------------------------- */ .sego-who-card .sego-who-copy { margin: 0; } /* --------------------------------------------------------------------------- Divi toggle — visible focus target (spec 32) The a11y shim in inc/a11y/toggle-a11y.js makes .et_pb_toggle_title focusable; a focusable element with no visible focus ring fails WCAG 2.4.7. --------------------------------------------------------------------------- */ .et_pb_toggle_title:focus-visible { outline: 2px solid var(--sego-coral); outline-offset: 2px; } /* --------------------------------------------------------------------------- Sego Next hero lede (spec 34) Figma sets "Sego Next" in Acumin SEMIBOLD, not bold. A bare would render 700 and read heavier than the comp, so the weight is pinned here rather than by putting an inline style in the module's content. --------------------------------------------------------------------------- */ .sego-hero-lede strong { font-weight: 600; } /* --------------------------------------------------------------------------- Media Mentions press list + press-release page (spec 67) Ladder tier (c) for three reasons the module slots cannot reach: 1. :hover / :focus-visible on a content link is INEXPRESSIBLE any other way. Every other link on this site is an et_pb_button, which gets its states from Divi. "Read More →" is a plain text link (Figma 1111:1107 is a TEXT node with a hyperlink, not a button), so an inline style — the only other way to colour an inside a text module — would ship a link with no hover affordance and no focus ring. bodyFont.link is not used anywhere in this build, so there is no house idiom to follow. 2. The meta line puts two colours on one line (gold source, 60% secondary date) plus a 4px dot. One et_pb_text has ONE typography surface — the same constraint that produced .sego-pc-stats above. 3. .sego-release needs blockquote / ul / cite descendants inside .et_pb_text_inner, which custom_css_main_element cannot target. NOT reusing .sego-arrow-link: that paints a plum SVG glyph on an et_pb_button::after. Here the arrow is a literal "→" character inside the Figma text string, and the colour is gold. --------------------------------------------------------------------------- */ /* --- the mention row's meta line: SOURCE · date -------------------------- */ .sego-mention-meta .et_pb_text_inner p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; } .sego-mention-meta .sego-mention-source { font-weight: 700; color: var(--sego-gold); } /* 4px dot, Figma 1111:1104 — #4b4a48 at 40% on a 2px radius. */ .sego-mention-meta .sego-mention-dot { flex: 0 0 4px; width: 4px; height: 4px; border-radius: 2px; background: var(--sego-text-secondary); opacity: 0.4; } /* Opacity, not a composited hex: it survives a change of section ground. */ .sego-mention-meta .sego-mention-date { color: var(--sego-text-secondary); opacity: 0.6; } /* --- the gold text link, shared by the list and the release page --------- */ .sego-more-link a, .sego-release .sego-more-link a { font-weight: 700; color: var(--sego-gold); text-decoration: none; } .sego-more-link a:hover, .sego-more-link a:focus-visible { text-decoration: underline; } .sego-more-link a:focus-visible { outline: 2px solid var(--sego-coral); outline-offset: 2px; } /* --- the press-release page body ---------------------------------------- */ .sego-release .et_pb_text_inner > p:first-child { margin-top: 0; } .sego-release .et_pb_text_inner > p:last-child { padding-bottom: 0; } .sego-release blockquote { margin: 0; padding: 0 0 0 24px; border-left: 3px solid var(--sego-gold); } .sego-release blockquote p { margin: 0; padding: 0; font-family: var(--sego-font-heading); font-size: 22px; font-style: italic; line-height: 34px; color: var(--sego-plum); } .sego-release blockquote cite { display: block; margin-top: 16px; font-family: var(--sego-font-body); font-size: 14px; font-style: normal; line-height: 20px; color: var(--sego-text-secondary); } /* line-height goes on the UL, and inherits rather than pinning px. A Divi 5 text module has a SEPARATE typography surface for lists (bodyFont.ul) from the one for body copy (bodyFont.body). Only bodyFont.body is set here — no module in this build has ever used bodyFont.ul — so the list fell back to Divi's own list leading, measured at 26px against the module's 32px body copy: tight the moment an item wraps to two lines. Putting `line-height: inherit` on the li did NOT fix that, and not for the usual specificity reason — a CSSOM dump proved this file's rule was the only one matching the li at all. The li was faithfully inheriting from its ul, which is where Divi's value actually lands. Set the parent. Inheriting (rather than 32px) tracks the module's responsive 32 → 30 → 28 steps for free. */ .sego-release ul { margin: 0; padding: 0 0 0 22px; list-style: disc; line-height: inherit; } .sego-release ul li { margin-bottom: 12px; padding-bottom: 0; line-height: inherit; } .sego-release ul li:last-child { margin-bottom: 0; } .sego-release a:not(.et_pb_button) { color: var(--sego-plum); text-decoration: underline; } @media (max-width: 767px) { .sego-release blockquote p { font-size: 19px; line-height: 30px; } } /* --------------------------------------------------------------------------- Background video — cover-sizing fallback (spec 71) Divi sizes a background