/
to --lp-text with !important, so muted copy has to shout back */
.ag-webinar .ag-webinar__lead {
font-size: clamp(16px, 1.6vw, 18px) !important; line-height: 1.6 !important;
color: var(--lp-text-muted, #6B7080) !important; margin: 0 0 26px; max-width: 60ch;
}
.ag-webinar .ag-webinar__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(24px, 3.2vw, 36px); padding: 0; }
.ag-webinar .ag-webinar__meta li {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 15px; border-radius: 10px;
background: var(--lp-bg, #FAFAF7); border: 1px solid var(--lp-border, #EAE7DF);
font-size: 13.5px !important; font-weight: 600;
color: var(--lp-ink, #1A1F2E) !important; list-style: none;
}
.ag-webinar .ag-webinar__meta svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--lp-brand-blue, #4285F4); }
.ag-webinar .ag-webinar__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: clamp(28px, 4vw, 54px); align-items: start; }
.ag-webinar .ag-webinar__agenda-label { font-size: 12px !important; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--lp-text-muted, #6B7080) !important; margin: 0 0 18px; }
.ag-webinar .ag-webinar__agenda { margin: 0; padding: 0; list-style: none; counter-reset: wb; }
.ag-webinar .ag-webinar__agenda li { position: relative; counter-increment: wb; padding: 0 0 18px 40px; list-style: none; }
.ag-webinar .ag-webinar__agenda li:last-child { padding-bottom: 0; }
.ag-webinar .ag-webinar__agenda li::before {
content: counter(wb, decimal-leading-zero);
position: absolute; left: 0; top: 2px;
font-size: 12px; font-weight: 700; letter-spacing: .05em;
color: var(--lp-brand-blue, #4285F4);
}
.ag-webinar .ag-webinar__agenda h3 { font-size: clamp(15.5px, 1.5vw, 17px); font-weight: 700; line-height: 1.4; letter-spacing: -.2px; color: var(--lp-ink, #1A1F2E); margin: 0 0 5px; }
.ag-webinar .ag-webinar__agenda p { font-size: 14px !important; line-height: 1.55 !important; color: var(--lp-text-muted, #6B7080) !important; margin: 0; }
/* the sign-up rail */
.ag-webinar .ag-webinar__rail {
padding: clamp(22px, 2.6vw, 28px); border-radius: 16px;
background: var(--lp-bg-tint, #F4F2ED); border: 1px solid var(--lp-border, #EAE7DF);
}
.ag-webinar .ag-webinar__price { font-size: clamp(26px, 3vw, 34px) !important; font-weight: 700; letter-spacing: -1px; line-height: 1.1 !important; color: var(--lp-ink, #1A1F2E) !important; margin: 0 0 4px; }
.ag-webinar .ag-webinar__price-sub { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--lp-text, #2A3040) !important; margin: 0 0 20px; }
/* the CTA reuses the page's own .ag-btn-primary — same blue, same shadow, same hover */
.ag-webinar .ag-webinar__cta { display: flex !important; width: 100%; justify-content: center; }
.ag-webinar .ag-webinar__note { display: block; margin-top: 13px; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--lp-text, #2A3040); }
.ag-webinar .ag-webinar__host { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--lp-border, #EAE7DF); }
.ag-webinar .ag-webinar__host-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--lp-text-muted, #6B7080); margin-bottom: 8px; }
.ag-webinar .ag-webinar__host-name { display: block; font-size: 15.5px; font-weight: 700; color: var(--lp-ink, #1A1F2E); }
.ag-webinar .ag-webinar__host-role { display: block; font-size: 13px; color: var(--lp-text-muted, #6B7080); margin-top: 2px; }
@media (max-width: 900px) {
.ag-webinar .ag-webinar__grid { grid-template-columns: 1fr; gap: 30px; }
/* The rail used to be pulled ABOVE the content here (order: -1), which was right when it
held only "Free" and a button — a short offer block reads well up front. It now holds a
413px registration form, so that same rule asked people for their name and email ~865px
before the title told them what they were signing up for. Content first, form after. */
.ag-webinar .ag-webinar__title { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.ag-webinar .ag-webinar__eyebrow span[aria-hidden="true"] { animation: none; }
}
/* ── Teaser at the end of the Obstacles section ────────────────────────────
A soft hand-off into the #webinar section that follows, for readers who
scroll past the announcement bar (banner blindness is real).
It must NOT be a pill: the Google Partner badge sits directly above it with
the same white fill, the same 100px radius and the same #2A3040 text, so a
pill here was visually indistinguishable from a static credential badge —
the one link into the section read as decoration. It is a LINK now: brand
blue, underlined, no fill, no border. That also keeps it subordinate to the
filled button a screen below, which is the actual conversion point. ── */
.ag-wb-teaser {
display: inline-flex; align-items: baseline; gap: 8px;
margin-top: 26px; padding: 4px 2px;
background: none; border: 0; border-radius: 4px;
font-size: 15.5px; line-height: 1.45; font-weight: 600;
color: var(--lp-brand-blue-hover, #1A73E8); text-decoration: underline;
text-decoration-thickness: 1.5px; text-underline-offset: 4px;
text-decoration-color: rgba(26, 115, 232, 0.4);
transition: text-decoration-color .2s ease, color .2s ease;
}
.ag-wb-teaser:hover { color: var(--lp-brand-blue-hover, #1A73E8); text-decoration-color: currentColor; }
.ag-wb-teaser .ag-wb-teaser__dot { display: none; }
/* `.lp-adgrant .ag-obstacles .agency-intro strong` repaints to --lp-ink with !important
at (0,3,1) — inside a link it has to follow the link, so this has to match that specificity
(it wins the tie on source order, this sheet loading last). */
.lp-adgrant .ag-wb-teaser .ag-wb-teaser__text strong { color: inherit !important; font-weight: 700; }
/* the link scrolls DOWN to the section, so the marker points down and nudges down on hover */
.ag-wb-teaser .ag-wb-teaser__arrow { display: inline-flex; align-self: center; text-decoration: none; transition: transform .25s ease; }
.ag-wb-teaser .ag-wb-teaser__arrow svg { width: 16px; height: 16px; }
.ag-wb-teaser:hover .ag-wb-teaser__arrow { transform: translateY(3px); }
@media (max-width: 600px) { .ag-wb-teaser { font-size: 14.5px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .ag-wb-teaser, .ag-wb-teaser .ag-wb-teaser__arrow { transition: none; } }
/* ── Design-fundamentals pass ──────────────────────────────────────────────
Four things an audit against the design fundamentals turned up. ── */
/* 1 · Keyboard focus. None of the three interactive elements had a visible
state — the CTA declared an outline width with style:none, the teaser and
the bar button had nothing at all. */
.ag-webinar .ag-webinar__cta:focus-visible,
.ag-wb-teaser:focus-visible,
.ag-wb-bar .ag-wb-bar__cta:focus-visible {
outline: 3px solid var(--lp-brand-blue-hover, #1A73E8);
outline-offset: 3px;
}
.ag-wb-bar .ag-wb-bar__cta:focus-visible { outline-color: #fff; }
/* 2 · Measure. Running text sits best near 65 characters; the lead ran to 69
and the agenda descriptions to 78. (`ch` is the width of "0", wider than an
average glyph, so it overshoots — px is the honest unit here.) */
.ag-webinar .ag-webinar__lead { max-width: 520px; }
.ag-webinar .ag-webinar__agenda p { max-width: 500px; }
/* 3 · Balanced headings. The three-line H2 wrapped ragged; balance evens the
lines without touching the type scale. */
.ag-webinar .ag-webinar__title,
.ag-webinar .ag-webinar__agenda h3 { text-wrap: balance; }
/* 4 · The 01–05 markers stack in a column, so their digits should align. */
.ag-webinar .ag-webinar__agenda li::before { font-variant-numeric: tabular-nums; }
/* Widening the card to the page grid left the header stranded at the top-left with ~450px of
nothing beside it. The header now sits in the grid's left column, so the sign-up rail runs
alongside it from the top and the card has no dead zone. */
.ag-webinar .ag-webinar__grid { align-items: start; }
.ag-webinar .ag-webinar__meta { margin-bottom: 34px; }
/* The sign-up rail follows the reader down the agenda instead of scrolling away — it is ~440px
shorter than the column beside it, which is exactly the travel a sticky needs. The offset is
derived, not guessed: the announcement bar is --wb-h tall and the scrolled navbar adds 74px
below it (measured bottom: 122px at --wb-h 48), so --wb-h + 90 clears both with air to spare.
`align-items: start` on the grid is what makes it possible — a stretched grid item cannot stick.
Disabled below 900px, where the grid collapses and the rail already sits above the content. */
@media (min-width: 901px) {
.ag-webinar .ag-webinar__rail {
position: sticky;
top: calc(var(--wb-h, 48px) + 90px);
}
}
/* The section CTA is the journey's actual conversion point and was inheriting the page button's
16px/500 — underweight for the one place that has to close. 19px/700 also crosses the WCAG
large-text threshold (14pt bold), which drops the required ratio to 3:1, so the page's own
--lp-brand-blue (3.56:1 on white) passes here instead of failing as normal text. */
.ag-webinar .ag-webinar__cta {
padding: 18px 24px;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.2px;
}
.ag-webinar .ag-webinar__cta .icon { width: 22px; height: 22px; }
@media (max-width: 400px) {
/* below the large-text threshold the lighter blue would drop to 3.56:1 — use the darker one */
.ag-webinar .ag-webinar__cta { font-size: 16.5px; padding: 16px 18px; background: var(--lp-brand-blue-hover, #1A73E8) !important; }
}
/* ─ Final title: the second clause stays inside the and (so the heading text is the full
confirmed title) but is set smaller, or a 100-character headline swallows the layout. ─ */
.ag-webinar .ag-webinar__title-sub {
display: block; margin-top: .5em;
font-size: .5em; font-weight: 600; line-height: 1.32; letter-spacing: -.2px;
color: var(--lp-ink, #1A1F2E); opacity: .72;
}
/* ─ "Register anyway, we'll send the replay" — removes the scheduling objection, which
blocks more registrations than scarcity wins. ─ */
.ag-webinar .ag-webinar__replay {
margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center;
color: var(--lp-ink, #1A1F2E) !important; opacity: .78;
}
/* ─ Live ⇄ replay copy switch. Base rules FIRST: a media query adds no specificity, so a
base rule declared later would silently beat one inside a query. ─ */
[data-wb-replay] { display: none; }
body.wb-replay [data-wb-live] { display: none; }
/* `.ag-webinar .ag-webinar__meta li` is (0,3,0) and set to inline-flex — a bare
[data-wb-replay] at (0,1,0) loses to it, so the chip rules must match that weight. */
.ag-webinar .ag-webinar__meta li[data-wb-replay] { display: none; }
body.wb-replay .ag-webinar .ag-webinar__meta li[data-wb-live] { display: none; }
body.wb-replay .ag-webinar .ag-webinar__meta li[data-wb-replay] { display: inline-flex; }
body.wb-replay .ag-wb-bar span[data-wb-replay],
body.wb-replay .ag-webinar span[data-wb-replay] { display: inline; }
/* ═══ B · the bar arrives ══════════════════════════════════════════════════════
position:fixed, and its space is reserved by --wb-h on the navbar and hero — so
this animation moves the bar without moving anything else (no layout shift).
Hidden by default and revealed by script: the whole webinar block already depends
on that script (every href is wired there), so this adds no new failure mode. */
.ag-wb-bar {
transform: translateY(-100%); opacity: 0;
transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
body.wb-bar-in .ag-wb-bar { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.ag-wb-bar { transition: none; }
}
/* ═══ C · the hesitation nudge ═════════════════════════════════════════════════
Bottom-right is free on this page (checked: nothing else is fixed there). Sits
below the announcement bar and the navbar in the stack so it can never cover
navigation. Base rules FIRST — a media query adds no specificity. */
.ag-wb-nudge {
position: fixed; right: 18px; bottom: 18px; z-index: 9999990;
display: flex; align-items: stretch; gap: 2px;
max-width: min(340px, calc(100vw - 36px));
border-radius: 14px; overflow: hidden;
background: var(--lp-surface, #fff);
border: 1px solid var(--lp-border, #EAE7DF);
box-shadow: 0 12px 32px rgba(26, 31, 46, .16);
opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97);
pointer-events: none;
transition: opacity .34s ease, transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s .34s;
}
.ag-wb-nudge.is-shown {
opacity: 1; visibility: visible; transform: none; pointer-events: auto;
transition-delay: 0s;
}
.ag-wb-nudge .ag-wb-nudge__link {
display: flex; align-items: center; gap: 10px;
padding: 13px 6px 13px 15px; text-decoration: none; flex: 1 1 auto;
}
.ag-wb-nudge .ag-wb-nudge__dot {
width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%;
background: var(--lp-gold, #34A853);
animation: ag-wb-pulse 2.2s ease-in-out infinite;
}
.ag-wb-nudge .ag-wb-nudge__copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ag-wb-nudge .ag-wb-nudge__lead {
font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
color: var(--lp-text, #6B7080) !important;
}
.ag-wb-nudge .ag-wb-nudge__copy strong {
/* #1F6B35 rather than the #2D8F48 used elsewhere: on white that green only reaches
3.1:1, below AA for 13px text. This one clears 4.5:1. */
font-size: 13px; font-weight: 700; color: #1F6B35 !important;
}
.ag-wb-nudge .ag-wb-nudge__close {
display: flex; align-items: center; justify-content: center;
width: 34px; flex: 0 0 auto; padding: 0;
border: 0; border-left: 1px solid var(--lp-border, #EAE7DF);
background: transparent; color: var(--lp-text, #6B7080);
transition: background .2s ease, color .2s ease;
}
.ag-wb-nudge .ag-wb-nudge__close svg { width: 14px; height: 14px; }
.ag-wb-nudge .ag-wb-nudge__close:hover { background: var(--lp-bg, #FAFAF7); color: var(--lp-ink, #1A1F2E); }
.ag-wb-nudge .ag-wb-nudge__link:hover .ag-wb-nudge__copy strong { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.ag-wb-nudge { transition: opacity .01s, visibility 0s; transform: none; }
.ag-wb-nudge .ag-wb-nudge__dot { animation: none; }
}
@media (max-width: 767px) {
.ag-wb-nudge { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
/* ═══ Registration form ════════════════════════════════════════════════════════
The theme paints every