/* * My ABA CFO sponsor banners — 728x90 main + 300x250 side. * Source: webinars/My-ABA-CFO-HTML-CSS/banners.css, supplied by the advertiser. * Changes here: gallery/standalone-page rules stripped, the two embedded * base64 fonts written out to assets/fonts/, and the photo repointed at * assets/images/sponsor/. The banner rules themselves are untouched. */ @font-face { font-family: "ABA Anton"; src: url("../fonts/aba-anton.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "ABA Inter"; src: url("../fonts/aba-inter.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } /* My ABA CFO: live HTML banner components. All dimensions include the border. */ /* Font declarations are embedded by the build script for offline use. */ .aba-banner { --aba-cream: #fbf8f3; --aba-sand: #efe4d2; --aba-ink: #2c2620; --aba-brass: #a8841f; --aba-button: #8f6c19; --aba-photo: url("../images/sponsor/mike-gogis.jpg"); position: relative; box-sizing: border-box; flex: none; isolation: isolate; border: 1px solid #d6cbb9; color: var(--aba-ink); background: linear-gradient(115deg, #fffdf9, var(--aba-cream) 65%, #f2e9da); font-family: "ABA Inter", Arial, sans-serif; text-align: left; text-decoration: none; cursor: pointer; -webkit-font-smoothing: antialiased; } .aba-banner *, .aba-banner *::before, .aba-banner *::after { box-sizing: border-box; } .aba-banner:visited { color: var(--aba-ink); } .aba-banner:focus-visible { outline: 3px solid #5141ac; outline-offset: 4px; } .aba-banner:hover .aba-banner__cta { background: #775812; } .aba-banner__brand, .aba-banner__person, .aba-banner__copy, .aba-banner__cta { position: relative; z-index: 1; } .aba-banner__brand { min-width: 0; align-self: center; } .aba-banner__wordmark { display: block; width: max-content; max-width: 100%; font: 400 20px/1.1 "ABA Anton", "Arial Narrow", sans-serif; white-space: nowrap; padding-bottom: 4px; border-bottom: 1px solid var(--aba-brass); } .aba-banner__wordmark b { color: var(--aba-brass); font-weight: 400; } .aba-banner__tagline { display: block; margin-top: 4px; font-size: 6px; line-height: 1.2; font-weight: 600; letter-spacing: 1.2px; white-space: nowrap; } .aba-banner__headline { margin: 0; padding: 0; border: 0; font-family: "ABA Anton", "Arial Narrow", sans-serif; font-weight: 400; } .aba-banner__body { margin: 0; padding: 0; font-family: "ABA Inter", Arial, sans-serif; font-weight: 400; } .aba-banner__person { margin: 0; display: flex; flex-direction: column; align-items: center; flex: none; } .aba-banner__photo { display: block; background-image: var(--aba-photo); background-repeat: no-repeat; background-size: 130%; background-position: 52% 24%; border-radius: 4px; } .aba-banner__name { display: block; white-space: nowrap; font-size: 11px; font-weight: 600; line-height: 1.2; margin-top: 3px; } .aba-banner__cta { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; border-radius: 4px; padding: 7px 9px; background: var(--aba-button); color: #fff; font: 400 13px/1.15 "ABA Anton", "Arial Narrow", sans-serif; text-align: center; } .aba-banner__cta-text { flex: 1; min-width: 0; } .aba-banner__arrow { width: 7px; height: 7px; flex: none; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 2px; } /* Fixed leaderboard: headline and complete CTA. */ .aba-banner--main { width: 728px; height: 90px; padding: 9px 11px; display: grid; grid-template-columns: 104px minmax(0, 1fr) 62px 166px; gap: 11px; align-items: center; } .aba-banner--main .aba-banner__brand { padding-right: 11px; border-right: 1px solid var(--aba-brass); } .aba-banner--main .aba-banner__wordmark { font-size: 25px; } .aba-banner--main .aba-banner__tagline { font-size: 9px; letter-spacing: 0.78px; } .aba-banner--main .aba-banner__headline { font-size: var(--aba-head-size, 19px); line-height: 1.12; } .aba-banner--main .aba-banner__photo { width: 62px; height: 53px; } .aba-banner--main .aba-banner__cta { min-height: 46px; font-size: var(--aba-cta-size, 13px); } .aba-banner--main.aba-banner--split { background: linear-gradient(105deg, #fbf8f3 0 64%, #a8841f 64% 64.8%, #2c2620 64.8% 100%); } .aba-banner--main.aba-banner--split .aba-banner__name { color: #fff; } /* Fixed medium rectangle: headline, full body copy, and complete CTA. */ /* The height is deliberately not set. A fixed 250px is what forced the type down; letting the card grow to fit its own copy is what pays for the sizes below. Each concept is therefore a slightly different height. max-width keeps it inside a narrow rail instead of spilling out of one. */ .aba-banner--side { width: 300px; max-width: 100%; display: flex; flex-direction: column; } .aba-banner__side-top { display: flex; justify-content: space-between; align-items: flex-start; height: 49px; flex: none; gap: 8px; } .aba-banner--side .aba-banner__brand { align-self: flex-start; padding-top: 2px; } .aba-banner--side .aba-banner__wordmark { font-size: 21px; } .aba-banner--side .aba-banner__tagline { font-size: 9px; letter-spacing: 1.6px; } .aba-banner--side .aba-banner__photo { width: 61px; height: 37px; background-size: 115%; background-position: 52% 22%; } .aba-banner--side .aba-banner__name { font-size: 7px; } .aba-banner--side .aba-banner__headline { font-size: var(--aba-head-size, 16px); line-height: 1.12; } .aba-banner--side .aba-banner__body { font-size: var(--aba-body-size, 10px); line-height: 1.25; } .aba-banner--side .aba-banner__cta { margin-top: 20px; min-height: 40px; flex: none; padding: 9px 12px; } .aba-banner--side.aba-banner--split::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 92px; height: 62px; z-index: 0; background: #2c2620; clip-path: polygon(13% 0,100% 0,100% 100%,0 100%); } .aba-banner--side.aba-banner--split .aba-banner__name { color: white; } /* Per-copy tuning is fixed CSS, never text truncation or a runtime fit script. */ .aba-banner--main.aba-banner--v1, .aba-banner--main.aba-banner--v4, .aba-banner--main.aba-banner--v5 { --aba-head-size: 17px; } /* (per-variant CTA sizes removed: one short label for all eight) */ .aba-banner--side.aba-banner--v4, .aba-banner--side.aba-banner--v5 { --aba-head-size: 15.5px; } @media (max-width: 1120px) { } @media (prefers-reduced-motion: reduce) { .aba-banner * { transition: none; } } /* ------------------------------------------------------------ PLACEMENT WRAPPERS Added for breakingnewsaba.com; not part of the advertiser's package. The leaderboard is fluid here rather than a fixed 728px. Its grid is `104px minmax(0,1fr) 62px 166px`, so widening it feeds the extra space to the headline column and nothing else moves. Height stays 90px. ------------------------------------------------------------ */ .bna-myabacfo-wrap { margin: 0 auto; display: block; } .bna-myabacfo-wrap .aba-banner--main { width: 100%; } /* Homepage: the full site container, so it lines up with the grid below it. */ .bna-myabacfo-wrap--home { max-width: var(--container, 1260px); padding: 22px 24px 6px; } /* Article: the article measure, so its edges sit flush with the headline and body text rather than floating inside them. */ .bna-myabacfo-wrap--article { max-width: 840px; padding: 20px 24px 4px; } /* ---- Mobile: swap the leaderboard for the 300x250 ---- Both formats of the SAME concept are printed in the leaderboard slot and one is hidden by this query. The impression is logged once, server-side, when the slot renders, so the counts stay correct either way; only the shape the reader saw differs. */ .bna-myabacfo-alt { display: none; } @media (max-width: 776px) { .bna-myabacfo-wrap--home .aba-banner--main, .bna-myabacfo-wrap--article .aba-banner--main { display: none; } .bna-myabacfo-wrap .bna-myabacfo-alt { display: flex; justify-content: center; } .bna-myabacfo-wrap--home, .bna-myabacfo-wrap--article { padding-left: 16px; padding-right: 16px; } } /* Sidebar slot: already in a narrow column, so it only needs centring. */ .bna-myabacfo-wrap--side { max-width: none; padding: 18px 0 2px; display: flex; justify-content: center; } /* ---- Hover ---- shared.css:32 sets a bare `a:hover { color: var(--red) }`, which outranks `.aba-banner` and turned the headline and wordmark red on hover. The banner is one big link, so it has to hold its own ink in every link state. The affordance is the CTA darkening plus a brass edge, which is what the advertiser's design already does, rather than a colour change. */ .aba-banner:link, .aba-banner:visited, .aba-banner:hover, .aba-banner:focus, .aba-banner:active { color: var(--aba-ink); text-decoration: none; } .aba-banner:hover { border-color: var(--aba-brass); box-shadow: 0 2px 10px rgba(44, 38, 32, .13); } .aba-banner { transition: border-color .15s ease, box-shadow .15s ease; } .aba-banner:hover .aba-banner__wordmark b { color: var(--aba-brass); } /* The banner's own text colours, stated outright rather than inherited. shared.css:33 sets `h1, h2, h3, h4 { color: var(--navy) }`, and the headline is an h3, so inheritance from the link never reached it — the headline rendered navy at rest and picked up the red on hover. Every text part now declares its colour and repeats it for :hover, so the theme's heading and link rules cannot reach inside the creative. */ .aba-banner .aba-banner__headline, .aba-banner:hover .aba-banner__headline, .aba-banner .aba-banner__body, .aba-banner:hover .aba-banner__body, .aba-banner .aba-banner__wordmark, .aba-banner:hover .aba-banner__wordmark, .aba-banner .aba-banner__tagline, .aba-banner:hover .aba-banner__tagline, .aba-banner .aba-banner__name, .aba-banner:hover .aba-banner__name { color: var(--aba-ink); } .aba-banner .aba-banner__wordmark b, .aba-banner:hover .aba-banner__wordmark b { color: var(--aba-brass); } .aba-banner .aba-banner__cta, .aba-banner:hover .aba-banner__cta { color: #fff; } /* ---- Leaderboard geometry ---- This is no longer a stock 728x90: it runs the full width of the page, and each sentence of a headline now starts on its own line, which costs a line of height. 110px gives the type room to grow instead of squeezing it. The CTA column dropped from 166px to 130px because every concept now shows the same short label, and that reclaimed width goes to the headline. */ .bna-myabacfo-wrap .aba-banner--main { height: 135px; padding: 11px 12px; grid-template-columns: 124px minmax(0, 1fr) 72px 130px; gap: 12px; } .bna-myabacfo-wrap .aba-banner--main .aba-banner__photo { width: 88px; height: 96px; } .bna-myabacfo-wrap .aba-banner--main .aba-banner__headline { line-height: 1.38; } .bna-myabacfo-wrap .aba-banner--main .aba-banner__cta { min-height: 42px; font-size: 16px; } /* ---- Leaderboard type ---- Fluid width means the headline column is far wider on the homepage (about 940px) than on an article (about 460px), so it is sized per context. The three two-sentence headlines take two lines and step down to match. */ .bna-myabacfo-wrap--home .aba-banner--main { --aba-head-size: 28px; } .bna-myabacfo-wrap--home .aba-banner--main.aba-banner--v1, .bna-myabacfo-wrap--home .aba-banner--main.aba-banner--v4, .bna-myabacfo-wrap--home .aba-banner--main.aba-banner--v5 { --aba-head-size: 28px; } .bna-myabacfo-wrap--article .aba-banner--main { --aba-head-size: 23px; } .bna-myabacfo-wrap--article .aba-banner--main.aba-banner--v1, .bna-myabacfo-wrap--article .aba-banner--main.aba-banner--v4, .bna-myabacfo-wrap--article .aba-banner--main.aba-banner--v5 { --aba-head-size: 21px; } /* ---- Sidebar legibility ---- The supplied 300x250 sets body copy at 10px, which is small on a real screen. Raised here; the box stays a fixed 300x250 so these are the largest sizes that still fit the longest concept without clipping. */ /* The 300x250 is a fixed box, so type and portrait compete for the same 232px of usable height. These are the largest values that clear the longest of the eight concepts; measured, not estimated. Tightening the row gap to 3px and the padding to 8px is what buys the room. */ .aba-banner--side { --aba-head-size: 21px; --aba-body-size: 13.5px; gap: 4px; padding: 14px 14px 16px; } .aba-banner--side .aba-banner__body { line-height: 1.56; } .aba-banner--side .aba-banner__name { font-size: 11px; } .aba-banner--side .aba-banner__cta { font-size: 16px; } /* Mike's portrait was 61x37 — thumbnail-sized. Now 74x48, with the top row grown to match so nothing below is pushed out of the box. */ /* The supplied 300x250 put the wordmark and the portrait in a fixed-height row, so the portrait could only grow by pushing the copy down. Floating it instead lets the wordmark and headline use the space beside it, which is what pays for a portrait this size without shrinking the body copy. */ .aba-banner--side .aba-banner__side-flow { display: block; min-width: 0; } .aba-banner--side .aba-banner__person { float: right; margin: 0 0 2px 9px; } .aba-banner--side .aba-banner__headline { margin-top: 13px; } .aba-banner--side .aba-banner__body { margin-top: 15px; } .aba-banner--side .aba-banner__photo { width: 88px; height: 78px; /* Crop left to the base rule: 130% at 52% 24%. */ } /* The per-variant head-size steps that used to sit here existed only to make the longest concepts clear a fixed 250px. The card grows now, so all eight share one size. */ /* (the per-variant CTA sizes that used to sit here are gone: every concept now shows the same short label, so nothing needs its own step down) */