/* * 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: 7px; 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: 18px; } .aba-banner--main .aba-banner__tagline { font-size: 5.2px; 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. */ .aba-banner--side { width: 300px; height: 250px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; } .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: 6px; 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: auto; min-height: 29px; flex: none; font-size: var(--aba-cta-size, 12px); padding: 5px 9px; } .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; } .aba-banner--main.aba-banner--v7, .aba-banner--main.aba-banner--v8 { --aba-cta-size: 12px; } .aba-banner--side.aba-banner--v4, .aba-banner--side.aba-banner--v5 { --aba-head-size: 15.5px; } .aba-banner--side.aba-banner--v3, .aba-banner--side.aba-banner--v8 { --aba-cta-size: 11px; }@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 type ---- The banner is fluid here, so the headline column is far wider on the homepage (about 880px) than on an article (about 430px). Size it per context; the long-headline variants keep their own step down. */ .bna-myabacfo-wrap--home .aba-banner--main { --aba-head-size: 23px; --aba-cta-size: 14px; } .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: 21px; } .bna-myabacfo-wrap--home .aba-banner--main.aba-banner--v7, .bna-myabacfo-wrap--home .aba-banner--main.aba-banner--v8 { --aba-cta-size: 13px; } .bna-myabacfo-wrap--article .aba-banner--main { --aba-head-size: 20px; } .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: 18px; } /* Bigger portrait on the leaderboard now that there is room for it. */ .bna-myabacfo-wrap .aba-banner--main .aba-banner__photo { width: 68px; height: 58px; } .bna-myabacfo-wrap .aba-banner--main { grid-template-columns: 104px minmax(0, 1fr) 68px 166px; } /* ---- 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: 17px; --aba-body-size: 11.5px; gap: 3px; padding: 8px 10px; } .aba-banner--side .aba-banner__body { line-height: 1.26; } .aba-banner--side .aba-banner__name { font-size: 8.5px; } .aba-banner--side .aba-banner__cta { font-size: var(--aba-cta-size, 13px); } /* 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: 4px; } .aba-banner--side .aba-banner__body { margin-top: 3px; } .aba-banner--side .aba-banner__photo { width: 88px; height: 78px; /* Crop left to the base rule: 130% at 52% 24%. */ } .aba-banner--side.aba-banner--v4, .aba-banner--side.aba-banner--v5 { --aba-head-size: 16px; } /* v6 carries the longest headline and body pair of the eight, so it needs a touch less than the rest to clear the fixed 250px height. */ .aba-banner--side.aba-banner--v6 { --aba-head-size: 15.5px; --aba-body-size: 11px; } .aba-banner--side.aba-banner--v3, .aba-banner--side.aba-banner--v8 { --aba-cta-size: 11.5px; }