/* Breakthrough announcement design tokens + isolation reset. * Loaded before engine.css. The ONLY place raw style values live — components * reference these by name via ctx.token(). Seeded from style-2018wf.css brand. */ /* The doc engine ships its own Oswald/Lato @font-face (URL-only) so it's * self-contained: the editor and other admin/non-public surfaces don't load the * site's fonts.css (which only the public header inlines), so without these the * converted content fell back to Arial. Same family names as the site, and the * site's faces are URL-only too, so the two identical declarations don't conflict. */ @font-face{font-family:'Oswald';font-style:normal;font-weight:300;font-display:swap;src:url(/f/o300.woff2) format('woff2'),url(/f/o300.woff) format('woff')} @font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url(/f/o400r.woff2) format('woff2'),url(/f/o400r.woff) format('woff')} @font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(/f/o700.woff2) format('woff2'),url(/f/o700.woff) format('woff')} @font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(/f/l300.woff2) format('woff2'),url(/f/l300.woff) format('woff')} @font-face{font-family:'Lato';font-style:italic;font-weight:300;font-display:swap;src:url(/f/l300i.woff2) format('woff2'),url(/f/l300i.woff) format('woff')} @font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(/f/l400r.woff2) format('woff2'),url(/f/l400r.woff) format('woff')} @font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(/f/l400i.woff2) format('woff2'),url(/f/l400i.woff) format('woff')} @font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(/f/l700.woff2) format('woff2'),url(/f/l700.woff) format('woff')} @font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;src:url(/f/l700i.woff2) format('woff2'),url(/f/l700i.woff) format('woff')} .bbdoc-root, .bbdoc-doc { /* color — primary CTA is brand orange (#f3871b) */ --bb-color-primary: #f3871b; --bb-color-brand: #f3871b; --bb-color-blue: #2172be; --bb-color-ink: #151924; /* brand heading + body text — site h1-h5 color */ --bb-color-gray: #656a78; /* secondary text */ --bb-color-light: #f6f5f3; --bb-color-white: #ffffff; --bb-color-green: #0ac208; /* success / go */ /* NB: blue #2172be is the site's section-header band color (white text on blue); #282060 (OM indigo) and #232a3b (nav chrome) are deliberately NOT here. */ /* type — scale tuned to what the legacy popups actually use */ --bb-font-heading: 'Oswald', 'Helvetica Neue', Arial, sans-serif; --bb-font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif; --bb-size-h1: 42px; /* hero heading (most common large size) */ --bb-size-h2: 32px; --bb-size-h3: 24px; --bb-size-h4: 20px; /* common subhead size */ --bb-size-body: 17px; /* most common body/list size */ --bb-size-small:13px; /* spacing — existing steps unchanged; +4 in-between steps for finer control */ --bb-space-none: 0; --bb-space-xs: 4px; --bb-space-sm: 8px; --bb-space-sm2: 12px; --bb-space-md: 16px; --bb-space-md2: 20px; --bb-space-lg: 28px; --bb-space-lg2: 36px; --bb-space-xl: 44px; --bb-space-xxl: 64px; /* radius + shadow */ --bb-radius-sm: 4px; --bb-radius-md: 10px; --bb-radius-lg: 18px; --bb-radius-pill: 999px; --bb-shadow-sm: 0 2px 8px rgba(8, 15, 30, .12); --bb-shadow-md: 0 8px 30px rgba(8, 15, 30, .25); --bb-shadow-lg: 0 22px 60px rgba(8, 15, 30, .34); } /* ── isolation reset ────────────────────────────────────────────────────── * Popups are appended to document.body, so the site's global element rules * (ul/ol indent, h1-h6 sizes, a colors, table, inherited body font/color) would * bleed into author content. Scope to .bbdoc-body descendants only (not the * .bbdoc-root chrome). 'revert' drops site author styles but keeps sensible UA * defaults (a div stays block); it does NOT touch custom properties, so the * tokens above survive. Component rules in engine.css load AFTER this and win * on cascade order. We re-apply the brand look deliberately via tokens. */ .bbdoc-body *, .bbdoc-body *::before, .bbdoc-body *::after { all: revert; box-sizing: border-box; /* all:revert can leave headings/text in a balanced-wrap state (Chromium), splitting a long single line into two; force auto so wrapping matches the legacy letters (which wrap only on overflow). */ text-wrap-style: auto; } .bbdoc-body { font-family: var(--bb-font-body); color: var(--bb-color-ink); font-size: var(--bb-size-body); line-height: 1.5; } /* Sales + upsells share one DOCUMENT house style, measured element-by-element * from the live product pages via getComputedStyle: * body/li : Lato 400 16px #151924, line-height normal, p margins 16px/16px, li 0 * h1 : Oswald 400 30px #151924, lh normal, margin 20px / .67em * h2 : Lato 700 24px #2172be, lh normal, margin 20px / .83em * h3 : Lato 700 20px #151924, lh normal, margin 20px / 1em * h4 : Lato 700 20px #151924, lh normal, margin 20px / 1.33em * width : 770px column * These are DOCUMENT-flow rules (real element margins + normal line-height), * unlike the engine's tight announcement model (.bbdoc-body: lh 1.5, element * margin:0, uniform wrapper margin). The .bbdoc-doc.bbdoc- prefix gives * specificity (0,3,1) to beat the engine's .bbdoc-body rules (0,2,1). The * .bbdoc-text block wrapper stays (it's the editor's block container) but is * layout-neutral here — the element's own margins drive spacing. Upsells use the * identical rules so pasted sales copy renders the same. Per-page/per-block * deviations remain explicit overrides on the block. */ .bbdoc-doc.bbdoc-sales, .bbdoc-doc.bbdoc-upsell { --bb-size-body: 16px; line-height: normal; } .bbdoc-doc.bbdoc-upsell { max-width: 770px; margin-left: auto; margin-right: auto; } /* sales letters render flush in the product page's .tabbedpagebody (no side padding): 770px column matching the legacy letter's actual rendered width there (the dump-lines ground truth shows the original paragraphs at 770px). */ .bbdoc-doc.bbdoc-sales { max-width: 770px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .bbdoc-doc.bbdoc-sales .bbdoc-text, .bbdoc-doc.bbdoc-upsell .bbdoc-text { margin-bottom: 0; } .bbdoc-doc.bbdoc-sales .bbdoc-text p, .bbdoc-doc.bbdoc-upsell .bbdoc-text p { font-family: var(--bb-font-body); font-size: var(--bb-size-body); color: var(--bb-color-ink); line-height: normal; margin: 1em 0; } /* CTA wrapper

matches the legacy centered

around the button (body size/ink); the inner .bbdoc-cta-caption keeps its own 14px italic .button-underneath style. */ .bbdoc-doc.bbdoc-sales .bbdoc-cta, .bbdoc-doc.bbdoc-upsell .bbdoc-cta { font-family: var(--bb-font-body); font-size: var(--bb-size-body); color: var(--bb-color-ink); line-height: normal; } /* Paragraph margins are font-relative (1em = 16px at the standardized body size), matching how the legacy letters scale (an 18px letter had 18px margins, a 16px letter 16px). Section

spacing is a FIXED rhythm — 40px above, as the legacy sales letters use — not font-relative. A letter that deviates sets the heading's `mt` prop. Adjacent block wrappers collapse, so spacing comes from these margins. */ /* links render in brand blue (matches the legacy letters' #2172be), not default link-blue */ .bbdoc-doc.bbdoc-sales a:not(.bbdoc-button), .bbdoc-doc.bbdoc-upsell a:not(.bbdoc-button) { color: var(--bb-color-blue); } .bbdoc-doc.bbdoc-sales .bbdoc-text li, .bbdoc-doc.bbdoc-upsell .bbdoc-text li { font-family: var(--bb-font-body); font-size: var(--bb-size-body); color: var(--bb-color-ink); line-height: normal; margin: 0; } .bbdoc-doc.bbdoc-sales .bbdoc-text h1, .bbdoc-doc.bbdoc-upsell .bbdoc-text h1 { font-weight: 400; font-size: 30px; color: var(--bb-color-ink); line-height: normal; margin: 20px 0 .67em; } .bbdoc-doc.bbdoc-sales .bbdoc-text h2, .bbdoc-doc.bbdoc-upsell .bbdoc-text h2 { font-family: var(--bb-font-body); font-weight: 700; font-size: 24px; color: var(--bb-color-blue); line-height: normal; margin: 40px 0 .83em; } .bbdoc-doc.bbdoc-sales .bbdoc-text h3, .bbdoc-doc.bbdoc-upsell .bbdoc-text h3 { font-family: var(--bb-font-body); font-weight: 700; font-size: 20px; color: var(--bb-color-ink); line-height: normal; margin: 20px 0 1em; } .bbdoc-doc.bbdoc-sales .bbdoc-text h4, .bbdoc-doc.bbdoc-upsell .bbdoc-text h4 { font-family: var(--bb-font-body); font-weight: 700; font-size: 20px; color: var(--bb-color-ink); line-height: normal; margin: 20px 0 1.33em; } /* legacy /pr/ headings get bold from an inner / while the heading element itself stays its base weight (the site has no h*-strong reset). The engine's `.bbdoc-text h* strong{font-weight:inherit}` cancels that, so restore real bold for sales/upsell headings to match the original glyph rendering. */ .bbdoc-doc.bbdoc-sales .bbdoc-text h1 b, .bbdoc-doc.bbdoc-sales .bbdoc-text h1 strong, .bbdoc-doc.bbdoc-sales .bbdoc-text h2 b, .bbdoc-doc.bbdoc-sales .bbdoc-text h2 strong, .bbdoc-doc.bbdoc-sales .bbdoc-text h3 b, .bbdoc-doc.bbdoc-sales .bbdoc-text h3 strong, .bbdoc-doc.bbdoc-sales .bbdoc-text h4 b, .bbdoc-doc.bbdoc-sales .bbdoc-text h4 strong, .bbdoc-doc.bbdoc-upsell .bbdoc-text h1 b, .bbdoc-doc.bbdoc-upsell .bbdoc-text h1 strong, .bbdoc-doc.bbdoc-upsell .bbdoc-text h2 b, .bbdoc-doc.bbdoc-upsell .bbdoc-text h2 strong, .bbdoc-doc.bbdoc-upsell .bbdoc-text h3 b, .bbdoc-doc.bbdoc-upsell .bbdoc-text h3 strong, .bbdoc-doc.bbdoc-upsell .bbdoc-text h4 b, .bbdoc-doc.bbdoc-upsell .bbdoc-text h4 strong { font-weight: 700; }