/* ================================================================ HOMEPAGE-CORAL.CSS - Homepage-Specific Coral Background Styles Styles specific to the homepage with coral gradient background. General S&S branding and utilities are in base.css. ================================================================ */ /* Coral gradient background for homepage background-transition: none prevents the inherited transition: all from animating the gradient swap when the background video loads. */ body.homepage { background-color: var(--lx-brand); background-image: linear-gradient(135deg, #ff8a90 0%, var(--lx-brand) 100%); min-height: 100vh; position: relative; transition: none; } /* Background video container - hidden by default, enabled by JS */ .homepage .home-media { position: fixed; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 3s ease-in; } /* Show video only on desktop (1024px+) when enabled by JS */ @media (min-width: 1024px) { .homepage .home-media.enabled { opacity: 1; } } /* Video element - very faint, centered and covering */ .homepage .home-media video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; opacity: 0.1; } /* White text for hero content on coral background */ .homepage h1.large, .homepage .hero p { color: #ffffff; } /* Hero subhead — second-meaning of "legible": human + machine audiences */ .homepage .hero .hero-subtitle { margin-top: 0.75rem; font-size: 1.05rem; font-weight: 400; opacity: 0.9; max-width: 36em; margin-left: auto; margin-right: auto; } /* Override S&S hero spacing for our centered layout. padding-top accounts for the fixed 80px header (#753c). */ .homepage .hero--home { padding: 120px 0 60px 0; position: relative; z-index: 2; /* Above features section so dropdown paints on top (#753b) */ } /* Ensure all content sits above the background video */ .homepage .section, .homepage main > .container { position: relative; z-index: 1; } /* ---- Brand morph: h1 scrolls off → "Lex-Ray" appears in header (#753d) ---- The header already contains .header-lexray-text (hidden by default). When the hero h1 leaves the viewport an IntersectionObserver adds .hero-brand-offscreen to , which reveals the header text with a slide-in transition so it feels like it migrated there. Lexray landing page only — the STRIDE homepage shows its wordmark normally. */ body.homepage:not(.stride-page) .header-lexray-text { display: block; width: 81px; opacity: 0; transform: translateX(-8px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } body.homepage.hero-brand-offscreen .header-lexray-text { opacity: 1; transform: translateX(0); pointer-events: auto; } /* ---- Search-focus mode (#753d) ---- */ /* Fade features + scroll cue when the autocomplete dropdown is visible. Toggled by a MutationObserver on the dropdown's display style — covers all show/hide paths without touching autocomplete.js. */ .features-section { transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .features-section.search-active { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(4px); pointer-events: none; } .scroll-cue.search-active { opacity: 0 !important; pointer-events: none; transition: opacity 0.3s ease; } /* Remove all container padding - let grid define the boundaries */ .homepage .hero--home > .container, .homepage .section--full-width > .container--large { padding: 0; transform: none; } /* Add padding directly to inner content elements to align with grid edges */ .homepage .header .content, .homepage .hero--home .content { padding: 0 20px; } .homepage .celex-input-container { padding: 0 20px; max-width: 500px; transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .homepage .celex-input-container:focus-within { max-width: 680px; } /* Grid items on coral background - slight transparency */ .homepage .grid-item-content { background-color: rgba(255, 255, 255, 0.98); } /* CELEX input on coral background */ .homepage .celex-input-container input { background-color: rgba(255, 255, 255, 0.95); border: 2px solid rgba(255, 255, 255, 0.3); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .homepage .celex-input-container input:focus { background-color: #ffffff; border-color: #ffffff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(255, 255, 255, 0.3); padding: 0.75rem 1.25rem; font-size: 1.1rem; } /* Footer on coral homepage */ .homepage .footer-slide { background-color: rgba(17, 17, 17, 0.85); }