/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* ========================================================================== Ripe Global design tokens - Pink Pivot. Source of truth: dev-handoff/2026-10-07-pink-pivot-finals-rollout-plan.md section 2. Every module and base class references these. No hardcoded hex, spacing, or radius anywhere downstream. ========================================================================== */ :root { /* ------------------------------------------------------------------------ Base palette - Brand Guidelines v4.1 "Sora & Rose" plus values sampled from the approved comps (Home v5, CEO v3). Modules NEVER reference these directly. They reference the role and surface tokens further down, so a colour decision can change here without a module edit. ------------------------------------------------------------------------ */ --rg-ink: #0A0B2E; /* dark ground, text on light and on Rose */ --rg-ink-raised: #11123B; /* Ink cards on Ink (stat cells, media thumbs) */ --rg-ink-deep: #08091F; /* stat strip, footer legal strip */ --rg-paper: #F8F6F1; /* shells, footer ground */ --rg-paper-2: #EEEAE1; /* page ground behind Paper cards */ --rg-white: #FFFFFF; /* page ground, card interiors on Paper */ --rg-rose: #FF3D7F; /* signal: CTA fill, accent words, stat glyph */ --rg-rose-muted: #DC6A91; /* glows, featured fields */ --rg-coral-sea: #134A6E; /* gradient partner. Never carries text on Ink */ --rg-whitsunday: #B8F0F2; /* highlight on Ink / Coral Sea only */ --rg-black: #000000; /* gradient endpoints only */ /* WCAG pair. Rose Deep is for SMALL text on LIGHT surfaces only (5.11 on Paper, 4.60 on Paper-2, 5.6 on white). Never on Ink. Text on Rose is always Ink (5.66): nothing downstream can produce white on Rose. */ --rg-rose-deep: #D10047; --rg-on-rose: var(--rg-ink); /* Page accent. Rose by default. A Page Accent preset or a course wrapper overrides the pair (see components/_course-accents.css). Each preset must ship an accent AND a deep partner that passes 4.5:1 on light surfaces. */ --rg-accent: var(--rg-rose); --rg-accent-deep: var(--rg-rose-deep); --rg-accent-glow: var(--rg-rose-muted); --rg-on-accent: var(--rg-ink); /* Role tokens (plan section 2.2). Defaults build the approved comps. */ --rg-band-bg: var(--rg-accent); --rg-band-text: var(--rg-on-accent); --rg-feature-card-bg: var(--rg-accent); --rg-feature-card-text: var(--rg-on-accent); --rg-btn-primary-bg: var(--rg-accent); --rg-btn-primary-text: var(--rg-on-accent); --rg-media-bg: var(--rg-ink-raised); --rg-badge-bg: var(--rg-whitsunday); --rg-badge-text: var(--rg-ink); --rg-chip-bg: var(--rg-paper); --rg-chip-text: var(--rg-accent-deep); --rg-chip-mark: var(--rg-ink); --rg-gradient-panel: linear-gradient(135deg, var(--rg-ink) 35%, var(--rg-coral-sea) 120%); /* Coral Sea glow on Ink Raised: the CEO timeline lead card and glow tags. */ --rg-surface-coral-glow: radial-gradient(70% 90% at 100% 40%, color-mix(in srgb, var(--rg-coral-sea) 70%, transparent) 0%, transparent 70%), var(--rg-ink-raised); --rg-glow: radial-gradient(60% 70% at 0% 0%, var(--rg-accent) 0%, color-mix(in srgb, var(--rg-accent-glow) 45%, transparent) 38%, transparent 72%); /* Surface block. Light (white) is the page default. Each .rg-surface--x in components/_surfaces.css rewrites this whole block, and text colour always derives from it: no module sets its own text colour against a background an editor can change. */ --rg-surface: var(--rg-white); --rg-surface-raised: var(--rg-paper); --rg-text: var(--rg-ink); --rg-text-muted: color-mix(in srgb, var(--rg-ink) 72%, var(--rg-white)); --rg-line: color-mix(in srgb, var(--rg-ink) 16%, transparent); --rg-border: 1px solid var(--rg-line); --rg-border-soft: 1px solid color-mix(in srgb, var(--rg-ink) 9%, transparent); --rg-highlight: var(--rg-text); /* Whitsunday on Ink only */ --rg-eyebrow: var(--rg-accent-deep); /* W3: small pink text on light */ --rg-accent-text: var(--rg-accent-deep); /* small accent text */ --rg-accent-large: var(--rg-accent); /* large accent words, 3:1 */ --rg-focus: var(--rg-ink); --rg-dot-inactive: color-mix(in srgb, var(--rg-ink) 55%, var(--rg-white)); --rg-btn-secondary-bg: var(--rg-ink); --rg-btn-secondary-text: var(--rg-paper); /* The pill on a Rose tab header or band (A2): white with an Ink label, 19:1. Fixed, not surface-derived: the tab is always Rose. */ --rg-btn-band-bg: var(--rg-white); --rg-btn-band-text: var(--rg-ink); /* Form / feedback state colors (required marks, invalid borders, messages) */ --rg-error: #ef6b51; --rg-success: #3bbf87; /* Error TEXT, surface-derived like the block above (components/_surfaces.css rewrites it). The raw error colour is 6.3:1 on Ink but 2.9:1 on Paper, so light grounds take it mixed toward Ink: 5.5:1 on Paper, 6.0:1 on white. */ --rg-error-text: color-mix(in srgb, var(--rg-error) 65%, var(--rg-ink)); /* Legacy names. Kept as aliases until every module is migrated to the role and surface tokens, then deleted. Do not use in new code. */ --rg-navy: var(--rg-ink); --rg-navy-deep: var(--rg-ink-deep); --rg-teal: var(--rg-accent); --rg-teal-glow: var(--rg-accent-glow); --rg-text-on-light: var(--rg-ink); --rg-accent-on-teal: var(--rg-on-accent); --rg-accent-on-light: var(--rg-accent-deep); --rg-surface-light: var(--rg-white); --rg-surface-stat: color-mix(in srgb, var(--rg-ink) 55%, transparent); --rg-surface-panel: color-mix(in srgb, var(--rg-ink) 51%, transparent); --rg-surface-chip: color-mix(in srgb, var(--rg-ink) 85%, transparent); --rg-surface-play: color-mix(in srgb, var(--rg-accent) 23%, transparent); /* Elevation. The navy build used accent glows here. The Pink Pivot comps carry no glow shadows, so these are quiet neutral lifts. */ --rg-glow-sm: 0 2px 8px color-mix(in srgb, var(--rg-ink) 12%, transparent); --rg-glow-md: 0 6px 18px color-mix(in srgb, var(--rg-ink) 16%, transparent); --rg-glow-lg: 0 14px 40px color-mix(in srgb, var(--rg-ink) 20%, transparent); --rg-shadow-card: 0 10px 30px color-mix(in srgb, var(--rg-ink) 14%, transparent); /* Typography - Sora for headings, stats, eyebrows, nav and the wordmark. Schibsted Grotesk for body, UI, buttons, forms and captions. Both load from Google Fonts in templates/layouts/base.html. No third typeface. */ --rg-font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rg-body-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rg-track-head: -0.035em; /* v4.1 headline tracking */ /* Weight for SMALL non-heading text: tags, list items, step copy, stat labels (D6). Bold on light grounds; the dark surface block sets it to regular, because small bold white text on Ink was hard to read. Headings keep their own weight. */ --rg-small-weight: 700; --rg-track-eyebrow: 0.16em; /* v4.1 eyebrow caps tracking */ /* Type scale - ONE scale for every module (gallery feedback r1, A1). A module heading always takes a step from this list, never a module-local size. Fluid between a 390px mobile minimum and a 1920px+ maximum. Values in the comments are px at 390 / 1440 / max. Shown in the gallery Primitives. */ --rg-display-xl: clamp(2.75rem, 6.1vw, 7.75rem); /* 44 / 88 / 124 - portrait hero */ --rg-display: clamp(2.75rem, 5.4vw, 6.25rem); /* 44 / 78 / 100 - hero, banner display */ --rg-h1: clamp(2.25rem, 3.2vw, 3.75rem); /* 36 / 46 / 60 - banner headlines */ --rg-h2: clamp(2rem, 2.6vw, 3rem); /* 32 / 37 / 48 - section headings, tab headers */ --rg-h3: clamp(1.625rem, 2vw, 2.25rem); /* 26 / 29 / 36 - module headings under a tab, card headings */ --rg-h4: clamp(1.375rem, 1.8vw, 1.875rem); /* 22 / 26 / 30 - card names */ --rg-h5: clamp(1.25rem, 1.4vw, 1.5rem); /* 20 / 20 / 24 - small card titles */ --rg-h6: clamp(1.125rem, 1.2vw, 1.25rem); /* 18 / 18 / 20 - list and tile titles */ --rg-h2-alt: var(--rg-h2); /* legacy alias, do not use in new code */ --rg-body: clamp(1rem, 1.15vw, 1.375rem); /* 16 / 17 / 22 - all body copy */ --rg-small: 0.9375rem; /* 15px - meta lines and captions only */ --rg-body-lg: clamp(1.125rem, 1.3vw, 1.5rem); /* 18 / 19 / 24 - a lead or large card body */ /* Row headings (Home Review 2, G1): the heading on a Rose tab or band, and a shell's heading row. One step down the scale from h2, and one weight lighter than a headline (Sora 500, loaded in base.html). Every module's row heading reads these two, so they move together. */ --rg-row-heading-size: var(--rg-h3); --rg-row-heading-weight: 500; --rg-label: 1.25rem; /* 20px - stat labels */ --rg-btn: 1rem; /* 16px - every CTA, chip, form field */ --rg-nav: 0.75rem; /* 12px - main nav links */ /* Line heights */ --rg-lh-tight: 1.05; --rg-lh-body: 1.65; /* Spacing - imposed 8px scale (the design has no grid; normalization is locked) */ --rg-space-1: 8px; --rg-space-2: 16px; --rg-space-3: 24px; --rg-space-4: 32px; --rg-space-5: 40px; --rg-space-6: 48px; --rg-space-7: 56px; /* blog vertical rhythm (hero/section spacing) */ --rg-space-8: 64px; --rg-space-9: 72px; /* blog vertical rhythm (hero/related spacing) */ --rg-space-10: 80px; --rg-space-12: 96px; --rg-space-16: 128px; /* Module gap (A3): the ONE vertical gap between adjacent modules on a page, and between the halves of a side-by-side section once they stack on phones. Applied centrally in components/_rg-base.css, not per module. An editor's Space above / below preset still overrides it. */ --rg-module-gap: var(--rg-space-6); /* Radius */ --rg-radius-lg: 30px; /* all large cards, panels, image containers. Dominant. */ --rg-radius-md: 20px; /* stat cards only */ --rg-radius-sm: 15px; /* chips, icon tiles, social tiles */ --rg-radius-card: var(--rg-radius-lg); /* shells and cards. By eye from the comps, Figma pending (D5) */ --rg-radius-pill: 999px; /* every button and tag */ /* Circular profile avatar - ONE shared size for every ring headshot (educator + graduate grids, community/team cards). Ring outer 210px; the image inside lands ~188px after the 8px navy gap + 3px white ring. */ --rg-avatar: 210px; /* Layout */ --rg-container: 1920px; /* content width */ --rg-gutter: 30px; /* Outer frame: use as max-width on a wrapper that also has padding-inline of --rg-gutter, so the content settles to exactly --rg-container (1920) flush on wide screens while keeping a gutter on mobile (30px, narrowing to 15px below 768px - see the override at the end of this file). One shared width for every content module so their edges align. */ --rg-container-frame: calc(var(--rg-container) + 2 * var(--rg-gutter)); /* Blog post widths (Client Round 2): a readable measure for body text and a wider track for the header, hero image and media in the body. */ --rg-post-measure: 46rem; /* 736px - body text */ --rg-post-wide: 72rem; /* 1152px - header, images, video, tables */ --rg-btn-height: 50px; /* universal button height */ /* Page header - one uniform height for every page top (rg-hero + rg-cta-banner used as a hero-header), so headers no longer vary page-to-page (S7). */ --rg-header-min: 825px; --rg-header-min-mobile: 480px; /* Breakpoints - reference only. CSS custom properties cannot be used inside media queries; queries hardcode these px values. Mobile-first. sm: 480px | md: 768px | lg: 1024px | xl: 1440px | 2xl: 1920px */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; --bp-2xl: 1920px; } /* Mobile gutter. --rg-gutter is declared exactly once above and consumed by 37 files - containers, _rg-base, _stat-bar, _faq, the template stylesheets and eleven module stylesheets including header, footer and card-row - so this single override narrows the side gutter site-wide below 768px rather than touching each consumer. --rg-container-frame is calc()'d from it and follows automatically. Safe against project notes item 4: no theme field maps to --rg-gutter (it is declared in exactly one place in the whole theme), so there is no unresolved field able to emit an empty value and stomp the literal. */ @media (max-width: 767.98px) { :root { --rg-gutter: 15px; } } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* HubSpot's own layout stylesheet ships `.container-fluid { padding: 15px }`, which wraps EVERY dnd page and inset the whole thing 15px on each side at every width. Nothing in this theme wants it: every RG module supplies its own gutter, either `width: calc(100% - 2 * var(--rg-gutter))` or `max-width: var(--rg-container-frame)` + `padding-inline: var(--rg-gutter)`. So the 15px was a second, invisible gutter stacked outside the real one - 30px inset on mobile where the design calls for 15, 45px on desktop where it calls for 30 - and it was also what stopped a full-bleed section from ever reaching the viewport edge. Inline only: vertical rhythm is not ours to change here. `body` prefix is load-bearing. The rule lives in HubSpot's bootstrap-grid.min.css as bare `.container-fluid { padding-left/right: 15px }` - identical specificity to ours, but their sheet loads AFTER the theme's (measured on the portal: ours is stylesheet 4, theirs is 15), so a bare selector loses the tie. 0,1,1 beats 0,1,0 whatever the order. NOTE this is invisible to `hs cms theme preview` - bootstrap-grid.min.css is not served there, so a bare selector computes to 0 locally and 15px in the portal. Same class of trap as project notes item 13: portal-verify only. */ body .container-fluid { padding-inline: 0; } .content-wrapper { margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 1rem; } @media (max-width: 767.98px) { .dnd-section .dnd-column { padding: 0; } } /* ========================================================================== RG Full Width Card Section (Investors build, 2026-08-13) -------------------------------------------------------------------------- Styles the section template `sections/rg-full-width-card.html`, which appears in the page editor's "Add Section" panel as a draggable card container editors drop any modules into. HubSpot won't let editors add a CSS class to a section and the page editor's dnd_section takes no class param - but a SECTION TEMPLATE can carry `class="rg-section-card"` on its dnd_section, which is how this lands. The class supplies the default card look: the Pink Pivot section shell without a tab - a Paper ground with the card radius and the SAME width cap as the page content sections. The matching token block is in components/_surfaces.css, so modules dropped inside derive their text colour from it. Background, padding and alignment stay editable in the section's Style panel and override these defaults. Tokens only; render is portal-verify. */ .rg-section-card { background-color: var(--rg-surface); border-radius: var(--rg-radius-card); color: var(--rg-text); margin-inline: auto; max-width: var(--rg-container); /* Gutter on narrow screens so the card never touches the edges - nets to the same footprint as the shell (capped at --rg-container, else viewport minus a gutter each side). Section is full_width so 100% = the viewport. */ width: calc(100% - 2 * var(--rg-gutter)); overflow: hidden; } /* Two-column pairing (Review 3, S3) - shared object, loaded globally. Any two modules placed side by side in one dnd_section, 6 + 6, behave like the homepage two-up panels wherever they are: side by side at 1024px and up, with the grid's own column gap (2.13%, 30px at 1440, the same gap the two-up panels have); stacked below 1024px, full width, one module gap apart; and, where both halves are RG modules, the two panels finish at the same height. Matched on structure, never on a module class, so a new pairing needs no CSS (repo trap 14: this is not a module.css rule). The only way to build it from a page template (traps 1b and 12: no class on a page-template dnd_section, and a second module in a section is rejected unless both carry width and offset): dnd_section full_width=True, padding top/bottom/left/right 0 dnd_module path="../modules/rg-faq-accordion", width=6, offset=0, ... end_dnd_module dnd_module path="../modules/rg-cta-banner", width=6, offset=6, ... end_dnd_module end_dnd_section (Written without tag braces on purpose: HubSpot parses HubL inside CSS files, comments included, trap 17.) Equal height is skipped when one half is a rich text, which has no panel to stretch and would only leave the other half tall and empty. It is also skipped beside a testimonial carousel, which has its own pairing rules in rg-split-feature and rg-testimonial-carousel. Specificity is deliberate. In the portal HubSpot's bootstrap grid loads AFTER the theme (trap 18) and sets float, width (.row-fluid .span6) and a 2.13% margin-left on every column but the first; the `body` prefix and the doubled .span6.dnd-module keep these rules ahead of it, and ahead of the module-gap rules in _rg-base.css and the two-up rule in rg-split-feature. That grid file is absent from local preview, so the stacked layout in the portal is portal-verify only. */ /* Equal height: the row is flex and already stretches its columns; the HubSpot wrapper inside each column is block, so it is stretched too and the module root fills it. */ body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.widget-type-rich_text, .rg-tcarousel)) > .span6.dnd-module { display: flex; flex-direction: column; } body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.widget-type-rich_text, .rg-tcarousel)) > .span6.dnd-module > .hs_cos_wrapper { display: flex; flex: 1 1 auto; flex-direction: column; } body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.widget-type-rich_text, .rg-tcarousel)) > .span6.dnd-module > .hs_cos_wrapper > [class*="rg-"] { flex: 1 1 auto; } /* Stack below the two-up breakpoint. A half-width column is too narrow for most panels under 1024px (346px at 768); HubSpot's own grid only stacks under 768. The second column carries the module gap, so a rich text half gets it too, and the module inside it loses its own top margin so the gap is not doubled. */ @media (max-width: 1023.98px) { body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.rg-tcarousel)) { flex-wrap: wrap; } body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.rg-tcarousel)) > .span6.dnd-module { flex: 0 0 100%; float: none; margin-left: 0; max-width: 100%; width: 100%; } body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.rg-tcarousel)) > .span6.dnd-module + .span6.dnd-module { margin-top: var(--rg-module-gap); } body .row-fluid:has(> .span6.dnd-module + .span6.dnd-module):not(:has(.rg-tcarousel)) > .span6.dnd-module + .span6.dnd-module > .hs_cos_wrapper > [class*="rg-"] { margin-top: 0; } } /* Elements Base HTML elements are styled in this section (,

, ,

,