/* * AOM Forum — page-specific styles * --------------------------------------------------------------------------- * Wired via 'enqueue_assets' => 'omnicom_aomf_enqueue_assets' in inc/blocks.php. * Front end: loaded only on pages that actually render an -aomf block. * Block editor: loaded on every editor screen, so these styles show up while * editing (that is ACF's behaviour for all registered block types). * * Every -aomf template part carries its own root class ALONGSIDE the theme's * original classes, so the theme styling still applies and anything written * here only affects the AOM Forum page: * * .aomf-event-hero section.event-hero-section * .aomf-event-agenda section.agenda-section * .aomf-content-cards the block's outer background wrapper * .aomf-people-cards section.container * .aomf-marketo-embed section.marketo-embed-section * * Plus `.aomf-page` on , added by omnicom_aomf_body_class() whenever the * page uses an -aomf block. Use it for chrome that lives outside the blocks - * the site header below is the case in point. * * Always scope to one of those roots. A bare `.agenda-section { ... }` would * leak into every other page that uses the original block. * * Loaded after app.css, so equal-specificity rules here win. No !important * needed for the common case. */ /* ------------------------------------------------------------------------- * Site header - black bar, white text * * The header markup is shared with the whole site, so every rule here is * scoped to .aomf-page. Bootstrap's .bg-white utility and .navbar-light link * colours both ship with !important, which is the only reason it appears * below; the rest wins on ordinary specificity because aomf.css loads after * app.css. * ---------------------------------------------------------------------- */ .aomf-page .site-header, .aomf-page .site-header.bg-white { background-color: #000 !important; } .aomf-page .site-header .navbar-nav .nav-link, .aomf-page .site-header .navbar-nav .nav-link.dropdown-toggle, .aomf-page .site-header .navbar-brand { color: #fff; } .aomf-page .site-header .navbar-nav .nav-link:hover, .aomf-page .site-header .navbar-nav .nav-link:focus, .aomf-page .site-header .navbar-nav .nav-link.active { color: rgba(255, 255, 255, .75); } /* Logo: same artwork with OMNICOM knocked out to white, Adobe still red. Swapped with content: url() so the markup stays untouched - the file is 316x41 like the original, so nothing shifts. */ .aomf-page .site-header .navbar-brand img { content: url('../img/logo-dark-nav.webp'); } .aomf-page .site-header .dropdown-caret { color: #fff; } /* Dropdown panel follows the bar rather than staying white */ .aomf-page .site-header .dropdown-menu { background-color: #000; border: 1px solid rgba(255, 255, 255, .14); } /* The theme styles these through a long descendant chain (.site-header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item), so the selectors below mirror it with .aomf-page in front to outrank it. Shorter selectors here lose and the items stay dark-on-black. */ .aomf-page .site-header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item { color: #fff; background-color: transparent; } .aomf-page .site-header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover, .aomf-page .site-header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:focus, .aomf-page .site-header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item.active { color: #fff; background-color: rgba(255, 255, 255, .1); } /* Mobile: custom burger lines + the panel the collapsed menu opens onto. The theme paints the lines with `currentcolor` off a .navbar-toggler .burger-toggler chain, so this matches that specificity too. */ .aomf-page .site-header .navbar-toggler.burger-toggler { color: #fff; border-color: rgba(255, 255, 255, .4); } .aomf-page .site-header .navbar-toggler.burger-toggler .burger-line { background-color: #fff; } @media (max-width: 991.98px) { .aomf-page .site-header .navbar-collapse { background-color: #000; } } /* ------------------------------------------------------------------------- * Event Hero * ---------------------------------------------------------------------- */ /* Drop the blurred pane the theme lays over the hero image. .event-hero-content::after is an absolutely positioned, full-size overlay carrying backdrop-filter: blur(5px); killing `content` stops the pseudo element from being generated at all. The dark gradient on .hero-overlay is what keeps the copy legible, and that stays. */ .aomf-event-hero .event-hero-content::after { content: none; } /* Drop the dark gradient vignette baked into the bottom of the bg image. */ .aomf-event-hero .event-hero-background-image::after { content: none; } /* Drop the full-height dark gradient overlay too - same look, different layer (.hero-overlay is a real sibling div, not a pseudo-element, hence `background` here instead of `content: none`). */ .aomf-event-hero .hero-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -75.92%, rgba(0, 0, 0, 0.48) 54.37%, rgba(0, 0, 0, 0.60) 100%) !important; } /* The theme's own rule sets `inset: 0` (which alone would fill the section) but then overrides it with a hardcoded height:80%, leaving the section's own black background exposed below the image. `height: auto` un-fixes it: with inset:0 still in effect, an absolutely positioned box with auto height resolves from its top/bottom offsets, i.e. fills the section exactly. */ .aomf-event-hero .event-hero-background-image { height: auto; background-position: center 74% !important; background-size: cover !important; } /* Pixel-perfect reset: strip every margin/padding/gap and normalize copy typography (no custom font-family, no italic, inherited/default font-size) so the block rebuilds from a clean baseline against Figma. Containers stay in the DOM, only their box-model spacing and type overrides are zeroed. */ .aomf-event-hero, .aomf-event-hero * { margin: 0 !important; padding: 0 !important; gap: 0 !important; } .aomf-event-hero h1, .aomf-event-hero h2, .aomf-event-hero h3, .aomf-event-hero h4, .aomf-event-hero p, .aomf-event-hero div, .aomf-event-hero a { font-family: inherit !important; font-style: normal !important; font-size: inherit !important; } /* the wildcard reset above zeroes margin AND padding on EVERY descendant, including Bootstrap's .container (centered via margin:auto, edge gutter via its own padding-inline). Restore both: same 1.875rem-min gutter formula the contact section uses, so every section shares one alignment language. */ .aomf-event-hero .container { max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: max(1.875rem, calc(50% - 37.5rem)) !important; } /* drop the theme's fixed banner height (single-event.css: min-height: 90vh) so the section hugs its content instead of forcing a viewport-tall banner. */ .aomf-event-hero { min-height: auto !important; } /* Figma: pt 377 / pb 110, fluid down to pt140/pb56 on mobile (390px ref) so the hero doesn't push all its copy below the fold on a phone. Two-point clamp (390px→1440px) so the mobile figure is an actual floor, not a slope value that never gets reached - see the mobile audit note above `.row` below. */ .aomf-event-hero { padding-top: clamp(8.75rem, 3.248rem + 22.571vw, 23.5625rem) !important; padding-bottom: clamp(3.5rem, 2.246rem + 5.143vw, 6.875rem) !important; } /* All the vw-only clamps in this file were originally slope-only (no intercept), tuned to hit their max at a 1440px reference; that leaves the stated min unreachable on any real device (e.g. clamp(1.5rem, 13.89vw, 12.5rem) only hits 1.5rem below a 173px viewport). Rebuilt as two-point clamps (390px mobile ref → 1440px desktop ref) so both ends are real. */ .aomf-event-hero .row { --hero-col-gap: clamp(1.5rem, -2.586rem + 16.762vw, 12.5rem); /* 24px→200px, 390px→1440px */ gap: var(--hero-col-gap) !important; } @media (min-width: 992px) { /* col-lg-6/col-lg-5 only sit side-by-side from lg up; shrink them by half the gap each so the pair still totals 100% instead of wrapping. */ .aomf-event-hero .row { flex-wrap: nowrap !important; } .aomf-event-hero .col-lg-6 { flex: 0 0 calc(50% - var(--hero-col-gap) / 2) !important; max-width: calc(50% - var(--hero-col-gap) / 2) !important; } .aomf-event-hero .col-lg-5 { flex: 0 0 calc(41.6667% - var(--hero-col-gap) / 2) !important; max-width: calc(41.6667% - var(--hero-col-gap) / 2) !important; } } /* Figma typography */ .aomf-event-hero h1 { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 2.875rem !important; /* 46px */ line-height: 1.05 !important; letter-spacing: -0.0575rem !important; /* -0.92px */ } .aomf-event-hero h2 { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 3.625rem !important; /* 58px */ line-height: 1 !important; padding-top: 1.125rem !important; /* 18px, row 2 of col-lg-6 */ } .aomf-event-hero .col-lg-6 p { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 1.875rem !important; /* 30px */ line-height: 1 !important; padding-top: 1.5rem !important; /* 24px, row 3 of col-lg-6 */ } .aomf-event-hero .col-lg-5 { display: flex !important; flex-direction: column !important; gap: clamp(1.5rem, 0.989rem + 2.095vw, 2.875rem) !important; /* 24px→46px, 390px→1440px */ } /* flex-column defaults every child to align-items:stretch (100% of the column's width) - fine for the copy div (it needs the full width to wrap), but it also stretches the button, and its arrow (~45px past the button's own right edge) then overflows past the viewport edge on mobile. Keep the button at its natural content width instead. */ .aomf-event-hero .col-lg-5 .btn { align-self: flex-start !important; } .aomf-event-hero .col-lg-5 > div { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 2rem !important; /* 32px */ line-height: 1.05 !important; letter-spacing: -0.06rem !important; /* -0.96px */ } @media (max-width: 991.98px) { .aomf-event-hero h2 { font-size: clamp(2.375rem, 11vw, 3.625rem) !important; line-height: 1 !important; } .aomf-event-hero .col-lg-6 p, .aomf-event-hero .col-lg-5 > div { font-size: clamp(1.25rem, 6vw, 1.875rem) !important; line-height: 1.18 !important; } .aomf-event-hero .col-lg-6 > p { padding-top: 0 !important; } } .aomf-event-hero .btn { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 1.125rem !important; /* 18px */ line-height: 1.2 !important; letter-spacing: 0.01125rem !important; /* 0.18px */ padding: 0.8125rem 1.5rem !important; /* py13 px24 */ } .aomf-event-hero .btn::after { top: 0 !important; bottom: 0 !important; height: auto !important; /* match the btn's own height instead of the theme's fixed 45px */ } /* ------------------------------------------------------------------------- * Event Agenda * ---------------------------------------------------------------------- */ .aomf-page .aomf-event-agenda { background-color: #F7F4F4; } /* Remove the orange sunburst decoration - not in Figma, hidden rather than touching event-agenda-aomf.php's markup. */ .aomf-page .aomf-event-agenda .circle-graphic { display: none !important; } /* Pixel-perfect reset (see Event Hero above for rationale). */ .aomf-event-agenda, .aomf-event-agenda * { margin: 0 !important; padding: 0 !important; gap: 0 !important; } .aomf-event-agenda h1, .aomf-event-agenda h2, .aomf-event-agenda h3, .aomf-event-agenda h4, .aomf-event-agenda p, .aomf-event-agenda div, .aomf-event-agenda a { font-family: inherit !important; font-style: normal !important; font-size: inherit !important; } .aomf-event-agenda .container { max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: max(1.875rem, calc(50% - 37.5rem)) !important; display: flex !important; flex-direction: column !important; gap: clamp(1.25rem, 0.902rem + 1.429vw, 2.1875rem) !important; /* 20px→35px, 390px→1440px */ } /* Figma: the black agenda-list box (3rd row) has p-[54px] - fluid down to 24px on mobile, since this padding eats into an already-narrow phone width on both sides before the agenda copy even starts. */ .aomf-event-agenda .agenda-box { padding: clamp(1.5rem, 0.804rem + 2.857vw, 3.375rem) !important; /* 24px→54px, 390px→1440px */ } /* Requested spacing adjustment: remove only the agenda box's vertical padding while keeping its horizontal inner gutter. */ .aomf-page .aomf-event-agenda .agenda-box { padding-block: 0 !important; } /* uniform py on every agenda item, first/last included */ .aomf-event-agenda .agenda-item { padding-top: clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem) !important; /* 24px→40px */ padding-bottom: clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem) !important; /* 24px→40px */ gap: clamp(1.75rem, 0.321rem + 2.976vw, 3rem) !important; /* 28px→48px from tablet through desktop */ } /* both columns vertically centered against each other (rows with a 2-line title are taller than the 1-line time) - md+ only, since .agenda-item switches to flex-column below md and align-items would then center the columns horizontally instead, pulling copy off the left edge */ @media (min-width: 768px) { .aomf-event-agenda .agenda-item { align-items: center !important; } } @media (max-width: 767.98px) { .aomf-event-agenda .agenda-item { align-items: flex-start !important; gap: 0.75rem !important; } } /* Equal-height card grid for Adobe MAX. */ .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 24px !important; align-items: stretch !important; grid-auto-rows: 1fr !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) > p { display: none !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) > .col-lg-4 { display: flex !important; align-items: stretch !important; width: auto !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) .content-card { height: 100% !important; min-height: 0 !important; box-sizing: border-box !important; padding: 46px 30px !important; } /* copy always left-aligned/start, desktop and mobile alike */ .aomf-event-agenda .agenda-item, .aomf-event-agenda .agenda-item .col-md-5, .aomf-event-agenda .agenda-item .col-md-7 { text-align: left !important; } /* Bootstrap's 5/7 columns total 100%, while the agenda item also has a gap. Let flex distribute the remaining width after that gap; min-width: 0 lets descriptions wrap within their own column instead of extending past it. */ @media (min-width: 768px) { .aomf-event-agenda .agenda-item > .col-md-5 { flex: 5 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } .aomf-event-agenda .agenda-item > .col-md-7 { flex: 7 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } } /* Figma: pt 83 / pb 123, fluid down to pt40/pb56 on mobile (390px ref) */ .aomf-event-agenda { padding-top: clamp(2.5rem, 1.502rem + 4.095vw, 5.1875rem) !important; padding-bottom: clamp(3.5rem, 1.944rem + 6.381vw, 7.6875rem) !important; } /* Figma typography */ .aomf-event-agenda .fs-40 { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 2.875rem !important; /* 46px */ line-height: 1 !important; letter-spacing: -0.0575rem !important; /* -0.92px */ } .aomf-event-agenda p.fs-22 { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 2rem !important; /* 32px */ line-height: 1.05 !important; letter-spacing: -0.06rem !important; /* -0.96px */ } .aomf-event-agenda .fs-46 { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 2.875rem !important; /* 46px */ line-height: 1 !important; color: #ff672e !important; } @media (max-width: 991.98px) { .aomf-event-agenda .agenda-item .fs-46 { font-size: clamp(1.75rem, 8vw, 2.875rem) !important; line-height: 1 !important; } } .aomf-event-agenda h4.cormorant { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 1.875rem !important; /* 30px */ line-height: 1 !important; } .aomf-event-agenda .agenda-description { margin-top: 0.75rem !important; font-family: "Instrument Sans", sans-serif !important; font-weight: 500 !important; font-style: normal !important; font-size: 1rem !important; line-height: 1.5 !important; color: #fff !important; } /* ------------------------------------------------------------------------- * Content Cards * ---------------------------------------------------------------------- */ /* Pixel-perfect reset. content-cards-aomf.php renders the shared template-parts/section-heading.php and template-parts/content-card-single.php partials, so their type/spacing utility classes (fs-*, cormorant, fst-italic, mb-*, ps-lg-*...) can't be edited directly without leaking to every other page that uses those partials - hence a scoped override here instead. */ .aomf-content-cards, .aomf-content-cards * { margin: 0 !important; padding: 0 !important; gap: 0 !important; } .aomf-content-cards h1, .aomf-content-cards h2, .aomf-content-cards h3, .aomf-content-cards h4, .aomf-content-cards p, .aomf-content-cards div, .aomf-content-cards a { font-family: inherit !important; font-style: normal !important; font-size: inherit !important; } .aomf-content-cards .container { max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: max(1.875rem, calc(50% - 37.5rem)) !important; } /* Figma: pt 127 / pb 191, plus one extra line-height (1.6rem, matching the body copy's line-height) worth of breathing room at the bottom. Fluid down to pt56/pb104 on mobile (390px ref). */ .aomf-content-cards { padding-top: clamp(3.5rem, 1.852rem + 6.762vw, 7.9375rem) !important; padding-bottom: clamp(6.5rem, 3.886rem + 10.724vw, 13.5375rem) !important; } /* Figma bg: panel-discussion photo fading to black, exported at 2x */ .aomf-content-cards { background-image: url('../img/content-cards-bg@2x.webp') !important; background-repeat: no-repeat !important; background-position: left bottom !important; background-size: cover !important; } @media (max-width: 991.98px) { .aomf-content-cards { background-image: url('../img/aomf-content-cards-bg-mobile.jpg') !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: contain !important; } } /* Figma typography */ .aomf-content-cards h2 { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 2.875rem !important; /* 46px */ line-height: 1 !important; letter-spacing: -0.0575rem !important; /* -0.92px */ } .aomf-content-cards .fs-14 { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-size: 1rem !important; /* 16px */ line-height: 1.6 !important; } /* Figma separates the two paragraphs with a blank spacer line - match that with a one-line-height gap instead of an empty

*/ .aomf-content-cards .fs-14 p { margin-bottom: 1.6em !important; } .aomf-content-cards .fs-14 p:last-child { margin-bottom: 0 !important; } /* Figma: 2-col row with fixed-ish widths (heading 479px, copy 560px) spread across the row instead of a 50/50 split, fluid down to 100px on narrow viewports */ /* The shared section-heading.php partial gives its title col a responsive Bootstrap mb-4/mb-lg-0 (gap only while stacked below md) - our blanket margin:0 reset kills that with nothing to replace it, so the heading and paragraph touch directly once they stack on mobile. row-gap only matters once the row's children wrap to their own line, so it's a no-op on desktop where they sit side by side - safe to set unconditionally. Not trying to match a Figma mobile spec (there isn't one) - just a normal, standard gap. */ .aomf-content-cards .row.mb-4 { row-gap: 1.5rem !important; } .aomf-content-cards .row { justify-content: space-between !important; } @media (min-width: 768px) { .aomf-content-cards .row > .col-md-6:first-child { flex: 0 0 auto !important; max-width: clamp(6.25rem, 33.26vw, 29.9375rem) !important; /* 100px - 479px */ } .aomf-content-cards .row > .col-md-6.ps-lg-5 { flex: 0 0 auto !important; max-width: clamp(6.25rem, 38.89vw, 35rem) !important; /* 100px - 560px */ } } @media (max-width: 767.98px) { .aomf-content-cards .row > .col-md-6:first-child, .aomf-content-cards .row > .col-md-6.ps-lg-5 { width: 100% !important; } } /* ------------------------------------------------------------------------- * People Cards * ---------------------------------------------------------------------- */ /* Pixel-perfect reset (see Event Hero above for rationale). */ .aomf-people-cards, .aomf-people-cards * { margin: 0 !important; padding: 0 !important; gap: 0 !important; } .aomf-people-cards h1, .aomf-people-cards h2, .aomf-people-cards h3, .aomf-people-cards h4, .aomf-people-cards p, .aomf-people-cards div, .aomf-people-cards a, .aomf-people-cards span { font-family: inherit !important; font-style: normal !important; font-size: inherit !important; } /* the root section IS .container here (section.container.aomf-people-cards) */ .aomf-people-cards { max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: max(1.875rem, calc(50% - 37.5rem)) !important; display: flex !important; flex-direction: column !important; gap: clamp(2.5rem, 1.664rem + 3.429vw, 4.75rem) !important; /* 40px→76px, 390px→1440px, between the intro row and the cards grid */ } /* Figma: pt 54 / pb 148, fluid down to pt32/pb64 on mobile (390px ref) */ .aomf-people-cards { padding-top: clamp(2rem, 1.489rem + 2.095vw, 3.375rem) !important; padding-bottom: clamp(4rem, 2.05rem + 8vw, 9.25rem) !important; } /* Same missing-mobile-gap issue as Content Cards: the badge+heading col and the subtitle col sit side by side on desktop with no gap needed, but stack directly on top of each other below md with nothing keeping them apart. row-gap is a no-op while they're side by side, so this is desktop-safe. */ .aomf-people-cards .row.mb-5 { row-gap: 1.5rem !important; } /* Figma typography */ .aomf-people-cards h2 { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 2.875rem !important; /* 46px */ line-height: 1 !important; letter-spacing: -0.0575rem !important; /* -0.92px */ } .aomf-people-cards h4.cormorant, .aomf-people-cards h4.cormorant p { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 2rem !important; /* 32px */ line-height: 1.05 !important; letter-spacing: -0.06rem !important; /* -0.96px */ } .aomf-people-cards .expert-card p:not(.cormorant) { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 1.25rem !important; /* 20px */ line-height: 1.2 !important; letter-spacing: -0.025rem !important; /* -0.4px */ color: #000 !important; padding-top: 1.5rem !important; /* 24px, below the image */ } .aomf-people-cards .expert-card p.cormorant { font-family: "Cormorant Garamond", serif !important; font-weight: 400 !important; font-style: italic !important; font-size: 1.25rem !important; /* 20px */ line-height: 1.2 !important; letter-spacing: 0.0125rem !important; /* 0.2px */ color: #212529 !important; } .aomf-people-cards .expert-card p.cormorant.mb-1 { padding-top: 0.75rem !important; /* 12px, role */ } .aomf-people-cards .expert-card p.cormorant.mb-0 { padding-top: 0.5rem !important; /* 8px, company */ } /* 2nd row: plain grid wrapper instead of a Bootstrap row/col-md-3 grid. auto-fit + minmax fits as many 282px (Figma card width) columns as the row allows, wrapping responsively with no manual breakpoints needed. */ .aomf-people-cards .expert-cards-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(17.625rem, 1fr)) !important; gap: 1.5rem !important; /* 24px, matches Figma's gap-24 */ } /* ------------------------------------------------------------------------- * Marketo Embed * ---------------------------------------------------------------------- */ /* Ported from acf/aaom-contact on the AAOM page (adobe.omc.com/aaom) verbatim, scoped to .aomf-contact-section instead of the bare .contact-section/#contact the original uses, so it can never collide with that block if both ever render on the same page. Keeps this page's own Marketo form (3800) - see blocks/aaom-contact-aomf.php. */ /* ═══════ Contact form (#contact) — match the OMC / Omni HubSpot form field styling ═══════ This is the AAOM ACF "marketo-embed" block: a Marketo form styled by the theme app.css (white square inputs). Override scoped to .aomf-page .aomf-contact-section .contact-card .mktoForm with !important so it beats both the theme rules AND Marketo's inline widths. The black SUBMIT pill + arrow and the labels-above 2-col layout already match OMC — only the FIELD visuals differ, so we restyle inputs/selects/textarea + labels to the OMC spec (gray #f3f3f3 pill, 0.875rem radius, 1.5625rem left indent, 0.9375rem/600 text). */ .aomf-page .aomf-contact-section .contact-card .mktoForm input.mktoField, .aomf-page .aomf-contact-section .contact-card .mktoForm select.mktoField, .aomf-page .aomf-contact-section .contact-card .mktoForm textarea.mktoField { width: 100% !important; background-color: #f3f3f3 !important; border: 0.0625rem solid #dadada !important; border-radius: 0.875rem !important; padding: 0.625rem 0.625rem 0.625rem 1.5625rem !important; font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 600 !important; color: #000 !important; box-shadow: none !important; } .aomf-page .aomf-contact-section .contact-card .mktoForm select.mktoField { padding-right: 2.25rem !important; /* room for the chevron (keep the theme's bg-image arrow) */ } .aomf-page .aomf-contact-section .contact-card .mktoForm textarea.mktoField { min-height: 7.5rem !important; resize: none !important; } /* placeholders + empty select → OMC gray */ .aomf-page .aomf-contact-section .contact-card .mktoForm input.mktoField::placeholder, .aomf-page .aomf-contact-section .contact-card .mktoForm textarea.mktoField::placeholder { color: #929292 !important; } .aomf-page .aomf-contact-section .contact-card .mktoForm select.mktoField:invalid, .aomf-page .aomf-contact-section .contact-card .mktoForm select.mktoField:has(option:checked[value=""]) { color: #929292 !important; } /* focus → white fill, subtle border (OMC) */ .aomf-page .aomf-contact-section .contact-card .mktoForm input.mktoField:focus, .aomf-page .aomf-contact-section .contact-card .mktoForm select.mktoField:focus, .aomf-page .aomf-contact-section .contact-card .mktoForm textarea.mktoField:focus { border-color: #dadada !important; background-color: #fff !important; outline: none !important; } /* labels (OMC: Instrument 17/600 #000, lh 150%) */ .aomf-page .aomf-contact-section .contact-card .mktoForm .mktoLabel, .aomf-page .aomf-contact-section .contact-card .mktoForm .mktoLabel strong { font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 600 !important; font-size: 1.0625rem !important; /* 17px */ color: #000 !important; line-height: 1.5 !important; } /* error states (OMC red) */ .aomf-page .aomf-contact-section .contact-card .mktoForm .mktoField.mktoInvalid { border-color: #f00 !important; } .aomf-page .aomf-contact-section .contact-card .mktoForm .mktoError .mktoErrorMsg { font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; color: #f00 !important; } /* 2-col section layout (OMC): the theme stacks the title row ABOVE a full-width form row. Re-flow the .container into a 2-col grid → left column = heading + paragraph (stacked), right column = the form. Collapses to 1 col below lg. Also hide the section's decorative background image (the OMC section has none). */ .aomf-page #contact.aomf-contact-section > .container { display: grid !important; grid-template-columns: minmax(0,470fr) minmax(0,674fr) !important; /* OMC ratio: left 470 / form 674 */ /* only visible ≥992px (the <992px media query below collapses to 1 column), so the two-point clamp is anchored to that range instead of the usual 390px mobile ref - otherwise the stated 32px min is never reached, same issue as the other vw-only clamps in this file. */ column-gap: clamp(3.1625rem, -1.04rem + 6.777vw, 5.06rem) !important; /* 50.6px→80.96px, 992px→1440px */ align-items: start !important; /* drop Bootstrap's responsive container max-widths (540/720/960/1140) and use the same gutter as every other section → aligned 1200 content with a 1.875rem min gutter at all sizes */ max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: max(1.875rem, calc(50% - 37.5rem)) !important; } .aomf-page #contact.aomf-contact-section > .container > .row.mb-4 { /* left column: heading + lead, stacked */ grid-column: 1 !important; display: flex !important; flex-direction: column !important; margin: 0 !important; } .aomf-page #contact.aomf-contact-section > .container > .row.mb-4 > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; padding-inline: 0 !important; /* drop the Bootstrap col gutter (12px) so the heading/badge/lead align flush to the column edge */ } .aomf-page #contact.aomf-contact-section > .container > .row.mt-4 { /* right column: the form */ grid-column: 2 !important; margin: 0 !important; } .aomf-page #contact.aomf-contact-section > .container > .row.mt-4 > .col-12 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; /* drop the Bootstrap gutter so the form fills the 674 col */ } @media (max-width: 991.98px) { .aomf-page #contact.aomf-contact-section > .container { grid-template-columns: 1fr !important; } .aomf-page #contact.aomf-contact-section > .container > .row.mb-4 { grid-column: 1 !important; margin-bottom: 2rem !important; } .aomf-page #contact.aomf-contact-section > .container > .row.mt-4 { grid-column: 1 !important; } } .aomf-page #contact.aomf-contact-section > .img-backdrop { display: none !important; } /* Figma: a large blurred blue ring (Asset 20) sits top-right of the Contact frame. Every attempt to reconstruct its progressive blur in CSS/SVG (live filter+mask, feGaussianBlur, pre-baked raster layers cross-faded with mask-image) hit a real rendering bug somewhere in the chain - Chrome kept rendering the shape fully sharp regardless. Exporting the node directly from Figma (contact-glow-figma.webp, Figma's own renderer, already correctly blurred) and using it as one plain sidesteps all of that. That export's canvas is trimmed to its own visible bleed (1704x2212 @2x, i.e. 852x1106 @1x) rather than the node's nominal 1005x1006 box, so the positioning below is re-derived for those dimensions, not copied from the nominal-box math used elsewhere in this file. */ .aomf-page #contact.aomf-contact-section .aomf-contact-glow { position: absolute !important; top: 0 !important; /* same "center on the .container's right edge, then shift 12% further left" placement used before, recomputed for this asset's 53.25rem width (half-width 26.625rem, 12% of width = 6.39rem). */ left: auto !important; right: 0 !important; width: 53.25rem !important; /* 852px @1x */ aspect-ratio: 1704 / 2212 !important; pointer-events: none !important; z-index: 0 !important; } .aomf-page #contact.aomf-contact-section .aomf-contact-glow__img { display: block !important; width: 100% !important; height: 100% !important; } @media (max-width: 991.98px) { .aomf-page #contact.aomf-contact-section .aomf-contact-glow { transform: translateX(60%) !important; } } .aomf-page #contact.aomf-contact-section > .container { position: relative !important; z-index: 1 !important; } /* ── bg + font treatment (OMC: light section, black text, no card box, sans intro) ── */ /* section → light bg (OMC is transparent over a white page) */ .aomf-page #contact.aomf-contact-section { background-color: #fff !important; overflow: clip !important; position: relative !important; } /* overflow:clip contains the eyebrow glow's left bleed and the contact glow ring */ /* eyebrow badge — rendered by the acf/aaom-contact block (copy of contact-us-form + badge). Light section → GRAY glow + black bullet/text, same treatment as the other badges. */ .aomf-page #contact.aomf-contact-section .section-badge { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0 !important; position: relative !important; isolation: isolate !important; font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.01rem !important; color: #000 !important; } .aomf-page #contact.aomf-contact-section .section-badge::before { content: "" !important; position: static !important; z-index: 1 !important; width: 0.3125rem !important; /* 5px */ height: 0.3125rem !important; margin: 0 0 0 0.875rem !important; /* 14px inset, matched across badges */ border-radius: 50% !important; background: #000 !important; flex-shrink: 0 !important; } .aomf-page #contact.aomf-contact-section .section-badge::after { content: "" !important; position: absolute !important; z-index: -1 !important; left: -5.875rem !important; /* -94px */ top: 50% !important; transform: translateY(-50%) !important; width: 27.5rem !important; /* 440px */ height: 12.25rem !important; /* 196px */ background: url('/wp-content/uploads/2026/06/badge-gray.png') center / contain no-repeat !important; pointer-events: none !important; } /* drop the white card box → gray fields sit directly on the light section (OMC has no card) */ .aomf-page #contact.aomf-contact-section .contact-card { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* heading → black, Instrument 600 (OMC) */ .aomf-page #contact.aomf-contact-section .section-title { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 2.875rem !important; /* 46px */ line-height: 1 !important; letter-spacing: -0.0575rem !important; color: #000 !important; } /* intro → Instrument regular black (OMC) — NOT the theme's Cormorant italic */ .aomf-page #contact.aomf-contact-section .section-lead { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 1.25rem !important; /* 20px */ line-height: 1.5 !important; color: #000 !important; } /* .section-lead is now a

holding 1-2 wpautop'd

tags (was a single

) so the section can carry a "save the date" line plus a separate note. */ .aomf-page #contact.aomf-contact-section .section-lead p { margin: 0 0 1em !important; } .aomf-page #contact.aomf-contact-section .section-lead p:last-child { margin-bottom: 0 !important; } /* the 2nd "save the date" paragraph gets capped to a comfortable line length on desktop; below 992px the col already stacks full-width, so the clamp doesn't apply there - full width instead. */ .aomf-page #contact.aomf-contact-section .col-lg-5 > .section-lead > p:nth-child(2) { max-width: clamp(18.75rem, 10.446rem + 13.393vw, 22.5rem) !important; /* 300px→360px, 992px→1440px */ } @media (max-width: 991.98px) { .aomf-page #contact.aomf-contact-section .col-lg-5 > .section-lead > p:nth-child(2) { max-width: 100% !important; } } /* MAX responsive spacing and session CTA hover. Keep the CTA hit area to the * copy instead of stretching it across the full card row. */ body.aomax-page #aomax-section2 > div.aomax-section2__intro.row.mb-4.mb-lg-5, body.aomax-page #main > div.aomax-section2.bg-white.py-5 > section > div.aomax-section2__intro.row.mb-4.mb-lg-5, body.aomax-page #main > div.bg-black.py-5 > section > div.row.mb-4.mb-lg-5, body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section3 > div { gap: clamp(17px, 2vw, 32px) !important; } body.aomax-page #main > div.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-4d15b2d2.wp-block-columns-is-layout-flex:has(#mktoForm_3800) > div:nth-child(1) > div:nth-child(2) { margin-top: clamp(17px, 2vw, 24px) !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-session-cta { display: inline-block !important; align-self: flex-start !important; width: fit-content !important; max-width: 100% !important; transition: color 180ms ease !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-session-cta:hover, body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-session-cta:focus-visible { color: #3A6FD8 !important; } body.aomax-page #main > div.aomax-section2.bg-white.py-5 > section > div.aomax-section2__intro.row.mb-4.mb-lg-5 > div.aomax-section2__intro-copy.col-md-6.ps-lg-5 > div { padding-left: 0 !important; } /* MAX section 2 desktop intro: the 32px flex gap must be subtracted from the * two Bootstrap half-width columns or the second column wraps below the first. */ @media (min-width: 768px) { body.aomax-page #main > div.aomax-section2.bg-white.py-5 > section > div.aomax-section2__intro.row.mb-4.mb-lg-5 { flex-wrap: nowrap !important; justify-content: space-between !important; } body.aomax-page #main > div.aomax-section2.bg-white.py-5 > section > div.aomax-section2__intro.row.mb-4.mb-lg-5 > .col-md-6 { width: calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; flex: 0 0 calc(50% - 16px) !important; } } /* MAX hero heading: preserve the current desktop sizes while reducing the * two title spans enough for the 30px mobile gutter. */ body.aomax-page #main > section.aomax-event-hero .row > .col-lg-6 > h1, body:has(.aomax-event-hero) #main > section.aomax-event-hero .row > .col-lg-6 > h1, body.aomax-page #main > section.aomax-event-hero .row > .col-lg-6 > h1 .aomax-title-rest, body:has(.aomax-event-hero) #main > section.aomax-event-hero .row > .col-lg-6 > h1 .aomax-title-rest { font-size: clamp(68px, calc(59.15px + 2.262vw), 91.751px) !important; } body.aomax-page #main > section.aomax-event-hero .row > .col-lg-6 > h1 .aomax-omnicom, body:has(.aomax-event-hero) #main > section.aomax-event-hero .row > .col-lg-6 > h1 .aomax-omnicom { font-size: clamp(78px, calc(63.5px + 3.714vw), 117px) !important; } /* MAX mobile internal spacing: compact only the gaps/margins that become * vertical after the desktop columns stack. Section-level pt/pb stay intact. */ @media (max-width: 767.98px) { body.aomax-page #main > section.aomax-event-hero .row > .col-lg-6 { gap: 32px !important; } body.aomax-page #main > section.aomax-event-hero .col-lg-5, body.aomax-page #main > section.aomax-event-hero .event-hero-content .col-lg-5 { gap: 24px !important; } body.aomax-page #main .aomax-section2__inner { gap: 64px !important; } body.aomax-page #main > .aomax-section3 > .aomax-section3__layout { gap: 32px !important; } body.aomax-page #main > div.bg-black.py-5 > section.container { gap: 48px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 p.aomax-section5__copy { margin-top: 12px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 .aomax-section5__actions { margin-top: 24px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) { row-gap: 32px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .container + .container { margin-top: 16px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .wp-block-heading { margin-bottom: 12px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .wp-block-paragraph { margin-bottom: 16px !important; } } /* MAX final contact section — match the Forum contact/form treatment while keeping the override isolated to the MAX page and this form instance. */ body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) { display: grid !important; grid-template-columns: minmax(0, 470fr) minmax(0, 674fr) !important; column-gap: clamp(50px, calc(-1.04rem + 6.777vw), 80.96px) !important; align-items: start !important; width: min(1200px, calc(100% - 60px)) !important; max-width: 1200px !important; margin-inline: auto !important; padding: 120px 0 100px !important; box-sizing: border-box !important; background: #fff !important; overflow: clip !important; position: relative !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column { min-width: 0 !important; max-width: none !important; margin: 0 !important; padding-inline: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child { grid-column: 1 !important; width: auto !important; flex: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:last-child { grid-column: 2 !important; width: auto !important; flex: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .container, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .row, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .col-12 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .container + .container { margin-top: 24px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .wp-block-heading { margin: 0 !important; font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-size: 46px !important; line-height: 1 !important; letter-spacing: -0.92px !important; color: #000 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .wp-block-paragraph { margin: 0 0 1em !important; font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.5 !important; color: #000 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child .wp-block-paragraph:empty { display: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .marketo-embed-section, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .marketo-embed-section > .container, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .marketo-embed-section .row, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .marketo-embed-section .col-12 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .marketo-embed-section__card { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm { width: 100% !important; margin: 0 !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow { gap: 20px !important; margin-bottom: 20px !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormCol { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFieldWrap { padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoOffset, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoGutter, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow > .mktoClear, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow > .mktoPlaceholder { display: none !important; width: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoLabel { display: block !important; width: 100% !important; float: none !important; margin: 0 0 8px !important; font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 600 !important; font-size: 17px !important; line-height: 1.5 !important; color: #000 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoLabel .mktoAsterix { display: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoLabel:not(#LblemailOptin)::after { content: "*" !important; display: inline !important; margin-left: 4px !important; font: inherit !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm input.mktoField, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm select.mktoField, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm textarea.mktoField { width: 100% !important; box-sizing: border-box !important; background: #f3f3f3 !important; border: 1px solid #dadada !important; border-radius: 14px !important; padding: 10px 10px 10px 25px !important; font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 600 !important; color: #000 !important; box-shadow: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm select.mktoField { height: 44.5px !important; line-height: 22.5px !important; padding-right: 36px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm textarea.mktoField { min-height: 120px !important; resize: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm input.mktoField::placeholder, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm textarea.mktoField::placeholder { color: #929292 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm input.mktoField:focus, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm select.mktoField:focus, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm textarea.mktoField:focus { border-color: #dadada !important; background: #fff !important; outline: none !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonRow { display: flex !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; overflow: visible !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonWrap { margin-left: 0 !important; text-align: left !important; overflow: visible !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonWrap .mktoButton, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm button.mktoButton { width: 192px !important; min-width: 192px !important; height: 45px !important; padding: 10px 20px !important; border: 0 !important; border-radius: 40px !important; color: #fff !important; background: #1b1b1b !important; box-shadow: none !important; font-family: "Instrument Sans", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.18px !important; text-transform: lowercase !important; position: relative !important; overflow: visible !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonWrap .mktoButton::first-letter { text-transform: uppercase !important; } /* MAX uses the legacy form wrapper above, so it needs the same 45px arrow-circle correction as the AOM Forum form. The generic theme rule is 48px and clips below the 45px Submit pill. */ body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonWrap .mktoButton::after, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm button.mktoButton::after { position: absolute !important; display: inline-block !important; box-sizing: border-box !important; width: 2.8125rem !important; height: 2.8125rem !important; top: 0 !important; right: -2.6875rem !important; bottom: auto !important; margin: 0 !important; transform: none !important; border-radius: 50% !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) + .gradient-line { display: none !important; } @media (max-width: 767px) { body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 40px !important; width: calc(100% - 60px) !important; padding-top: 80px !important; padding-bottom: 64px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:first-child, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:last-child { grid-column: 1 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) > .wp-block-column:last-child { grid-row: 2 !important; } } /* Marketo consent/disclaimer row copy - explicit 14px per request */ .aomf-page #contact.aomf-contact-section #mktoForm_3800 > div:nth-child(10) > div:nth-child(2) > div.mktoFieldWrap > div.mktoHtmlText.mktoHasWidth { font-size: 0.875rem !important; /* 14px */ } /* ── heights, margins, clamps, widths + column distribution (OMC field metrics) ── */ /* the form fills its column (Marketo set an inline width: 77.5625rem on it) */ .aomf-page #contact.aomf-contact-section .mktoForm { width: 100% !important; padding: 0 !important; } /* row spacing → 1.25rem between rows AND between the two columns; the inner columns split the form width evenly → 20.4375rem each like OMC (a lone field = full width). Marketo adds extra flex children (.mktoGutter, a trailing .mktoClear) that would each consume another 1.25rem of gap, so we drop them — otherwise the columns come out ~305 instead of 327. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow { gap: 1.25rem !important; margin-bottom: 1.25rem !important; padding: 0 !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow .mktoFormCol { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoFieldWrap { padding: 0 !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoGutter { display: none !important; width: 0 !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow > .mktoClear { display: none !important; } /* hide Marketo's empty 2nd-column spacer on lone fields (Country) — its 1.25rem row-gap was shrinking the field by 1.25rem so it didn't reach the form's right edge like the others */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow > .mktoPlaceholder { display: none !important; } /* select → 2.78125rem like the inputs (its line-height was 'normal' → only 42.5) */ .aomf-page #contact.aomf-contact-section .mktoForm select.mktoField { height: 2.78125rem !important; line-height: 1.40625rem !important; } /* the message field is a single-line input in Marketo; OMC uses a 7.5rem textarea → match height */ .aomf-page #contact.aomf-contact-section .mktoForm input#MktoPersonNotes { height: 7.5rem !important; } /* consent block spacing (OMC .legal-consent-container: 1.25rem 0 2.5rem) */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:has(.mktoCheckboxList) { margin: 1.25rem 0 2.5rem !important; } /* Figma: pt 179 / pb 142, fluid down to pt80/pb64 on mobile (390px ref). (This replaces two previous rules on this selector - a padding-block clamp that was dead code, immediately overridden by a second, fixed-px rule with no mobile reduction at all.) */ .aomf-page #contact.aomf-contact-section { padding-top: clamp(5rem, 2.702rem + 9.429vw, 11.1875rem) !important; padding-bottom: clamp(4rem, 2.189rem + 7.429vw, 8.875rem) !important; } /* ── disclaimer + submit (match OMC) ── */ /* consent/disclaimer text → OMC small print (0.8125rem/400/#000, lh 19.5) — the label rule above would otherwise render it at 17/600. Higher specificity (id) wins over that rule. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoCheckboxList label, .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoHtmlText, .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:has(.mktoCheckboxList) label { font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.21875rem !important; color: #000 !important; } /* submit pill → OMC: "Submit" 15/600, letter-spacing .189, 192×45 pill (radius 40), bg #1b1b1b, padding 10/20. The Marketo button label is literally "SUBMIT" → lowercase it and re-capitalize the first letter so it reads "Submit" like OMC (no content/JS change needed). */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoButtonWrap .mktoButton, .aomf-page #contact.aomf-contact-section .mktoForm button.mktoButton { font-family: "Instrument Sans", sans-serif !important; font-style: normal !important; font-weight: 600 !important; font-size: 1.125rem !important; /* 18px */ line-height: 1.2 !important; letter-spacing: 0.01125rem !important; /* 0.18px */ color: #fff !important; background-color: #1b1b1b !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 2.5rem !important; padding: 0.625rem 1.25rem !important; width: 12rem !important; min-width: 12rem !important; height: 2.8125rem !important; text-transform: lowercase !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoButtonWrap .mktoButton::first-letter { text-transform: uppercase !important; } /* the theme's arrow-circle ::after is sized/positioned for a taller button elsewhere (top:0 / bottom:-3px → 48px), 3px taller than this 45px pill. Pin bottom to 0 so it matches the button's own height exactly. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoButtonWrap .mktoButton::after, .aomf-page #contact.aomf-contact-section .mktoForm button.mktoButton::after { position: absolute !important; display: inline-block !important; box-sizing: border-box !important; width: 2.8125rem !important; /* 45px, matches the button */ top: 0 !important; height: 2.8125rem !important; /* 45px, matches the button */ right: -2.6875rem !important; /* 43px, matches .btn-with-arrow */ bottom: auto !important; margin: 0 !important; transform: none !important; border-radius: 50% !important; } /* submit left-aligned (OMC) — Marketo wraps the button in a full-width block with text-align:center, which centered it. Align it to the form's left edge. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoButtonRow { display: flex !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; overflow: visible !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoButtonWrap { margin-left: 0 !important; text-align: left !important; overflow: visible !important; } /* ── consent row + empty filler rows ── */ /* Marketo leaves filler rows that only hold hidden fields between the disclaimer and the submit (each still adds a 1.25rem row margin). Hide any row with no visible control. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:not(:has(input:not([type=hidden]))):not(:has(select)):not(:has(textarea)):not(:has(.mktoCheckboxList)):not(:has(.mktoButton)) { display: none !important; } /* consent row is 2 cols: [checkbox][text]. The flex:1 rule above would make the checkbox col take half the row (a 1.6875rem checkbox in 20.4375rem of space). Shrink it to the checkbox width and let the text column fill the rest → a full-width disclaimer like OMC, minimal checkbox. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:has(.mktoCheckboxList) { align-items: flex-start !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol:has(.mktoCheckboxList) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol:not(:has(.mktoCheckboxList)) { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } /* ── mobile (<48rem): stack the paired fields to a single full-width column ── The paired rows (First/Last, Email/Company, Job/Industry) stay 2-up at every width, so on a phone each field is ~9.375rem and long placeholders get clipped (and the bold label collides with the gray placeholder → looks like a "double placeholder"). Below 48rem (like the OMC form) stack them: display:block rows + float:none full-width cols. float:none is essential (Marketo floats .mktoFormCol, which otherwise collapses the col to the label height and the input floats over it). The extra .contact-card in the selector bumps specificity so margin-bottom wins over the metrics block's margin:0. */ @media (max-width: 767.98px) { .aomf-page #contact.aomf-contact-section .contact-card .mktoForm .mktoFormRow { display: block !important; margin-bottom: 0 !important; } .aomf-page #contact.aomf-contact-section .contact-card .mktoForm .mktoFormRow .mktoFormCol { float: none !important; width: 100% !important; display: block !important; margin: 0 0 1.25rem 0 !important; } .aomf-page #contact.aomf-contact-section .contact-card .mktoForm .mktoFieldWrap { display: block !important; } .aomf-page #contact.aomf-contact-section .contact-card .mktoForm .mktoLabel { display: block !important; float: none !important; width: 100% !important; margin-bottom: 0.5rem !important; line-height: 1.3 !important; } .aomf-page #contact.aomf-contact-section .contact-card .mktoForm .mktoField { width: 100% !important; } } /* ── required markers + consent checkbox ─────────────────────────────────── Marketo renders .mktoAsterix as a floated block before the label text and applies the regular full-width field rule to the consent checkbox. Hide the generated marker and paint a scoped inline marker after the label text; the checkbox gets its own marker after the control. */ .aomf-page #contact.aomf-contact-section .mktoForm .mktoLabel { display: block !important; width: 100% !important; float: none !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoLabel .mktoAsterix { display: none !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoLabel:not(#LblemailOptin)::after { content: "*" !important; display: inline !important; margin-left: 0.25rem !important; font: inherit !important; color: inherit !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoCheckboxList { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoCheckboxList .mktoAsterix { display: none !important; } .aomf-page #contact.aomf-contact-section .mktoForm #emailOptin { width: 1.125rem !important; min-width: 1.125rem !important; max-width: 1.125rem !important; height: 1.125rem !important; min-height: 1.125rem !important; max-height: 1.125rem !important; display: inline-block !important; float: none !important; margin: 0 !important; vertical-align: middle !important; } .aomf-page #contact.aomf-contact-section .mktoForm .mktoCheckboxList > label:empty { display: none !important; } /* ── Adobe MAX legacy page: isolated component/page scope ────────────────── MAX is a different event implementation. Keep its visual treatment behind both its page body class and its dedicated hero class so it cannot touch the shared Event Hero or Gradient Line used by AOM Forum and other events. */ .aomax-page .aomax-event-hero, .aomax-page .aomax-event-hero * { padding: 0 !important; margin: 0 !important; gap: 0 !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aomax-page .aomax-event-hero { height: auto !important; min-height: 0 !important; max-height: none !important; padding-top: 173px !important; padding-bottom: 227px !important; } .aomax-page .aomax-event-hero .event-hero-background-image::after, .aomax-page .aomax-event-hero .hero-overlay, .aomax-page .aomax-event-hero .event-hero-content::after { content: none !important; display: none !important; background: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aomax-page .aomax-event-hero .event-hero-content > .container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .aomax-page .aomax-event-hero .row > .col-lg-6 { display: flex !important; flex-direction: column !important; gap: 49px !important; max-width: 576px !important; } .aomax-page .aomax-event-hero .row > .col-lg-6 > p { display: none !important; } .aomax-page .aomax-event-hero .row > .col-lg-6 > h1 { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 91.751px !important; line-height: .9 !important; letter-spacing: -1.835px !important; color: #fff !important; } .aomax-page .aomax-event-hero .row > .col-lg-6 > h1 .aomax-omnicom { font-family: "Cormorant Garamond", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 117px !important; line-height: .9 !important; letter-spacing: -2.34px !important; } .aomax-page .aomax-event-hero .row > .col-lg-6 > h1 .aomax-title-rest { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 91.751px !important; line-height: .9 !important; letter-spacing: -1.835px !important; } .aomax-page .aomax-event-hero .row > .col-lg-6 > h2 { font-family: "Instrument Sans", sans-serif !important; font-weight: 500 !important; font-style: normal !important; font-size: 16px !important; line-height: 1.53 !important; letter-spacing: normal !important; color: #fff !important; } /* MAX's second section is also restricted to the legacy MAX page. */ .aomax-page .aomax-event-hero + .gradient-line + .bg-white, .aomax-page .aomax-event-hero + .gradient-line + .bg-white.py-5 { padding: 0 !important; margin: 0 !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container, .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container.my-5 { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row, .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row > * { margin: 0 !important; padding: 0 !important; gap: 0 !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child { display: flex !important; flex-wrap: wrap !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child > .col-md-6 { width: 50% !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child > .col-md-6:first-child h2 { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 46px !important; line-height: 1 !important; letter-spacing: -0.92px !important; color: #000 !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child > .col-md-6:nth-child(2), .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child > .col-md-6:nth-child(2) h4, .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child > .col-md-6:nth-child(2) h4 p { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 16px !important; line-height: 1.6 !important; letter-spacing: normal !important; color: #000 !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child .fs-14.fs-lg-16.lh-150.mt-4 { display: none !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; gap: 24px !important; align-items: stretch !important; grid-auto-rows: 1fr !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white .content-card { background: #000 !important; color: #fff !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; border-radius: 24px !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white .content-card h3 { font-family: "Instrument Sans", sans-serif !important; font-weight: 700 !important; font-style: normal !important; font-size: 26px !important; line-height: 1.4 !important; letter-spacing: 0.26px !important; color: #fff !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white .content-card .card-desc, .aomax-page .aomax-event-hero + .gradient-line + .bg-white .content-card .card-desc p { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 16px !important; line-height: 1.4 !important; letter-spacing: 0.16px !important; color: #fff !important; } @media (max-width: 767.98px) { .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:first-child > .col-md-6, .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) > .col-lg-4 { width: 100% !important; } } /* Final MAX grid override: this must follow the legacy flex rule above. */ .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; gap: 24px !important; align-items: stretch !important; grid-auto-rows: 1fr !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) > .col-lg-4 { display: flex !important; width: auto !important; max-width: none !important; min-width: 0 !important; align-items: stretch !important; } .aomax-page .aomax-event-hero + .gradient-line + .bg-white > section.container > .row:nth-child(2) .content-card { width: 100% !important; height: 100% !important; padding: 46px 30px !important; box-sizing: border-box !important; } /* Figma node 409:5984 — Section 2 final spacing and typography. Keep these hooks on the MAX-specific classes so the legacy Bootstrap classes cannot affect another event page. */ body.aomax-page #main .aomax-section2 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 109px !important; padding-bottom: 118px !important; overflow: visible !important; } .aomax-page #main .aomax-section2__inner { position: relative !important; isolation: isolate; } body.aomax-page #main .aomax-section2__inner { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: max(32px, calc((100% - 1200px) / 2)) !important; padding-right: max(32px, calc((100% - 1200px) / 2)) !important; box-sizing: border-box !important; } /* Asset 23 is the Figma ring export. The source canvas is wider than the previous square export, so size and offset the image to preserve the existing visible orange ring geometry. Keep it as a plain background image; this MAX-specific selector must not inherit blur treatment from other event components. */ .aomax-page #main .aomax-section2__inner::before { content: ""; position: absolute; top: -585px; left: calc(50vw - 1124px); width: 1151px; height: 1157px; max-width: none; pointer-events: none; z-index: -1; background: url("/wp-content/themes/omnicom/assets/images/aomax/asset-23-figma.png") no-repeat -97px 62px; background-size: 1464px 1052px; transform: rotate(8deg); transform-origin: center center; } .aomax-page .aomax-section2__inner { display: flex !important; flex-direction: column !important; gap: 120px !important; } .aomax-page .aomax-section2__heading { font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 46px !important; line-height: 1 !important; letter-spacing: -0.92px !important; max-width: 349px !important; } .aomax-page .aomax-section2__body { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 16px !important; line-height: 1.6 !important; letter-spacing: normal !important; color: #000 !important; } body.aomax-page #main .aomax-section2__body { display: block !important; } /* Remove the legacy Bootstrap vertical utilities from the MAX intro so the section spacing is controlled only by the MAX-specific section rules. */ body.aomax-page #main > div.aomax-section2.bg-white.py-5 > section.aomax-section2__inner.container.my-5.text-dark { margin-top: 0 !important; margin-bottom: 0 !important; } body.aomax-page #main > div.aomax-section2.bg-white.py-5 > section.aomax-section2__inner.container.my-5.text-dark > div.aomax-section2__intro.row.mb-4.mb-lg-5 > div.aomax-section2__intro-copy.col-md-6.ps-lg-5 > div > div.aomax-section2__body.fs-14.fs-lg-16.lh-150.mt-4 { margin-top: 0 !important; } .aomax-page .aomax-section2__card-title { font-family: "Instrument Sans", sans-serif !important; font-weight: 700 !important; font-style: normal !important; font-size: 26px !important; line-height: 1.4 !important; letter-spacing: 0.26px !important; color: #fff !important; } .aomax-page .aomax-section2__card-copy { font-family: "Instrument Sans", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 16px !important; line-height: 1.4 !important; letter-spacing: 0.16px !important; color: #fff !important; } /* The oversized Asset 23 intentionally extends above Section 2. Keep the first section and its divider in a higher stacking context so they remain visually in front of the decoration. */ body.aomax-page #main > .aomax-event-hero { position: relative !important; z-index: 10 !important; } body.aomax-page #main > .aomax-event-hero + .gradient-line { position: relative !important; z-index: 11 !important; } /* MAX section 3 — Figma node 409:6034. This is intentionally scoped to the MAX page and its dedicated class because the site has another CTA component with different typography and hover behavior. */ body.aomax-page #main > .aomax-section3 { position: relative !important; overflow: hidden !important; margin: 0 !important; padding: 100px 0 324px !important; background-color: #000 !important; background-image: url("/wp-content/uploads/2026/08/FY26Q3-AAOM-MAXSite-Section3-Forum-Desktop-1440x738-1x.png") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } body.aomax-page #main > .aomax-section3 > .aomax-section3__layout { display: grid !important; grid-template-columns: minmax(0, 590px) minmax(0, 486px) !important; gap: 124px !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; align-items: start !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__column { min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__column--left { display: grid !important; grid-template-rows: auto auto !important; align-content: start !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__title { margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: "Cormorant Garamond", serif !important; font-size: 40px !important; font-weight: 600 !important; font-style: italic !important; line-height: 1 !important; letter-spacing: 0 !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__lead, body.aomax-page #main > .aomax-section3 .aomax-section3__lead p { margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 46px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.09 !important; letter-spacing: -0.92px !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__column--right { display: grid !important; grid-template-rows: auto auto auto !important; align-content: start !important; row-gap: 32px !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__body { display: contents !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__body p { margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.6 !important; letter-spacing: 0 !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__actions { display: flex !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__button, body.aomax-page #main > .aomax-section3 .aomax-section3__button:hover, body.aomax-page #main > .aomax-section3 .aomax-section3__button:focus-visible { display: inline-flex !important; align-items: center !important; align-self: flex-start !important; margin: 0 45px 0 0 !important; padding: 13px 24px !important; min-height: 48px !important; border: 0 !important; border-radius: 40px !important; color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.2 !important; letter-spacing: 0.18px !important; transition: background-color 0.3s ease, color 0.3s ease !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__button { background-color: #4f7ff2 !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__button:hover, body.aomax-page #main > .aomax-section3 .aomax-section3__button:focus-visible { background-color: #1656ee !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__button::after, body.aomax-page #main > .aomax-section3 .aomax-section3__button:hover::after, body.aomax-page #main > .aomax-section3 .aomax-section3__button:focus-visible::after { transition: background-color 0.3s ease !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__button::after { background-color: #4f7ff2 !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__button:hover::after, body.aomax-page #main > .aomax-section3 .aomax-section3__button:focus-visible::after { background-color: #1656ee !important; } @media (max-width: 767px) { body.aomax-page #main > .aomax-section3 { padding: 64px 0 160px !important; } body.aomax-page #main > .aomax-section3 > .aomax-section3__layout { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__title { font-size: 32px !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__lead, body.aomax-page #main > .aomax-section3 .aomax-section3__lead p { font-size: 36px !important; } body.aomax-page #main > .aomax-section3 .aomax-section3__column--right { row-gap: 24px !important; } } /* MAX section 4 — keep the legacy content-card component isolated to this * page. These values match the local DevTools/Figma validation for node * 409:6040 and prevent the shared event card typography from leaking in. */ body.aomax-page #main > div.bg-black.py-5 { margin: 0 !important; padding: 109px 0 121px !important; gap: 0 !important; } body.aomax-page #main > div.bg-black.py-5 > section.container { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; gap: 110px !important; } body.aomax-page #main > div.bg-black.py-5 > section.container, body.aomax-page #main > div.bg-black.py-5 > section.container > .row, body.aomax-page #main > div.bg-black.py-5 > section.container > .row > * { box-sizing: border-box !important; } body.aomax-page #main > div.bg-black.py-5 > section.container > .row, body.aomax-page #main > div.bg-black.py-5 > section.container > .row > * { margin: 0 !important; padding: 0 !important; gap: 0 !important; } body.aomax-page #main > div.bg-black.py-5 > section.container > .row:first-child, body.aomax-page #main > div.bg-black.py-5 > section.container > .row:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; } body.aomax-page #main > div.bg-black.py-5 > section.container > .row:nth-child(2) { gap: 24px !important; } body.aomax-page #main > div.bg-black.py-5 > section.container > .row > .col-md-6, body.aomax-page #main > div.bg-black.py-5 > section.container > .row > .col-lg-6 { width: 100% !important; max-width: none !important; min-width: 0 !important; } body.aomax-page #main > div.bg-black.py-5 .content-card { width: 100% !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 46px 30px !important; gap: 20px !important; box-sizing: border-box !important; background-color: #fafafa !important; border-radius: 24px !important; } body.aomax-page #main > div.bg-black.py-5 h2 { margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 46px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: -0.92px !important; } body.aomax-page #main > div.bg-black.py-5 .content-card h3 { margin: 0 !important; padding: 0 !important; color: #1b1b1b !important; font-family: "Instrument Sans", sans-serif !important; font-size: 26px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1.4 !important; letter-spacing: 0.26px !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .card-desc, body.aomax-page #main > div.bg-black.py-5 .content-card .card-desc p, body.aomax-page #main > div.bg-black.py-5 .content-card .card-desc p strong { margin: 0 !important; padding: 0 !important; color: #1b1b1b !important; font-family: "Instrument Sans", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.53 !important; letter-spacing: 0 !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .card-desc p:empty { display: none !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .card-desc { display: flex !important; flex-direction: column !important; gap: 20px !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-speaker { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-speaker > p { margin: 0 !important; padding: 0 !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-speaker > p:first-child { font-weight: 700 !important; } body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-session-cta { display: inline-block !important; color: #4F7FF2 !important; font-family: "Instrument Sans", sans-serif !important; font-size: 20px !important; font-style: normal !important; font-weight: 700 !important; font-synthesis: weight !important; font-variation-settings: "wght" 700 !important; line-height: 153% !important; text-decoration-line: underline !important; text-decoration-style: solid !important; text-decoration-skip-ink: auto !important; text-decoration-thickness: auto !important; text-underline-offset: auto !important; text-underline-position: from-font !important; } @media (max-width: 767px) { body.aomax-page #main > div.bg-black.py-5 .content-card .aomax-session-cta { font-weight: 700 !important; font-synthesis: weight !important; font-variation-settings: "wght" 700 !important; -webkit-text-stroke: 0.15px currentColor !important; } } body.aomax-page #main > div.bg-black.py-5 > section.container > .row:first-child > .col-md-6:nth-child(2), body.aomax-page #main > div.bg-black.py-5 > section.container > .row:first-child > .col-md-6:nth-child(2) *, body.aomax-page #main > div.bg-black.py-5 > section.container > .row:first-child .ps-lg-5, body.aomax-page #main > div.bg-black.py-5 > section.container > .row:first-child .ps-lg-5 * { color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.6 !important; letter-spacing: 0 !important; } body.aomax-page #main > div.bg-black.py-5 > section > .row.mb-4.mb-lg-5 > .col-md-6.ps-lg-5 > div { margin-top: 0 !important; } body.aomax-page #main > div.bg-black.py-5 > section > .row.mb-4.mb-lg-5 > .col-md-6.ps-lg-5 > div > div { margin-bottom: 0 !important; } body.aomax-page #main > div.bg-black.py-5 > section > .row.mb-4.mb-lg-5 > .col-md-6.ps-lg-5 > div > div, body.aomax-page #main > div.bg-black.py-5 > section > .row.mb-4.mb-lg-5 > .col-md-6.ps-lg-5 > div > div > p { margin: 0 !important; } @media (max-width: 767px) { body.aomax-page #main > div.bg-black.py-5 { padding: 64px 0 96px !important; } body.aomax-page #main > div.bg-black.py-5 > section.container > .row:first-child, body.aomax-page #main > div.bg-black.py-5 > section.container > .row:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; } body.aomax-page #main > div.bg-black.py-5 > section.container { gap: 64px !important; } body.aomax-page #main > div.bg-black.py-5 h2 { font-size: 36px !important; } } /* MAX section 5: Figma CTA image, four-row copy stack, and scoped button. */ body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 { position: relative !important; overflow: hidden !important; padding-top: 174px !important; padding-bottom: 170px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .container { position: relative !important; z-index: 2 !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .container > .cta-banner-wrapper > .aomax-section5__content { max-width: 363px !important; margin-left: auto !important; margin-right: 0 !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 h2.aomax-section5__title { margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 54px !important; font-style: normal !important; font-weight: 600 !important; line-height: 0.9 !important; letter-spacing: -1.08px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 p.aomax-section5__accent { display: block !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-family: "Cormorant Garamond", serif !important; font-size: 66px !important; font-style: italic !important; font-weight: 400 !important; line-height: 0.9 !important; letter-spacing: 0 !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 p.aomax-section5__copy { display: block !important; margin: 17px 0 0 !important; padding: 0 !important; color: #fff !important; font-family: "Instrument Sans", sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0 !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 .aomax-section5__actions { margin-top: 30px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 a.aomax-section5__button { margin-right: 35px !important; padding: 9.56px 17.85px !important; color: #fff !important; text-align: center !important; font-family: "Instrument Sans", sans-serif !important; font-size: 13.238px !important; font-style: normal !important; font-weight: 600 !important; line-height: 120% !important; letter-spacing: 0.132px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 a.aomax-section5__button::after { width: 35px !important; height: 35px !important; right: -33px !important; top: 0 !important; border-radius: 50% !important; background-color: #ff672e !important; background-size: 11px 11px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 a.aomax-section5__button:hover::after, body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 a.aomax-section5__button:focus-visible::after { background-color: #ff672e !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 + .gradient-line { display: none !important; } /* Figma image shadow: fade from transparent on the left to 80% black on the right while keeping the exported image as the underlying raster. */ body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .img-backdrop::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 16.11%, rgba(0, 0, 0, 0.80) 84.67%) !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .img-backdrop > img { position: relative !important; z-index: 0 !important; } @media (max-width: 767px) { body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 { padding-top: 96px !important; padding-bottom: 96px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .container > .cta-banner-wrapper > .aomax-section5__content { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .img-backdrop::after { background: rgba(0, 0, 0, 0.7) !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .img-backdrop > img { object-position: 25% center !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 h2.aomax-section5__title { font-size: 42px !important; } body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 p.aomax-section5__accent { font-size: 52px !important; } } /* MAX hero asset: compressed muted loop plus the Figma shadow as a real layer above the video. */ body.aomax-page #main > section.aomax-event-hero > .event-hero-background-image { height: 100% !important; background-image: none !important; overflow: hidden !important; } body.aomax-page #main > section.aomax-event-hero > .event-hero-background-image > video.aomax-hero-video { position: absolute !important; inset: 0 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; } body.aomax-page #main > section.aomax-event-hero > .event-hero-background-image > .aomax-hero-shadow { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; background: rgba(0, 0, 0, 0.7) !important; } body.aomax-page #main > section.aomax-event-hero > .event-hero-background-image::after { content: none !important; display: none !important; } body.aomax-page #main > section.aomax-event-hero > .event-hero-content { position: relative !important; z-index: 2 !important; } /* MAX page chrome: the page is rendered from legacy content and does not always receive the aomax-page body class, so scope through its unique hero. */ body:has(.aomax-event-hero) .site-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; background: transparent !important; box-shadow: none !important; z-index: 9999 !important; } body:has(.aomax-event-hero) .site-header .navbar, body:has(.aomax-event-hero) .site-header .navbar-light { background: transparent !important; box-shadow: none !important; } body:has(.aomax-event-hero) .site-header .navbar-brand img { content: url('../img/logo-dark-nav.webp'); } body:has(.aomax-event-hero) .site-header #primaryNavbar > .container > .navbar-nav > .nav-item > .nav-link, body:has(.aomax-event-hero) .site-header #primaryNavbar > .container > .navbar-cta > a, body:has(.aomax-event-hero) .site-header #primaryNavbar > .container > .navbar-nav > .nav-item > .nav-link * , body:has(.aomax-event-hero) .site-header #primaryNavbar > .container > .navbar-cta > a * { color: #fff !important; } body:has(.aomax-event-hero) .site-header #primaryNavbar .dropdown-menu .dropdown-item, body:has(.aomax-event-hero) .site-header #primaryNavbar .dropdown-menu .dropdown-item * { color: #000 !important; } body:has(.aomax-event-hero) .site-header .navbar-toggler.burger-toggler { color: #fff !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; } body:has(.aomax-event-hero) .site-header .navbar-toggler.burger-toggler .burger-line { background-color: #fff !important; border-color: #fff !important; } body:has(.aomax-event-hero) #main > section.aomax-event-hero { margin-top: 0 !important; } body:has(.aomax-event-hero) #main > section.aomax-event-hero > .event-hero-background-image { height: 100% !important; background-image: none !important; overflow: hidden !important; } body:has(.aomax-event-hero) #main > section.aomax-event-hero > .event-hero-background-image > video.aomax-hero-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; z-index: 0 !important; } body:has(.aomax-event-hero) #main > section.aomax-event-hero > .event-hero-background-image > .aomax-hero-shadow { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.7) !important; z-index: 1 !important; pointer-events: none !important; } body:has(.aomax-event-hero) #main > section.aomax-event-hero > .event-hero-content { position: relative !important; z-index: 2 !important; } /* MAX fluid container gutters: keep sections 1, 3 and 4 aligned with the * 30px mobile gutter and the 1200px desktop content edge. This final override * must follow the legacy section rules so their max-width and zero-padding * declarations cannot undo the gutter. */ body.aomax-page #main > section.aomax-event-hero .event-hero-content > .container, body.aomax-page #main > .aomax-section3 > .aomax-section3__layout, body.aomax-page #main > div.bg-black.py-5 > section.container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: max(30px, calc((100% - 1200px) / 2)) !important; padding-right: max(30px, calc((100% - 1200px) / 2)) !important; box-sizing: border-box !important; } /* Scroll cue below the hero copy, centered against the full section width. */ body.aomax-page #main > section.aomax-event-hero, body:has(.aomax-event-hero) #main > section.aomax-event-hero { display: flex !important; flex-direction: column !important; padding-bottom: 142px !important; } body.aomax-page #main > section.aomax-event-hero .aomax-hero-scroll-arrow, body:has(.aomax-event-hero) #main > section.aomax-event-hero .aomax-hero-scroll-arrow { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 5 !important; align-self: stretch !important; width: 100% !important; margin: 63px 0 0 !important; padding: 3px !important; pointer-events: auto !important; text-decoration: none !important; } body.aomax-page #main > section.aomax-event-hero .aomax-hero-scroll-arrow svg, body:has(.aomax-event-hero) #main > section.aomax-event-hero .aomax-hero-scroll-arrow svg { display: block !important; width: 26px !important; height: 15.478px !important; fill: #fff !important; transition: transform 180ms ease !important; } body.aomax-page #main > section.aomax-event-hero .aomax-hero-scroll-arrow:hover svg, body.aomax-page #main > section.aomax-event-hero .aomax-hero-scroll-arrow:focus-visible svg, body:has(.aomax-event-hero) #main > section.aomax-event-hero .aomax-hero-scroll-arrow:hover svg, body:has(.aomax-event-hero) #main > section.aomax-event-hero .aomax-hero-scroll-arrow:focus-visible svg { transform: translateY(4px) !important; } @media (max-width: 767.98px) { body.aomax-page #main > section.aomax-event-hero .aomax-hero-scroll-arrow, body:has(.aomax-event-hero) #main > section.aomax-event-hero .aomax-hero-scroll-arrow { margin-top: 63px !important; } } /* The CTA arrow is absolutely positioned; it does not need the extra 35px * right margin on the button, which was shrinking the section-5 wrapper. */ body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 a.aomax-section5__button { margin-right: 0 !important; } /* MAX Marketo form on mobile: Marketo's desktop floats make labels overlap * fields when the form column collapses. Stack every regular field, then keep * the consent row as a checkbox/copy pair. */ @media (max-width: 767.98px) { body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow { display: block !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow .mktoFormCol { display: block !important; float: none !important; width: 100% !important; min-width: 0 !important; margin: 0 0 20px !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFieldWrap { display: block !important; position: static !important; padding: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoLabel { display: block !important; position: static !important; float: none !important; clear: both !important; width: 100% !important; margin: 0 0 8px !important; line-height: 1.5 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm input.mktoField, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm select.mktoField, body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm textarea.mktoField { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow:has(.mktoCheckboxList) { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 20px 0 40px !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol:has(.mktoCheckboxList) { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol:not(:has(.mktoCheckboxList)) { width: auto !important; flex: 1 1 auto !important; margin: 0 !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonRow { display: flex !important; justify-content: flex-start !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButtonWrap { margin: 0 !important; overflow: visible !important; } body.aomax-page #main > .wp-block-columns:has(#mktoForm_3800) .mktoForm .mktoButton { overflow: visible !important; position: relative !important; margin-right: 45px !important; } } /* MAX section 5 fluid gutter: match sections 1–4 on mobile and desktop. */ body.aomax-page #main > section.cta-banner-section.bg-black.aomax-section5 > .container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: max(30px, calc((100% - 1200px) / 2)) !important; padding-right: max(30px, calc((100% - 1200px) / 2)) !important; box-sizing: border-box !important; } @media (max-width: 991.98px) { body:has(.aomax-event-hero) .site-header #primaryNavbar.show, body:has(.aomax-event-hero) .site-header #primaryNavbar.collapsing { background: #fff !important; } body:has(.aomax-event-hero) .site-header #primaryNavbar.show > .container > .navbar-nav > .nav-item > .nav-link, body:has(.aomax-event-hero) .site-header #primaryNavbar.show > .container > .navbar-cta > a, body:has(.aomax-event-hero) .site-header #primaryNavbar.show > .container > .navbar-nav > .nav-item > .nav-link * , body:has(.aomax-event-hero) .site-header #primaryNavbar.show > .container > .navbar-cta > a * , body:has(.aomax-event-hero) .site-header #primaryNavbar.collapsing > .container > .navbar-nav > .nav-item > .nav-link, body:has(.aomax-event-hero) .site-header #primaryNavbar.collapsing > .container > .navbar-cta > a, body:has(.aomax-event-hero) .site-header #primaryNavbar.collapsing > .container > .navbar-nav > .nav-item > .nav-link * , body:has(.aomax-event-hero) .site-header #primaryNavbar.collapsing > .container > .navbar-cta > a * { color: #000 !important; } }