/* ========================================================================== Influex Face Marquee — portable, SELF-CONTAINED component styles Powers the [influex_face_marquee] shortcode. Rules are lifted verbatim from the "Face carousel" block of influex-landing.css, with three changes that make the carousel render correctly on ANY page (not just the landing template, which loads the whole design system via @import): 1. SCOPED to .ix-face-marquee--standalone (the shortcode adds this modifier). This guarantees the stylesheet only ever styles shortcode instances and CANNOT touch the landing template's own inline marquee — no dual-rule conflicts, and the landing page is left exactly as-is. 2. SELF-SUFFICIENT. The landing page inherits tokens, a CSS reset (box-sizing), fonts, and a black page background from the design system. Inner pages have none of that, so it's all inlined here: - every design token is var(--token, ) — the fallback values are the resolved design-system values, so on pages that DO load the system the token still wins and there's zero drift; - box-sizing:border-box is re-applied to the component subtree; - the component paints its OWN dark backdrop, so the dark card frames, black edge-fades, and ivory text read correctly over a light page. (Fonts — Inter + Montserrat — are enqueued by influex-face-marquee.php.) 3. No 5.7s hero-synced reveal delay — a portable component must be visible immediately, and the 66s loop is driven by --ix-face-speed (set inline by the shortcode's `speed` attribute). ========================================================================== */ /* Re-apply the box-sizing reset the design system's site.css provides. Without it, inner-page elements use content-box and the clamp() widths + padding overflow — the main cause of the "size/layout" drift on non-landing pages. */ .ix-face-marquee--standalone, .ix-face-marquee--standalone *, .ix-face-marquee--standalone *::before, .ix-face-marquee--standalone *::after { box-sizing: border-box; } /* ------------------------------------------------------------------ Face carousel — full-bleed, auto-scroll with proximity spotlight. Center card: full color + scaled up. Rest: grayscale + shrunk. ------------------------------------------------------------------ */ .ix-face-marquee--standalone { --ix-face-speed: 66s; /* overridden inline by the shortcode */ position: relative; width: 100vw; margin-left: calc(50% - 50vw); /* break out of any container to true edges */ /* margin-top: 36px; */ padding: 24px 0 24px; overflow: hidden; background: linear-gradient(to top, transparent, #000000); /* Own dark backdrop so the component is self-sufficient on any page (the landing template gets this from the hero / body bg; inner pages don't). */ /* background: var(--bg-0, #000000); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); */ } .ix-face-marquee--standalone::before, .ix-face-marquee--standalone::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; z-index: 2; } .ix-face-marquee--standalone::before { left: 0; background: linear-gradient(90deg, rgba(0,0,0,0.98) 0%, transparent 100%); } .ix-face-marquee--standalone::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,0.98) 0%, transparent 100%); } .ix-face-marquee--standalone .ix-face-track { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 32px); width: max-content; padding: 60px 0 48px; /* vertical room for the scaled-up center card */ animation: ix-face-scroll var(--ix-face-speed, 66s) linear infinite; will-change: transform; } .ix-face-marquee--standalone:hover .ix-face-track { animation-play-state: paused; } @keyframes ix-face-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .ix-face-marquee--standalone .ix-face-card { position: relative; flex: 0 0 auto; width: clamp(220px, 18vw, 280px); margin: 0; display: flex; flex-direction: column; transform: scale(0.84); transform-origin: center; transition: transform 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)); z-index: 1; cursor: pointer; outline: none; } .ix-face-marquee--standalone .ix-face-card:focus-visible .ix-face-stage { box-shadow: inset 0 0 0 1px rgba(236,199,119,0.5), 0 0 0 3px rgba(236,199,119,0.35); } .ix-face-marquee--standalone .ix-face-card.is-active { transform: scale(1.14); z-index: 10; } /* Photo stage — dark frame holding portrait + logo overlay */ .ix-face-marquee--standalone .ix-face-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm, 2px); background: radial-gradient(110% 70% at 50% 0%, #1C1C1C 0%, #0A0A0A 55%, #000 100%); box-shadow: inset 0 0 0 1px rgba(236, 199, 119, 0.08), 0 20px 40px -24px rgba(0,0,0,0.85); filter: grayscale(1) brightness(0.58) contrast(0.95); transition: filter 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)); } .ix-face-marquee--standalone .ix-face-card.is-active .ix-face-stage { filter: grayscale(0) brightness(1.06) contrast(1.05); box-shadow: inset 0 0 0 1px rgba(236, 199, 119, 0.50), 0 70px 110px -24px rgba(0,0,0,0.85), 0 0 90px rgba(236, 199, 119, 0.22); } .ix-face-marquee--standalone .ix-face-photo { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom center; display: block; z-index: 1; } .ix-face-marquee--standalone .ix-face-stage::before { /* champagne bloom behind the head — lit only on active card */ content: ""; position: absolute; left: 50%; top: 18%; width: 80%; height: 60%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(236,199,119, 0) 0%, transparent 70%); filter: blur(24px); pointer-events: none; z-index: 0; transition: background 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)); } .ix-face-marquee--standalone .ix-face-card.is-active .ix-face-stage::before { background: radial-gradient(50% 50% at 50% 50%, rgba(236,199,119, 0.32) 0%, transparent 70%); } .ix-face-marquee--standalone .ix-face-stage::after { /* bottom darken so logo reads on gradient floor */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.92) 100%); pointer-events: none; z-index: 2; } .ix-face-marquee--standalone .ix-face-logo { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); max-width: 72%; max-height: 18%; width: auto; height: auto; object-fit: contain; z-index: 3; opacity: 0.72; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); transition: opacity 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)); } .ix-face-marquee--standalone .ix-face-card.is-active .ix-face-logo { opacity: 1; } /* Testimonial quote — markup currently omits it (portrait + name only), but the styles are kept so a
can be restored without touching this file. */ .ix-face-marquee--standalone .ix-face-quote { margin: 22px 12px 14px; padding: 0; font-family: var(--font-display, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif); font-weight: 300; font-style: italic; font-size: clamp(12px, 0.95vw, 14px); line-height: 1.55; color: var(--fg-3, rgba(254, 247, 223, 0.45)); text-align: center; min-height: 4.6em; letter-spacing: -0.005em; text-wrap: pretty; opacity: 0.55; transition: color 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)), opacity 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)); } .ix-face-marquee--standalone .ix-face-card.is-active .ix-face-quote { color: var(--fg-1, #FEF7DF); opacity: 1; } .ix-face-marquee--standalone .ix-face-quote--placeholder { opacity: 0.35; } .ix-face-marquee--standalone .ix-face-card.is-active .ix-face-quote--placeholder { opacity: 0.7; } .ix-face-marquee--standalone .ix-face-name { text-align: center; font-family: var(--font-micro, 'Inter', 'Montserrat', system-ui, sans-serif); font-weight: 700; font-size: clamp(10px, 0.8vw, 12px); letter-spacing: 0.4em; text-transform: uppercase; color: var(--fg-3, rgba(254, 247, 223, 0.45)); /* 20px gap above so the name doesn't touch the bottom edge of the portrait card. (When testimonials were visible, the blockquote provided this breathing room — now that they're hidden, we need explicit top margin.) */ margin-top: 20px; padding: 0 8px 8px; transition: color 450ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)); } .ix-face-marquee--standalone .ix-face-card.is-active .ix-face-name { color: var(--color-champagne, #ECC777); } @media (prefers-reduced-motion: reduce) { .ix-face-marquee--standalone .ix-face-track { animation: none; } .ix-face-marquee--standalone .ix-face-card { transform: none; } .ix-face-marquee--standalone .ix-face-stage { filter: none; } } @media (max-width: 900px) { .ix-face-marquee--standalone { margin-top: 0; padding: 40px 0 32px; } .ix-face-marquee--standalone .ix-face-track { gap: 16px; padding: 40px 0 32px; animation-duration: 48s; } .ix-face-marquee--standalone .ix-face-card { width: clamp(170px, 48vw, 220px); } }