that does NOT carry an explicit theme-variant or legacy tint/sky modifier renders on paper-white. Hero shells (.det-head, .cmp-hero, .cover, .hero, .ph--dark) don't match because they don't carry `.s`. Theme-variant sections (`.s-light-1` … `.s-dark-2`) and the legacy `.tint` / `.sky` aliases are explicitly excluded so their background declarations in main.css win — otherwise this default would clobber `s-dark-1` / `s-dark-2` to white on dark-hero pages (regression seen on the home page Use-cases section). The `.s.tight` variant used by the comparison CTA strip still falls into the white branch deliberately so the dark cta-strip card inside it reads against a clean wrap. */ body.flowella-has-dark-hero section.s:not(.tint):not(.sky):not(.s-light-1):not(.s-light-2):not(.s-light-3):not(.s-dark-1):not(.s-dark-2) { background: var(--paper); } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary); } /* ───── Inline accents ───────────────────────────────────────────── * `.acc` is the green italic accent the home hero uses * ("conversations → conversions"). Defining it globally so any * heading on any page (use-case detail, comparison detail, listing * heros, deep-dive H2s, related H2s, etc.) renders the same token * without each surface having to opt in via a scoped rule. Editors * can wrap a span/em with class="acc" inside any HubDB rich-text * heading and get the same treatment as the home page. The dual * `.it` (sky blue) accent gets the same treatment for symmetry — * it was previously only scoped to .hero h1 / .ph-headline / * .cmp-hero h1 too. * * Scoped rules (`.hero h1 .acc`, `.cmp-hero h1 .acc`, etc.) still * exist and add letter-spacing tweaks per surface; they win because * higher specificity, and inherit color/family from this base. */ .acc { color: var(--green); font-family: var(--serif); font-style: italic; font-weight: 500; } .it { color: var(--secondary); font-family: var(--serif); font-style: italic; font-weight: 500; } /* leaf colours via use */ .leaf-bg { color: #4FB6EC; } .leaf-fg { color: #25D366; } svg [class="leaf-bg"], use[class*="hero-bg"] + path { } /* When color:transparent is set on the parent of a the inner currentColor falls through. Explicitly set leaf colours via per-use child overrides. */ svg use { color: inherit; } /* Default mark colouring: bg leaf blue, fg leaf green, regardless of currentColor. We force exact fills via CSS on .leaf-bg and .leaf-fg paths inside the symbol. */ #flo-mark .leaf-bg { fill: #4FB6EC; } #flo-mark .leaf-fg { fill: #25D366; } /* mono variants flip via parent class */ .mono-ink #flo-mark .leaf-bg, .mono-ink .leaf-bg { fill: #0F172A; opacity: .55; } .mono-ink #flo-mark .leaf-fg, .mono-ink .leaf-fg { fill: #0F172A; opacity: 1; } .mono-white #flo-mark .leaf-bg, .mono-white .leaf-bg { fill: #fff; opacity: .55; } .mono-white #flo-mark .leaf-fg, .mono-white .leaf-fg { fill: #fff; opacity: 1; } /* ========================================================= NOTE — brand-book editorial blocks removed (perf) --------------------------------------------------------- The large "brand book" presentation blocks that used to live here (COVER, MANIFESTO, CHAPTER layout, 01 LOGO, 02 COLOR, 03 TYPE, 04 MASCOT, 05 VOICE, 07 MESSAGING, 08 SURFACES, COLOPHON) were only ever used by the standalone documentation page at docs/design-system.html — which is NOT part of the deployed theme (srcDir: src) and ships its own docs/brand-book.css. Every page in the live theme downloaded ~1,100 lines of CSS it never matched, blocking first paint. They have been dropped here. What stays below is everything the live site actually uses: • the design tokens + base reset above, • the shared "06 UI" primitives (.btn / .badge / .field / .kpi / .feature / .status / .seg / .link) — .btn base + .badge are referenced on real pages, • the HubSpot row-fluid / spanN responsive grid (load-bearing). ========================================================= */ /* ═══════════════════════════════ 06 UI ═══════════════════════════════ */ .component-card { background: #fff; border: 1px solid var(--ink-200); border-radius: 18px; padding: 32px; } .row-flex { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .component-meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ink-200); font-family: var(--mono); font-size: 12px; color: var(--ink-500); } /* buttons */ .btn { font-family: var(--body); font-weight: 500; font-size: 14.5px; padding: 12px 22px; border-radius: 12px; border: 1px solid transparent; letter-spacing: -.005em; cursor: pointer; transition: transform .08s, background .15s, border-color .15s; line-height: 1; } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dk); } .btn-secondary { background: #fff; color: var(--primary); border-color: var(--primary); } .btn-secondary:hover { background: var(--sky-tint); } .btn-ghost { background: transparent; color: var(--ink-700); } .btn-ghost:hover { background: var(--ink-100); } .btn-success { background: var(--green); color: #fff; } .btn-danger { background: #fff; color: #B42318; border-color: #FCD5CC; } .btn-danger:hover { background: #FFF5F2; } /* badges */ .badge { display: inline-flex; align-items: center; font-weight: 600; font-size: 11.5px; letter-spacing: .04em; padding: 6px 11px; border-radius: 6px; text-transform: uppercase; } .badge-primary { background: var(--sky-tint); color: var(--primary); } .badge-success { background: #E7F7EE; color: #16803C; } .badge-mint { background: #E0F8F5; color: #0E8B82; } .badge-coral { background: #FFE9E5; color: #B42318; } .badge-ink { background: var(--ink-100); color: var(--ink-700); } .badge-outline { background: #fff; color: var(--ink-700); border: 1px solid var(--ink-300); } .status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-700); } .status-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(37,211,102,.18); } .status:nth-of-type(2) .status-dot { box-shadow: 0 0 0 3px rgba(255,111,97,.18); } .status:nth-of-type(3) .status-dot { box-shadow: 0 0 0 3px rgba(148,163,184,.22); } /* fields */ .field { display: block; margin-bottom: 18px; } .field:last-child { margin-bottom: 0; } .field-label { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-800); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; font-family: var(--body); font-size: 14.5px; padding: 12px 14px; border: 1px solid var(--ink-300); border-radius: 10px; background: #fff; color: var(--ink-900); outline: none; transition: border .15s, box-shadow .15s; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,110,166,.15); } .field-hint { display: block; font-size: 12px; color: var(--ink-500); margin-top: 6px; } .seg { display: inline-flex; background: var(--ink-100); border-radius: 10px; padding: 3px; gap: 2px; } .seg-btn { font-family: var(--body); font-weight: 500; font-size: 13.5px; padding: 8px 14px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-700); cursor: pointer; } .seg-btn.is-on { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(15,23,42,.06); } /* KPI */ .kpi { background: #fff; border: 1px solid var(--ink-200); border-radius: 18px; padding: 26px 28px; } .kpi-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); } .kpi-value { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1.05; letter-spacing: -.035em; color: var(--ink-900); margin: 8px 0 6px; } .kpi-value span { font-size: 28px; font-weight: 600; color: var(--ink-500); margin-left: 4px; } .kpi-value .g { color: var(--primary); } .kpi-delta { font-size: 13px; font-weight: 500; } .kpi-delta.up { color: #16803C; } .kpi-delta.down { color: var(--primary); } /* feature card */ .feature { display: grid; grid-template-columns: 60px 1fr; gap: 20px; background: #fff; border: 1px solid var(--ink-200); border-radius: 18px; padding: 28px 30px; align-items: start; } .fc-icon { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; } .fc-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); } .fc-title { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.005em; margin: 6px 0 8px; } .feature p { font-size: 14.5px; color: var(--ink-700); line-height: 1.55; margin: 0 0 12px; } .link { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--primary); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } /* ========================================================= HubSpot row-fluid / span-N responsive grid --------------------------------------------------------- The CMS emits Bootstrap-style `row-fluid` / `spanN` markup around every dnd_section, dnd_column and dnd_row, but does NOT auto-include `responsive-grid.css` in custom themes. Without these rules, `dnd_column`s default to block layout and stack vertically (visible on the WhatsApp + HubSpot landing template's two-column form/meeting section). We use flex so single-child rows (the default `span12` wrapper around every dnd_module) keep behaving exactly like block, while multi-column rows lay out side-by-side. ========================================================= */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid > [class*="span"] { box-sizing: border-box; min-height: 1px; } .row-fluid > .span12 { flex: 0 0 100%; max-width: 100%; } .row-fluid > .span11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .row-fluid > .span10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .row-fluid > .span9 { flex: 0 0 75%; max-width: 75%; } .row-fluid > .span8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .row-fluid > .span7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .row-fluid > .span6 { flex: 0 0 50%; max-width: 50%; } .row-fluid > .span5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .row-fluid > .span4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .row-fluid > .span3 { flex: 0 0 25%; max-width: 25%; } .row-fluid > .span2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .row-fluid > .span1 { flex: 0 0 8.3333%; max-width: 8.3333%; } /* Gutters between adjacent span columns. Single-child rows (the default span12 wrapper) stay edge-to-edge so existing full-width modules render exactly as before. */ .row-fluid > [class*="span"]:not(:only-child) { padding-left: 16px; padding-right: 16px; } .row-fluid > [class*="span"]:not(:only-child):first-child { padding-left: 0; } .row-fluid > [class*="span"]:not(:only-child):last-child { padding-right: 0; } /* HubSpot dnd offset support: `data-x` is the 12-track column index where a cell starts. First-child cells with non-zero data-x get nudged via margin-left so single columns with an `offset=` parameter (e.g. width=6 offset=3 → centred) sit in the right place. */ .row-fluid > [class*="span"]:first-child[data-x="1"] { margin-left: 8.3333%; } .row-fluid > [class*="span"]:first-child[data-x="2"] { margin-left: 16.6667%; } .row-fluid > [class*="span"]:first-child[data-x="3"] { margin-left: 25%; } .row-fluid > [class*="span"]:first-child[data-x="4"] { margin-left: 33.3333%; } .row-fluid > [class*="span"]:first-child[data-x="5"] { margin-left: 41.6667%; } /* Stack columns at narrower widths. */ @media (max-width: 768px) { .row-fluid > [class*="span"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; } }