/* Video Stories pill + modal. * * Visual parity with the Amplify teaser (modules/business-cards/assets/ * css/fdm-amplify.css) so the two surfaces feel like the same family: * dark editorial gradient, gold accent, coral primary CTA, straight * edges everywhere. All selectors scoped under .fdm-vs. */ .fdm-vs { --fdm-vs-bg: #0e0a05; --fdm-vs-bg-soft: #1a1411; --fdm-vs-surface: #221b15; --fdm-vs-text: #ffffff; --fdm-vs-muted: rgba(255,255,255,0.62); --fdm-vs-faint: rgba(255,255,255,0.18); --fdm-vs-accent: #b8963e; --fdm-vs-accent-2: #d4b870; --fdm-vs-coral: #ed5c2e; --fdm-vs-coral-2: #f07246; --fdm-vs-font: "Raleway", "Inter", system-ui, -apple-system, sans-serif; font-family: var(--fdm-vs-font); color: var(--fdm-vs-text); /* Guard rail against pre-JS layout shift: before the JS portals the * modal node out of this section into , the modal lives in the * document flow. It's hidden via the `hidden` attribute, but the * discovery shortcode rendered inside it brings its own CSS — if * that CSS arrives ahead of ours (or before the JS portal step * happens), the modal's contents can briefly push the page wider * than the viewport. overflow-x:hidden here clips anything inside * this section from causing horizontal page overflow. */ overflow-x: hidden; } .fdm-vs *, .fdm-vs *::before, .fdm-vs *::after { box-sizing: border-box; } /* ── Pill ───────────────────────────────────────────────── */ .fdm-vs__pill { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 32px; padding: 36px 44px; background: radial-gradient(900px 600px at 110% 120%, rgba(184,150,62,0.18), transparent 60%), linear-gradient(135deg, var(--fdm-vs-bg) 0%, #2a1d12 55%, #3b2715 100%); border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; } .fdm-vs__pill::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 180px at 10% 0%, rgba(255,255,255,0.06), transparent 70%), radial-gradient(280px 280px at 90% 90%, rgba(184,150,62,0.10), transparent 70%); pointer-events: none; } .fdm-vs__copy { position: relative; z-index: 1; } .fdm-vs__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--fdm-vs-accent-2); margin-bottom: 14px; } .fdm-vs__brand-mark { display: inline-flex; align-items: center; color: var(--fdm-vs-accent); line-height: 1; } .fdm-vs__brand-mark svg { display: block; } .fdm-vs__brand-faded { color: var(--fdm-vs-muted); font-weight: 500; } .fdm-vs__headline { font-family: var(--fdm-vs-font); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; color: var(--fdm-vs-text); margin: 0 0 16px; } .fdm-vs__desc { font-size: 15px; line-height: 1.6; color: var(--fdm-vs-muted); margin: 0 0 24px; max-width: 62ch; } .fdm-vs__open-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 0; background: var(--fdm-vs-coral); color: #ffffff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease; box-shadow: 0 14px 30px rgba(237,92,46,0.35); } .fdm-vs__open-btn:hover { background: var(--fdm-vs-coral-2); transform: translateY(-1px); box-shadow: 0 18px 38px rgba(237,92,46,0.42); } .fdm-vs__open-btn svg { transition: transform 200ms ease; } .fdm-vs__open-btn:hover svg { transform: translateX(3px); } /* ── Stacked thumbs on the right ────────────────────────── */ .fdm-vs__stack { position: relative; height: 220px; cursor: pointer; } .fdm-vs__thumb { position: absolute; inset: 50% 50% auto auto; width: 220px; height: 220px; margin: -110px -110px 0 0; overflow: hidden; border-radius: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1); background: #000; } .fdm-vs__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .fdm-vs__thumb--blank { background: radial-gradient(160px 160px at 30% 25%, rgba(184,150,62,0.22), transparent 70%), linear-gradient(135deg, var(--fdm-vs-bg-soft) 0%, var(--fdm-vs-surface) 100%); } .fdm-vs__pill:hover .fdm-vs__thumb:nth-child(1) { transform: translateX(-30px) rotate(-9deg); } .fdm-vs__pill:hover .fdm-vs__thumb:nth-child(3) { transform: translateX(30px) rotate(9deg); } /* Play-triangle overlay on each thumb */ .fdm-vs__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.45) 100%); } .fdm-vs__play svg { width: 56px; height: 56px; color: #ffffff; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); opacity: 0.95; } /* ── Fullscreen launcher (bottom-right) ─────────────────── */ .fdm-vs__fs-btn { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; background: rgba(0,0,0,0.45); color: var(--fdm-vs-muted); cursor: pointer; z-index: 2; transition: color 160ms ease, background 160ms ease; } .fdm-vs__fs-btn:hover { color: var(--fdm-vs-text); background: rgba(0,0,0,0.65); } /* ── Mobile ─────────────────────────────────────────────── */ @media (max-width: 760px) { .fdm-vs__pill { grid-template-columns: 1fr; padding: 28px; } .fdm-vs__stack { height: 160px; } .fdm-vs__thumb { width: 160px; height: 160px; margin: -80px -80px 0 0; } .fdm-vs__play svg { width: 42px; height: 42px; } } /* ── Modal ──────────────────────────────────────────────── */ .fdm-vs__modal[hidden] { display: none !important; } .fdm-vs__modal { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: stretch; justify-content: stretch; animation: fdmVsBgIn 280ms ease both; } .fdm-vs__modal-bg { position: absolute; inset: 0; background: rgba(6,4,2,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .fdm-vs__modal-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--fdm-vs-bg); animation: fdmVsInUp 320ms cubic-bezier(0.2,0.8,0.2,1) both; } .fdm-vs__modal-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--fdm-vs-faint); } .fdm-vs__brand--modal { margin: 0; } .fdm-vs__modal-x { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; color: var(--fdm-vs-muted); border: 1px solid var(--fdm-vs-faint); border-radius: 0; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } .fdm-vs__modal-x:hover { color: var(--fdm-vs-text); border-color: var(--fdm-vs-muted); } .fdm-vs__modal-body { flex: 1 1 auto; overflow: auto; padding: 24px 28px 40px; background: var(--fdm-vs-bg); } /* The modal body hosts the rendered [fdm_discovery] output. That * shortcode brings its own styles; we just give it room to breathe. */ @keyframes fdmVsBgIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fdmVsInUp { from { transform: translateY(24px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }