/* * Award Spotlight — Home hero award reveal. * * Markup: inc/award-spotlight.php * Behaviour: assets/js/seamlessmd-award-spotlight.js * * The motion is the original Award Spotlight expansion (086ea91), re-seated: * the FULL award item in the hero's awards strip opens, in one continuous * 500ms cubic-bezier(.22,.61,.36,1) growth, into the centred recognition * card — and, on dismissal, contracts back into the same cell by the same * transformation reversed (540ms, freshly measured geometry). The card * element itself is the morphing object — it starts at the cell's bounds * looking like the cell (soft wash material, a facsimile of the cell's * content, the artwork at icon size) and grows into the card while the * artwork grows with it; on the way back the content recedes first and the * artwork shrinks home. A restrained fixed backdrop (navy tint + gentle * blur) rises with the expansion and clears through the return, fully gone * only once the award has landed. * * The real cell keeps its layout footprint throughout: a soft wash marks it * as the source and its content recedes, returning just before the card * lands — never an empty ghost, never a reflow, never two full awards. * * All geometry during the morphs (card box, artwork box) is driven by the * script with the Web Animations API; this file owns the resting looks, the * grouped content fades, the backdrop and the timing custom properties the * script reads (single source of truth). Non-modal by design: the backdrop * is visual focus support only (pointer-events: none) — no inert page, no * scroll lock. Loaded after the theme bundle (declared dependency), so * equal-specificity rules here win. Colours, type and spacing consume the * theme tokens — nothing here is editor-configurable by design. */ /* --------------------------------------------------------------------- * Source cell in the hero strip * * The hero's FIRST authored award item, tagged by inc/award-spotlight.php. * At rest it carries NO extra styling — the frontend cell is * pixel-identical to the authored/admin presentation. The WHOLE

is * the source object: its `::before` wash draws the cell's bounds as one * surface — the exact rectangle the card opens from and returns to — and * `.is-away` recedes the cell's content while its award is on stage; both * appear only while the reveal runs. * ------------------------------------------------------------------ */ .seamlessmd-award-spotlight__origin { position: relative; /* Keeps the -1 wash between the cell's background and its content. */ isolation: isolate; } /* The wash — lights up as the cell opens, stays while the card is out * (it is also the return target the eye reads), fades after the award * has landed. Durations mirror the card's * `--seamlessmd-award-spotlight-wash` / `-washout` tokens (the origin * cannot inherit them from the card, which lives at the end of ). */ .seamlessmd-award-spotlight__origin::before { content: ""; position: absolute; inset: -10px -14px; z-index: -1; border-radius: 12px; background: var(--seamlessmd-primary-soft, #eff4ff); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16); opacity: 0; transition: opacity 240ms ease; pointer-events: none; } .seamlessmd-award-spotlight__origin.is-source-active::before { opacity: 1; transition-duration: 150ms; } .seamlessmd-award-spotlight__origin > * { transition: opacity 200ms ease; } .seamlessmd-award-spotlight__origin.is-away > * { opacity: 0.35; } /* --------------------------------------------------------------------- * Backdrop — premium focus support, not a modal. * * Fixed, click-through, below the card (59 < 60). A restrained navy tint * with a gentle blur; the element's opacity is what animates, so tint and * blur rise and clear together. In: with the expansion (500ms — full by * the time the card is open). Out: through the return (620ms ≈ return * 540ms + a small tail), so it is fully clear only once the award has * landed. Durations mirror the card's `-morph` / `-return` tokens. * ------------------------------------------------------------------ */ .seamlessmd-award-spotlight-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(30, 42, 92, 0.42); -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); opacity: 0; pointer-events: none; /* The OUT fade (class removed). Ease-in on purpose: the veil holds * through most of the 540ms return and releases as the award lands, * fully clear only just after it (620ms). */ transition: opacity 620ms cubic-bezier(0.4, 0, 1, 1); } .seamlessmd-award-spotlight-backdrop[hidden] { display: none; } .seamlessmd-award-spotlight-backdrop.is-on { opacity: 1; transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* --------------------------------------------------------------------- * Recognition card * * Resting styles ARE the open card (the approved design). The compact * start/landing state exists only inside the morph animations, driven by * the script: box at the cell's wash bounds, radius 12px, wash material, * blue-tinted border, whisper shadow. * ------------------------------------------------------------------ */ .seamlessmd-award-spotlight { /* Timeline — read by the script. `delay` is the breathing room after * the page is ready; `morph` is THE single expansion (recovered from * 086ea91: 500ms, cubic-bezier(.22,.61,.36,1)); `return` is the same * transformation reversed on dismissal; `srcfade` and `resolve` are * the grouped content fades inside them; `wash`/`washout` are the * origin wash. */ --seamlessmd-award-spotlight-delay: 1000ms; --seamlessmd-award-spotlight-morph: 500ms; --seamlessmd-award-spotlight-return: 540ms; --seamlessmd-award-spotlight-srcfade: 140ms; --seamlessmd-award-spotlight-resolve: 240ms; --seamlessmd-award-spotlight-wash: 150ms; --seamlessmd-award-spotlight-washout: 240ms; --seamlessmd-award-spotlight-ease: cubic-bezier(0.22, 0.61, 0.36, 1); position: absolute; z-index: 60; box-sizing: border-box; margin: 0; padding: 20px; overflow: hidden; border: 1px solid var(--seamlessmd-border, #e5e7eb); border-radius: 18px; background: var(--seamlessmd-surface, #fff); box-shadow: 0 18px 48px rgba(30, 42, 92, 0.16), 0 2px 6px rgba(30, 42, 92, 0.06); color: var(--seamlessmd-text, #1a1a2e); text-align: start; will-change: left, top, width, height; } .seamlessmd-award-spotlight[hidden] { display: none; } /* --------------------------------------------------------------------- * Source facsimile — the cell's own look, INSIDE the morphing card, so * the object that starts expanding IS the award cell: an icon-sized * spacer (the morph artwork overlays that slot from the first frame) + * award title + recognition line, laid out exactly like the hero item * (the script gives it the cell's measured size and mirrors the cell's * live text). It softens away as the expansion begins and stays away for * the return — the landing is artwork-only, with the real cell's content * re-brightening beneath. * ------------------------------------------------------------------ */ .seamlessmd-award-spotlight__source { position: absolute; inset-block-start: 10px; inset-inline-start: 14px; display: flex; align-items: center; gap: 12px; opacity: 1; transition: opacity var(--seamlessmd-award-spotlight-srcfade) ease; pointer-events: none; } .seamlessmd-award-spotlight.is-morphing .seamlessmd-award-spotlight__source { opacity: 0; } /* Matches the plain .seamlessmd-hero__award-icon box (2.75rem, no chrome) * so the facsimile text sits exactly where the cell's text sits. */ .seamlessmd-award-spotlight__source-icon { flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.75rem; } .seamlessmd-award-spotlight__source-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } /* Mirrors .seamlessmd-hero__award-title / -desc so the facsimile is * pixel-faithful to the real cell it covers. */ .seamlessmd-award-spotlight__source-title { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: var(--seamlessmd-text, #1a1a2e); } .seamlessmd-award-spotlight__source-desc { font-size: 0.6875rem; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; color: var(--seamlessmd-text-muted, #6b7280); } /* --------------------------------------------------------------------- * Card content — ONE group (plate + copy + close). It lands during the * expansion once the card has room for it, and recedes as one group at * the start of the return; no stagger either way. * ------------------------------------------------------------------ */ .seamlessmd-award-spotlight__content { opacity: 0; transition: opacity var(--seamlessmd-award-spotlight-resolve) ease-out; } .seamlessmd-award-spotlight.is-revealed .seamlessmd-award-spotlight__content { opacity: 1; } .seamlessmd-award-spotlight__plate { block-size: 130px; border-radius: 16px; background: var(--seamlessmd-primary-soft, #eff4ff); } /* The artwork is the morph's visible constant, both directions. Its rect * is script-driven for the whole run: cell icon → over the plate → back. * Painted above the plate and the facsimile (last child). */ .seamlessmd-award-spotlight__art { position: absolute; display: block; margin: 0; object-fit: contain; pointer-events: none; } .seamlessmd-award-spotlight__body { margin-block-start: 16px; } .seamlessmd-award-spotlight__eyebrow { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--seamlessmd-primary, #2563eb); } .seamlessmd-award-spotlight__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--seamlessmd-dark-navy, #1e2a5c); text-wrap: balance; } .seamlessmd-award-spotlight__description { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.55; color: var(--seamlessmd-text-muted, #6b7280); } .seamlessmd-award-spotlight__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--seamlessmd-primary, #2563eb); text-decoration: none; } .seamlessmd-award-spotlight__cta:hover { text-decoration: underline; } .seamlessmd-award-spotlight__cta:focus-visible { outline: 2px solid var(--seamlessmd-primary, #2563eb); outline-offset: 3px; border-radius: 4px; } .seamlessmd-award-spotlight__cta svg { inline-size: 14px; block-size: 14px; flex: none; } /* Discreet close control — 32px target, logical corner so RTL mirrors * it. Appears with the content group. */ .seamlessmd-award-spotlight__close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--seamlessmd-text-muted, #6b7280); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .seamlessmd-award-spotlight__close:hover { background: var(--seamlessmd-surface, #fff); color: var(--seamlessmd-dark-navy, #1e2a5c); } .seamlessmd-award-spotlight__close:focus-visible { outline: 2px solid var(--seamlessmd-primary, #2563eb); outline-offset: 2px; } .seamlessmd-award-spotlight__close svg { inline-size: 16px; block-size: 16px; } /* --------------------------------------------------------------------- * Reduced-motion fade — the only path that uses a card opacity exit * (normal dismissal contracts back into the cell instead). * ------------------------------------------------------------------ */ .seamlessmd-award-spotlight.is-leaving { opacity: 0 !important; transition: opacity 200ms ease; } /* --------------------------------------------------------------------- * RTL — layout mirrors through logical properties; tracked capitals have * no Arabic equivalent, Arabic headings need more leading, and the arrow * glyph must be flipped explicitly. * ------------------------------------------------------------------ */ [dir="rtl"] .seamlessmd-award-spotlight__eyebrow { letter-spacing: 0; } [dir="rtl"] .seamlessmd-award-spotlight__title { letter-spacing: 0; line-height: 1.35; } [dir="rtl"] .seamlessmd-award-spotlight__source-desc { letter-spacing: 0; } [dir="rtl"] .seamlessmd-award-spotlight__cta svg { transform: scaleX(-1); } /* --------------------------------------------------------------------- * Mobile — the same cell opens into a card the width of the viewport * minus 32px; tighter plate and type. The backdrop keeps the tint but * drops the blur (086 did the same — full-viewport backdrop blur is * expensive on phones) and lightens slightly. * ------------------------------------------------------------------ */ @media (max-width: 767px) { .seamlessmd-award-spotlight { padding: 16px; } .seamlessmd-award-spotlight__plate { block-size: 112px; border-radius: 14px; } .seamlessmd-award-spotlight__title { font-size: 1.0625rem; } .seamlessmd-award-spotlight__description { font-size: 0.8125rem; } .seamlessmd-award-spotlight-backdrop { background: rgba(30, 42, 92, 0.34); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* --------------------------------------------------------------------- * Reduced motion — no geometry morphs, no artwork travel: the script * places the finished card and fades it in and out; content shows with * it, the wash becomes a static emphasis, and the backdrop is a quick * plain fade. * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .seamlessmd-award-spotlight__content, .seamlessmd-award-spotlight__source { transition: none; } .seamlessmd-award-spotlight__origin::before, .seamlessmd-award-spotlight__origin.is-source-active::before, .seamlessmd-award-spotlight__origin > * { transition: none; } .seamlessmd-award-spotlight-backdrop, .seamlessmd-award-spotlight-backdrop.is-on { transition: opacity 200ms ease; } }