/* * EventFlow Labs — Home presentation layer. * * Scoped to the canonical English and Spanish home routes. * Extracted from components.css without behavioral modification. */ /* ========================================================== EFDS PLATFORM BRAND MARQUEE Home-specific motion primitive. Everything else on Home remains owned by existing EFDS components. ========================================================== */ .ef-brand-marquee { width: 100%; overflow: hidden; margin-top: var(--ef-space-5); } .ef-brand-marquee__track { display: flex; align-items: center; width: max-content; animation: ef-brand-marquee-scroll 58s linear infinite; } .ef-brand-marquee__set { display: flex; align-items: center; gap: clamp( var(--ef-space-6), 5vw, var(--ef-space-10) ); padding-right: clamp( var(--ef-space-6), 5vw, var(--ef-space-10) ); } .ef-brand-marquee__item { display: block; width: clamp(8rem, 12vw, 12rem); height: clamp(4.5rem, 7vw, 6.5rem); object-fit: contain; filter: grayscale(1) brightness(2.8); opacity: 0.38; transition: opacity var(--ef-duration-base) var(--ef-ease-standard), filter var(--ef-duration-base) var(--ef-ease-standard); } .ef-brand-marquee__item:hover { filter: grayscale(0); opacity: 0.95; } .ef-brand-marquee:hover .ef-brand-marquee__track { animation-play-state: paused; } @keyframes ef-brand-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { /* * The global EFDS reduced-motion policy intentionally collapses * animations to a single near-zero-duration iteration. * * The brand marquee is a continuous informational rail rather than * an entrance, reveal or attention animation. Preserve substantially * reduced continuous movement while keeping the global policy intact. */ .ef-brand-marquee__track { animation-name: ef-brand-marquee-scroll !important; animation-duration: 180s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; } .ef-brand-marquee__item { transition: none !important; } } /* ========================================================== HOME — GUTENBERG INNER-CONTAINER GRID BRIDGE Gutenberg inserts: .ef-card-grid > .wp-block-group__inner-container.is-layout-flow > .ef-card The inner container is therefore the actual collection owner and must receive EFDS grid geometry. ========================================================== */ /* ---------------------------------------------------------- Outer EFDS collection ---------------------------------------------------------- */ body.home .ef-card-grid { display: block !important; width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; } /* ---------------------------------------------------------- Gutenberg wrapper becomes the real grid container ---------------------------------------------------------- */ body.home .ef-card-grid > .wp-block-group__inner-container { display: grid !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: var(--ef-space-5) !important; } /* ---------------------------------------------------------- Three-column collections Engineering / Technology / Docs ---------------------------------------------------------- */ body.home .ef-card-grid.ef-grid--three > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* ---------------------------------------------------------- Two-column collections Platforms ---------------------------------------------------------- */ body.home .ef-card-grid.ef-grid--two > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ---------------------------------------------------------- Cards now belong directly to the real grid ---------------------------------------------------------- */ body.home .ef-card-grid > .wp-block-group__inner-container > .ef-card { box-sizing: border-box !important; min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* * Gutenberg constrained layout remains allowed INSIDE * each card. It should control card content, not card * collection geometry. */ body.home .ef-card-grid > .wp-block-group__inner-container > .ef-card > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; } /* ---------------------------------------------------------- Metrics Gutenberg Columns has direct children, so no extra inner-container bridge is required here. ---------------------------------------------------------- */ body.home .ef-metrics.wp-block-columns { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; gap: 0 !important; } body.home .ef-metrics > .wp-block-column { min-width: 0 !important; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; } body.home .ef-metrics .ef-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; } /* ---------------------------------------------------------- FE / FE PRO visual pair This grid also receives a Gutenberg inner container. ---------------------------------------------------------- */ body.home .ef-spotlight__visual > .ef-grid.ef-grid--two { display: block !important; width: 100% !important; max-width: none !important; } body.home .ef-spotlight__visual > .ef-grid.ef-grid--two > .wp-block-group__inner-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--ef-space-4) !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.home .ef-spotlight__visual > .ef-grid.ef-grid--two > .wp-block-group__inner-container > * { min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body.home .ef-spotlight__visual > .ef-grid.ef-grid--two img { display: block; width: 100% !important; height: auto !important; max-width: none !important; margin: 0 !important; object-fit: contain; } /* ---------------------------------------------------------- Marquee remains full viewport ---------------------------------------------------------- */ body.home .ef-brand-marquee { position: relative; left: 50%; width: 100vw !important; max-width: none !important; margin-left: -50vw !important; margin-right: 0 !important; overflow: hidden; } body.home { overflow-x: clip; } /* ---------------------------------------------------------- Responsive ---------------------------------------------------------- */ @media (max-width: 64rem) { body.home .ef-card-grid.ef-grid--three > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.home .ef-card-grid.ef-grid--two > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.home .ef-metrics.wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 40rem) { body.home .ef-card-grid.ef-grid--three > .wp-block-group__inner-container, body.home .ef-card-grid.ef-grid--two > .wp-block-group__inner-container { grid-template-columns: 1fr !important; } body.home .ef-spotlight__visual > .ef-grid.ef-grid--two > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================== HOME — CENTERED INSTITUTIONAL CONTENT AXIS Gutenberg adds an inner-container to each section. Home editorial elements must share the same centered institutional axis as EFDS card collections. ========================================================== */ /* * Give the Gutenberg section wrapper the complete available * width. It remains only a structural wrapper. */ body.home .ef-section > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; } /* * Section headers use the same centered institutional width * as the card collections below them. */ body.home .ef-section > .wp-block-group__inner-container > .ef-section-header { width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; } /* * Gutenberg adds another wrapper inside section-header. * It must use the complete width of the centered component. */ body.home .ef-section-header > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } /* * Links immediately following a collection belong to the * same institutional axis instead of the page edge. */ body.home .ef-section > .wp-block-group__inner-container > p { width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; } /* * Collections already have correct geometry after the * inner-container Grid bridge. Keep their outer boxes on * exactly the same horizontal axis. */ body.home .ef-section > .wp-block-group__inner-container > .ef-card-grid { width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; } /* * Metrics share that axis as well. */ body.home .ef-section > .wp-block-group__inner-container > .ef-metrics { width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; } /* * Do not alter alignment inside Newsletter or Spotlight. * Their own EFDS components remain authoritative. */ /* ========================================================== HOME — TRUE FULL WIDTH SECTION HEADER The section itself was already centered correctly. This removes the remaining editorial width constraint from the title/lead wrapper inside Gutenberg. ========================================================== */ /* Complete section-header width */ body.home .ef-section > .wp-block-group__inner-container > .ef-section-header { display: block !important; width: min( calc(100% - (var(--ef-page-gutter) * 2)), var(--ef-container-xl) ) !important; max-width: var(--ef-container-xl) !important; max-inline-size: var(--ef-container-xl) !important; margin-left: auto !important; margin-right: auto !important; } /* Gutenberg wrapper must not reintroduce content-size */ body.home .ef-section-header > .wp-block-group__inner-container { display: block !important; width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; margin: 0 !important; padding: 0 !important; } /* Kicker spans the same institutional axis */ body.home .ef-section-header__meta { display: block !important; width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; margin: 0 0 var(--ef-space-4) 0 !important; } /* * THIS is the wrapper that was still narrow. * Remove every inherited editorial width restriction. */ body.home .ef-section-header > .wp-block-group__inner-container > div:last-child { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: none !important; max-inline-size: none !important; flex: none !important; margin: 0 !important; justify-self: stretch !important; } /* Main title uses the complete available width */ body.home .ef-section-header__title { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; margin: 0 0 var(--ef-space-4) 0 !important; font-size: clamp( 2.75rem, 4vw, 4.6rem ) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; text-wrap: balance; } /* Description stays below, readable but no longer narrow */ body.home .ef-section-header__lead { display: block !important; width: 100% !important; inline-size: 100% !important; max-width: 64rem !important; max-inline-size: 64rem !important; margin: 0 !important; line-height: 1.65; } /* Space before cards */ body.home .ef-section-header { margin-bottom: clamp( var(--ef-space-6), 4vw, var(--ef-space-8) ) !important; } @media (max-width: 64rem) { body.home .ef-section-header__title { max-width: 100% !important; max-inline-size: 100% !important; } } @media (max-width: 40rem) { body.home .ef-section-header__title { font-size: clamp( 2.25rem, 11vw, 3.25rem ) !important; line-height: 1 !important; } body.home .ef-section-header__lead { max-width: 100% !important; max-inline-size: 100% !important; } } /* ========================================================== HOME — PLATFORM SPOTLIGHT VISUAL POLISH Existing EFDS Spotlight remains layout owner. ========================================================== */ /* * Make Spotlight read as a featured institutional block. */ body.home .ef-spotlight { border-color: var(--ef-border-accent); background: radial-gradient( circle at 82% 40%, rgba(45, 210, 255, 0.08), transparent 34% ), var(--ef-surface-1); } /* * Stronger spotlight coordinate. */ body.home .ef-spotlight__index { color: var(--ef-accent) !important; letter-spacing: 0.11em; } body.home .ef-spotlight__eyebrow { color: var(--ef-color-text-muted); } /* * Brand image pair. */ body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure { position: relative; overflow: hidden; border: 1px solid var(--ef-border-subtle); border-radius: var(--ef-radius-lg); background: linear-gradient( 145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01) ); box-shadow: 0 1.25rem 3.5rem rgba(0,0,0,0.22); transition: transform var(--ef-duration-base) var(--ef-ease-standard), border-color var(--ef-duration-base) var(--ef-ease-standard), box-shadow var(--ef-duration-base) var(--ef-ease-standard); } /* * Soft cyan illumination behind the branding. */ body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient( circle, rgba(37, 215, 255, 0.14), transparent 68% ); filter: blur(24px); pointer-events: none; } /* * Keep original branding untouched. */ body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure img { position: relative; z-index: 1; display: block; width: 100% !important; height: auto !important; border-radius: calc(var(--ef-radius-lg) - 2px); transform: scale(0.94); transition: transform var(--ef-duration-base) var(--ef-ease-standard), filter var(--ef-duration-base) var(--ef-ease-standard); } /* * Subtle interaction. */ body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure:hover { transform: translateY(-0.3rem); border-color: var(--ef-border-accent); box-shadow: 0 1.8rem 4.5rem rgba(0,0,0,0.28), 0 0 2rem rgba(37,215,255,0.08); } body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure:hover img { transform: scale(0.98); } /* * Keep the pair visually balanced. */ body.home .ef-spotlight__visual .ef-grid.ef-grid--two { align-items: stretch !important; } body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure { display: flex !important; align-items: center; justify-content: center; min-height: 18rem; } /* * Responsive. */ @media (max-width: 64rem) { body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure { min-height: 15rem; } } @media (max-width: 40rem) { body.home .ef-spotlight__visual .ef-grid.ef-grid--two { grid-template-columns: 1fr !important; } body.home .ef-spotlight__visual .ef-grid.ef-grid--two figure { min-height: auto; } }