/** * Marcrist Banners * * Every rule is scoped with two classes on purpose. Breakdance puts its * `breakdance` class on , so element level rules like * `.breakdance a { ... }` score 0,1,1 and would beat a single class here. * Breakdance also prints its stylesheet after this one, so we win on * specificity rather than on order. Do not flatten these to one class. */ .mcb { --mcb-ratio-desktop: 3200 / 900; --mcb-ratio-mobile: 1201 / 1500; --mcb-max-height: 520px; --mcb-fg-width: 93.75%; --mcb-fg-height: 88%; --mcb-fg-mobile-width: 90%; --mcb-fg-mobile-height: 94%; --mcb-fade: 500ms; --mcb-scrim: 0; --mcb-text: #ffffff; --mcb-btn-bg: #171d3f; --mcb-btn-text: #ffffff; position: relative; width: 100%; } .mcb .mcb__viewport { position: relative; width: 100%; aspect-ratio: var(--mcb-ratio-desktop); max-height: var(--mcb-max-height); overflow: hidden; } .mcb .mcb__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--mcb-fade) ease, visibility var(--mcb-fade) ease; } /* visibility, not just opacity, so an inactive banner is out of the tab order and out of the accessibility tree rather than invisibly focusable. */ .mcb .mcb__slide.is-active { opacity: 1; visibility: visible; } /* Read by a screen reader, never seen. */ .mcb .mcb__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mcb .mcb__link { position: absolute; inset: 0; display: block; text-decoration: none; } /* The is the positioned box in both layers, so nothing here depends on display:contents hoisting the out. */ .mcb .mcb__bgpic { position: absolute; inset: 0; display: block; } .mcb .mcb__bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .mcb .mcb__slide::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--mcb-scrim); pointer-events: none; } .mcb .mcb__fgpic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* The foreground is given a box that is the same fraction of the slide that the artwork occupied on the designer's canvas (a 3000px foreground on a 3200x900 background is 93.75% by 88%), then object-fit: contain fits the artwork inside it on whichever axis binds. * * This is why it works for any artwork without per-banner settings: a shorter * foreground simply binds on width instead of height and lands at its own * proportion. And because the slide's height is capped, the foreground stops * growing once the cap is reached while the background carries on stretching. * * The percentages resolve because the picture above has a definite height from * the slide. */ .mcb .mcb__fg { width: var(--mcb-fg-width); height: var(--mcb-fg-height); object-fit: contain; } /* Live text laid over the background */ .mcb .mcb__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6em; padding: clamp(20px, 4vw, 64px); color: var(--mcb-text); } .mcb .mcb__content--left { align-items: flex-start; text-align: left; } .mcb .mcb__content--center { align-items: center; text-align: center; } .mcb .mcb__content--right { align-items: flex-end; text-align: right; } .mcb .mcb__headline { margin: 0; font-size: clamp(28px, 3.4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; font-weight: 600; color: var(--mcb-text); } .mcb .mcb__subline { margin: 0; max-width: min(46ch, 100%); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; color: var(--mcb-text); } .mcb .mcb__btn { display: inline-block; margin-top: 0.4em; padding: 0.75em 1.6em; background: var(--mcb-btn-bg); color: var(--mcb-btn-text); font-size: clamp(14px, 1vw, 16px); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: filter 150ms ease; } .mcb .mcb__btn:hover, .mcb .mcb__btn:focus-visible { filter: brightness(1.15); color: var(--mcb-btn-text); } .mcb .mcb__smallprint { margin: 0; font-size: 12px; opacity: 0.8; color: var(--mcb-text); } .mcb .mcb__smallprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Dots */ .mcb .mcb__dots { position: absolute; left: 0; right: 0; bottom: clamp(10px, 1.4vw, 20px); display: flex; justify-content: center; gap: 10px; z-index: 2; } .mcb .mcb__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 150ms ease, transform 150ms ease; -webkit-appearance: none; appearance: none; } .mcb .mcb__dot:hover { background: rgba(255, 255, 255, 0.75); } .mcb .mcb__dot.is-active { background: #ffffff; transform: scale(1.2); } .mcb .mcb__dot:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* Mobile artwork. Keep this breakpoint in step with mcb_breakpoint() in PHP. */ @media (max-width: 600px) { .mcb .mcb__viewport { aspect-ratio: var(--mcb-ratio-mobile); max-height: none; } /* Same rule, mobile proportions: a 1080 wide foreground on a 1200x1500 background is 90% by 94%. */ .mcb .mcb__fg { width: var(--mcb-fg-mobile-width); height: var(--mcb-fg-mobile-height); } .mcb .mcb__content { justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 44px; } } @media (prefers-reduced-motion: reduce) { .mcb .mcb__slide { transition: none; } .mcb .mcb__dot { transition: none; } }