.pssa, .pssa * { box-sizing: border-box; } .pssa { width: 100%; position: relative; font-family: inherit; } /* Drawer portal: drawer/backdrop are moved directly under by JS so * Elementor/theme stacking contexts cannot paint above the story overlay. */ .pssa-portal, .pssa-portal * { box-sizing: border-box; } /* * Desktop accordion. * The JS-enhanced layout uses explicit pixel widths instead of animated * flex-basis values. That is deliberate: Safari has been inconsistent about * animating mixed flex-basis/grow values, especially when percentages and * clamp() are involved. */ .pssa-accordion { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; height: 600px; min-height: 600px; overflow: hidden; } .pssa-card { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; border-radius: clamp(20px, 1.55vw, 28px); background: var(--pssa-card-bg, #0b7ae1); cursor: pointer; outline: none; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-box-flex 560ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease; transition: flex-grow 560ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease; } /* * The gutters are created by space-between plus JS width math, rather than * flex gap/margins. That makes the separation visible and reliable in Safari. */ /* CSS-only fallback if JS is blocked for any reason. */ .pssa-card.is-active { -webkit-box-flex: 4; -webkit-flex-grow: 4; flex-grow: 4; box-shadow: 0 24px 70px rgba(17, 24, 39, .14); } /* JS takes over sizing with simple width animation. This is Safari-safe. */ .pssa.pssa-js .pssa-card { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; transition: width 560ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease; } .pssa-card:focus { outline: none; } .pssa-card:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0b7ae1; } /* * Portrait behavior: * - full card height again, with no artificial top band; * - anchored to the bottom; * - on desktop every portrait keeps the active-card rendered width, so a * collapsed card crops the sides instead of shrinking the person. * The source images can therefore be rebuilt to control headroom directly. */ .pssa-card__image { position: absolute; z-index: 0; display: block; left: 50%; bottom: 0 !important; top: auto !important; height: 100% !important; width: 100%; min-width: 100%; max-width: none !important; object-fit: cover; object-position: center bottom; pointer-events: none; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity 260ms ease, -webkit-filter 260ms ease; transition: opacity 260ms ease, filter 260ms ease; } .pssa-card__shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(to top, rgba(6, 8, 20, .78) 0%, rgba(6, 8, 20, .28) 43%, rgba(6, 8, 20, .06) 64%, rgba(6, 8, 20, 0) 76%); opacity: 1; transition: opacity 300ms ease; pointer-events: none; } /* Keep the darker bottom gradient on every card, active or collapsed. */ .pssa-card:not(.is-active) .pssa-card__shade { opacity: 1; } .pssa-card__content { position: absolute; z-index: 3; left: clamp(28px, 3vw, 48px); right: clamp(28px, 3vw, 48px); bottom: clamp(28px, 3.2vw, 48px); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; color: #fff; opacity: 0; visibility: hidden; -webkit-transform: translateY(14px); transform: translateY(14px); transition: opacity 220ms ease, -webkit-transform 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms; transition: opacity 220ms ease, transform 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms; } .pssa-card__content > * + * { margin-left: 24px !important; } .pssa-card.is-active .pssa-card__content { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: 110ms, 70ms, 0s; } .pssa-card__name { margin: 0 !important; padding: 0 !important; color: #fff !important; background: transparent !important; font-family: inherit !important; font-size: clamp(34px, 3.2vw, 56px) !important; line-height: .98 !important; font-weight: 500 !important; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(0, 0, 0, .22); } /* Rounded rectangle, not a pill/circle. */ .pssa-story-button { -webkit-flex: 0 0 auto; flex: 0 0 auto; -webkit-appearance: none; appearance: none; border: 1.5px solid rgba(255,255,255,.96) !important; border-radius: 9px !important; background: transparent !important; color: #fff !important; padding: 13px 20px !important; margin: 0 !important; min-height: 0 !important; font: inherit !important; font-size: 15px !important; line-height: 1 !important; font-weight: 650 !important; letter-spacing: .01em; cursor: pointer; box-shadow: none !important; text-decoration: none !important; transition: background-color 180ms ease, color 180ms ease, -webkit-transform 180ms ease; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; } .pssa-story-button:hover, .pssa-story-button:focus-visible { background: #fff !important; color: #17182b !important; -webkit-transform: translateY(-1px); transform: translateY(-1px); } /* Collapsed name is plain vertical text. No box behind it. */ .pssa-card__collapsed-name { position: absolute; z-index: 3; left: 50%; bottom: clamp(30px, 4vw, 54px); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; padding: 0; border: 0; background: transparent !important; color: #fff !important; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: opacity 190ms ease, -webkit-transform 300ms cubic-bezier(.2,.8,.2,1); transition: opacity 190ms ease, transform 300ms cubic-bezier(.2,.8,.2,1); overflow: visible; text-shadow: 0 1px 14px rgba(0,0,0,.14); } .pssa-card__collapsed-name span { display: block; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-transform: rotate(180deg); transform: rotate(180deg); white-space: nowrap; font-size: clamp(20px, 1.7vw, 28px); line-height: 1; font-weight: 500; letter-spacing: -.015em; } .pssa-card.is-active .pssa-card__collapsed-name { opacity: 0; -webkit-transform: translateX(-50%) translateY(10px); transform: translateX(-50%) translateY(10px); pointer-events: none; } .pssa-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: rgba(10, 13, 25, .48); opacity: 0; transition: opacity 340ms ease; } .pssa-backdrop.is-open { opacity: 1; } .pssa-drawer { position: fixed; top: 0; right: 0; z-index: 2147483001; width: min(620px, 92vw); height: 100vh; background: #fff; color: #17182b; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -24px 0 90px rgba(5, 10, 25, .20); -webkit-transform: translate3d(104%,0,0); transform: translate3d(104%,0,0); visibility: hidden; transition: -webkit-transform 440ms cubic-bezier(.22,.8,.2,1), visibility 0s linear 440ms; transition: transform 440ms cubic-bezier(.22,.8,.2,1), visibility 0s linear 440ms; } @supports (height: 100dvh) { .pssa-drawer { height: 100dvh; } } .pssa-drawer.is-open { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); visibility: visible; transition-delay: 0s; } .pssa-drawer__content, .pssa-drawer__inner { min-height: 100%; } .pssa-drawer__close { position: absolute; top: 22px; right: 22px; z-index: 3; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; width: 42px; height: 42px; padding: 0 !important; border: 1px solid #dfe3ea !important; border-radius: 50% !important; background: #fff !important; color: #17182b !important; font: inherit !important; font-size: 30px !important; line-height: 1 !important; cursor: pointer; box-shadow: 0 8px 26px rgba(17,24,39,.08) !important; } .pssa-drawer__close span { display: block; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .pssa-drawer__body { padding: 72px clamp(30px, 5vw, 58px) clamp(60px, 7vw, 90px); } /* Small, even, round profile crop aligned left above the story. */ .pssa-drawer__profile { width: 112px; height: 112px; margin: 0 0 24px; border-radius: 50%; overflow: hidden; background: #eef1f5; box-shadow: 0 0 0 1px rgba(17,24,39,.06); } .pssa-drawer__profile img { display: block; width: 100%; height: 100%; max-width: none !important; object-fit: cover; object-position: center; } .pssa-drawer__eyebrow { margin: 0 0 9px !important; color: #0b7ae1 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: .11em; text-transform: uppercase; } .pssa-drawer__name { margin: 0 0 30px !important; padding: 0 !important; color: #17182b !important; background: transparent !important; font-family: inherit !important; font-size: clamp(36px, 5vw, 54px) !important; line-height: 1 !important; font-weight: 550 !important; letter-spacing: -.04em; } .pssa-drawer__story { color: #36384a; font-size: 18px; line-height: 1.72; } .pssa-drawer__story > :first-child { margin-top: 0 !important; } .pssa-drawer__story > :last-child { margin-bottom: 0 !important; } .pssa-drawer__story a { color: #006dc4; text-decoration: underline; text-underline-offset: 3px; } html.pssa-drawer-open, body.pssa-drawer-open { overflow: hidden !important; } @media (max-width: 900px) and (min-width: 681px) { .pssa-accordion { height: 600px; min-height: 600px; } .pssa-card__content { left: 26px; right: 26px; } .pssa-card__name { font-size: clamp(30px, 5vw, 44px) !important; } } @media (max-width: 680px) { /* * Mobile becomes a horizontal story rail, matching the reference: * one compact card shows fully, the next card remains visibly partial * at the right edge, and the user swipes horizontally instead of * expanding/collapsing panels. */ .pssa-accordion { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-column-gap: 18px; column-gap: 18px; gap: 18px; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; width: 100%; height: 370px; min-height: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: 20px; scrollbar-width: none; padding: 0 20px; } .pssa-accordion::-webkit-scrollbar { display: none; width: 0; height: 0; } .pssa-card, .pssa.pssa-js .pssa-card, .pssa-card.is-active, .pssa.pssa-js .pssa-card.is-active { -webkit-box-flex: 0; -webkit-flex: 0 0 64vw; flex: 0 0 64vw; width: 64vw !important; max-width: 280px; min-width: 220px; height: 100%; min-height: 0; border-radius: 22px; scroll-snap-align: start; scroll-snap-stop: normal; } /* * Mobile spacing is a real flex gap. Current Safari supports flex-gap and * this prevents the cards from visually welding together. The margin * fallback below is only for very old Safari versions without flex-gap. */ @supports not (gap: 1px) { .pssa-card + .pssa-card { margin-left: 18px !important; margin-top: 0 !important; } } .pssa-card:last-child { margin-right: 0; } .pssa-card__image, .pssa.pssa-js .pssa-card__image { left: 50%; bottom: 0; top: auto; width: 100% !important; min-width: 100% !important; height: 100% !important; max-width: none !important; -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); object-fit: cover; object-position: center bottom; } /* Every mobile slide reads like a full card, not a collapsed accordion tab. */ .pssa-card__collapsed-name { display: none !important; } .pssa-card__content, .pssa-card.is-active .pssa-card__content { left: 18px; right: 18px; bottom: 18px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; opacity: 1; visibility: visible; -webkit-transform: none; transform: none; transition: none; } .pssa-card__content > * + * { margin-left: 14px !important; margin-top: 0 !important; } .pssa-card__name { min-width: 0; font-size: clamp(27px, 8vw, 36px) !important; line-height: .98 !important; } .pssa-story-button { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 10px 12px !important; font-size: 13px !important; white-space: nowrap; } .pssa-drawer { width: 100vw; } .pssa-drawer__body { padding: 76px 24px 60px; } .pssa-drawer__profile { width: 96px; height: 96px; } .pssa-drawer__name { font-size: 38px !important; } .pssa-drawer__story { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .pssa-card, .pssa-card__content, .pssa-card__collapsed-name, .pssa-drawer, .pssa-backdrop, .pssa-story-button { transition-duration: 1ms !important; } } /* ===== v1.9.0 quote block + controls ===== */ .pssa-card__content, .pssa-card.is-active .pssa-card__content { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .pssa-card__quote { color: #fff; margin: 0 0 var(--pssa-quote-margin, 18px) 0; max-width: min(92%, 430px); } .pssa-card__quote-mark { display: block; width: 44px; height: auto; margin: 0 0 10px 0; } .pssa-card__quote-text { color: #fff; font-size: var(--pssa-quote-text-size, 18px); line-height: var(--pssa-quote-line-height, 1.24); font-weight: 400; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.2); } .pssa-card__footer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .pssa-card__footer > * + * { margin-left: 24px !important; } .pssa-card__name { font-size: clamp(34px, 3.2vw, var(--pssa-name-size, 56px)) !important; } .pssa-story-button { padding: var(--pssa-button-pad-y, 13px) var(--pssa-button-pad-x, 20px) !important; font-size: var(--pssa-button-text-size, 15px) !important; } .pssa-drawer__quote-box { display: block; margin: 0 0 28px; padding: 22px 24px 24px; border-radius: 18px; background: #25AAE3; color: #fff; } .pssa-drawer__quote-icon-wrap { margin: 0 0 12px; } .pssa-drawer__quote-icon { display: block; width: 42px; height: auto; } .pssa-drawer__quote-text { color: #fff; font-size: var(--pssa-quote-text-size, 18px); line-height: var(--pssa-quote-line-height, 1.24); font-weight: 400; letter-spacing: -.01em; } @media (max-width: 900px) and (min-width: 681px) { .pssa-card__quote { max-width: 86%; } .pssa-card__quote-mark { width: 40px; } .pssa-card__name { font-size: clamp(30px, 5vw, var(--pssa-name-size, 56px)) !important; } } @media (max-width: 680px) { .pssa-card__content, .pssa-card.is-active .pssa-card__content { left: 18px; right: 18px; bottom: 18px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; opacity: 1; visibility: visible; -webkit-transform: none; transform: none; transition: none; } .pssa-card__quote { max-width: 100%; margin: 0 0 calc(var(--pssa-quote-margin, 18px) - 2px) 0; } .pssa-card__quote-mark { width: 34px; margin-bottom: 8px; } .pssa-card__quote-text { font-size: clamp(13px, 4.2vw, var(--pssa-quote-text-size, 18px)) !important; line-height: var(--pssa-quote-line-height, 1.24); } .pssa-card__footer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .pssa-card__footer > * + * { margin-left: 12px !important; } .pssa-card__name { font-size: clamp(24px, 7.8vw, calc(var(--pssa-name-size, 56px) * .72)) !important; } .pssa-story-button { padding: max(8px, calc(var(--pssa-button-pad-y, 13px) * .78)) max(12px, calc(var(--pssa-button-pad-x, 20px) * .78)) !important; font-size: clamp(12px, 3.7vw, var(--pssa-button-text-size, 15px)) !important; white-space: nowrap; } .pssa-drawer__quote-box { padding: 18px 18px 20px; border-radius: 16px; margin-bottom: 24px; } .pssa-drawer__quote-icon { width: 34px; } .pssa-drawer__quote-text { font-size: clamp(16px, 4.5vw, var(--pssa-quote-text-size, 18px)); } } /* ===== v1.10.0 control split + mobile controls + Rethink Sans ===== */ .pssa-card__name { font-size: clamp(34px, 3.2vw, var(--pssa-active-name-size, 56px)) !important; padding: var(--pssa-active-name-pad-y, 0px) var(--pssa-active-name-pad-x, 0px) !important; margin: 0 var(--pssa-active-name-margin-x, 0px) var(--pssa-active-name-margin-y, 0px) var(--pssa-active-name-margin-x, 0px) !important; } .pssa-card__collapsed-name span { font-size: clamp(20px, 1.7vw, var(--pssa-collapsed-name-size, 28px)); } .pssa-card__quote-text, .pssa-drawer__quote-text { font-family: "Rethink Sans", sans-serif; font-weight: var(--pssa-quote-font-weight, 500); } @media (max-width: 900px) and (min-width: 681px) { .pssa-card__name { font-size: clamp(30px, 5vw, var(--pssa-active-name-size, 56px)) !important; } } @media (max-width: 680px) { .pssa-card__quote { margin: 0 0 var(--pssa-mobile-quote-margin, 16px) 0; } .pssa-card__quote-text, .pssa-drawer__quote-text { font-family: "Rethink Sans", sans-serif; font-size: clamp(13px, 4.2vw, var(--pssa-mobile-quote-text-size, 17px)) !important; line-height: var(--pssa-mobile-quote-line-height, 1.24); font-weight: var(--pssa-mobile-quote-font-weight, 500); } .pssa-card__name { font-size: clamp(24px, 7.8vw, var(--pssa-mobile-active-name-size, 36px)) !important; padding: var(--pssa-mobile-active-name-pad-y, 0px) var(--pssa-mobile-active-name-pad-x, 0px) !important; margin: 0 var(--pssa-mobile-active-name-margin-x, 0px) var(--pssa-mobile-active-name-margin-y, 0px) var(--pssa-mobile-active-name-margin-x, 0px) !important; } .pssa-story-button { padding: var(--pssa-mobile-button-pad-y, 10px) var(--pssa-mobile-button-pad-x, 12px) !important; font-size: clamp(12px, 3.7vw, var(--pssa-mobile-button-text-size, 13px)) !important; } .pssa-drawer__quote-box { margin-bottom: 24px; } } /* ===== v1.19.2 first featured story alignment + lift ===== * The selector intentionally overlaps the first card on desktop. The footer * is the second child of the content column, and a legacy sibling-spacing * rule indents it 24px. Remove only that footer indent so story names align * with the quote; the button retains its own sibling spacing. */ .pssa-card__content > .pssa-card__footer { margin-left: 0 !important; } @media (min-width: 681px) { /* First story name stays at the full configured lift, above the selector. */ .pssa-card--first.is-active .pssa-card__name { -webkit-transform: translateY(calc(0px - var(--pssa-first-story-lift, 130px))); transform: translateY(calc(0px - var(--pssa-first-story-lift, 130px))); } /* Quote sits 10px lower than the name. */ .pssa-card--first.is-active .pssa-card__quote { -webkit-transform: translateY(calc(10px - var(--pssa-first-story-lift, 130px))); transform: translateY(calc(10px - var(--pssa-first-story-lift, 130px))); } } /* ===== v1.19.3 quote-mark layout stability ===== * Reserve the icon's final footprint before the PNG decodes. This prevents * the quote text from briefly occupying the icon row when a card activates. */ .pssa-card__quote-mark { width: 44px; height: 38.5px; object-fit: contain; } .pssa-drawer__quote-icon { width: 42px; height: 36.75px; object-fit: contain; } @media (max-width: 900px) and (min-width: 681px) { .pssa-card__quote-mark { width: 40px; height: 35px; } } @media (max-width: 680px) { .pssa-card__quote-mark, .pssa-drawer__quote-icon { width: 34px; height: 29.75px; } } /* ===== v1.11.1 mobile rail gutter ===== */ @media (max-width: 680px) { .pssa-accordion { scroll-padding-inline: 20px; } }