/*
* Video hero section (kept from the homepage redesign work - everything
* else from that redesign was reverted, see git history / conversation for
* context). Scoped under .elara-landing so these rules never leak into the
* rest of the site's existing main.css/gs-home.css styles - this is a
* plain page-scoped stylesheet (see income-expense-owner.css for the
* fuller "no active Vite/Mix build in this project" rationale, same
* reasoning applies here).
*
* One exception, deliberately unscoped: .gs-nav--transparent below. It
* modifies the shared site-wide nav (layouts/website/header.blade.php),
* additively - the class is only ever applied on the home route (see the
* $isHomeRoute check already in that file), so every other page's nav is
* completely unaffected. Kept intentionally: the transparent floating nav
* over the hero video is staying, per explicit instruction, even though
* the rest of the redesign was reverted.
*/
.elara-landing{
/* Brand rebrand: charcoal/gold swapped for Deep Lagoon/Sand Gold. Gold
stays text/border-only (eyebrow, italic emphasis, thin --line divider)
per the "never a fill" rule - nothing here was a gold fill to begin
with, so only the hex values change, not which properties use gold. */
--charcoal-0:#122822;
--charcoal-1:#1B3A33;
--charcoal-2:#24493F;
--ivory:#F5F1E7;
--ivory-dim:#E8E2D2;
--gold:#C9A063;
--gold-bright:#D9BA8A;
--gold-dim:#A17D45;
--line:rgba(201,160,99,0.28);
--text-on-charcoal:#EDE7D8;
--text-on-charcoal-dim:#B8B0A0;
--text-on-ivory:#1B3A33;
--text-on-ivory-dim:#5C574C;
font-family:'Inter', sans-serif;
background:var(--charcoal-1);
color:var(--text-on-charcoal);
-webkit-font-smoothing:antialiased;
}
.elara-landing, .elara-landing *, .elara-landing *::before, .elara-landing *::after{
box-sizing:border-box;
}
.elara-landing .serif{ font-family:'Fraunces', serif; font-optical-sizing:auto; }
.elara-landing .eyebrow{
font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
color:var(--gold); font-weight:500;
}
.elara-landing a{ color:inherit; text-decoration:none; }
.elara-landing img{ display:block; width:100%; height:100%; object-fit:cover; }
/* ---- NAV TRANSPARENCY OVER HERO (home route only, see comment above) ----
Selectors are prefixed with the "nav" element (not just the classes) to
outrank main.css's plain .gs-nav{background:#fff; position:sticky;}
rule - both are otherwise equal specificity, and main.css loads *after*
this stylesheet (header.blade.php's @stack('links') renders before its
own @include('partials.headerFiles')), so without the extra element
selector main.css's background/position silently won regardless of
which one appeared "correct" in the markup - exactly the bug that made
the nav render as a solid white sticky bar instead of floating
transparent over the hero. Not fixed by reordering header.blade.php's
itself, since that's shared site-wide and would affect every
other page's cascade, not just this one. */
nav.gs-nav.gs-nav--transparent{
position:absolute; top:0; left:0; right:0; z-index:20;
background:linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.0) 100%);
border-bottom-color:transparent;
box-shadow:none;
}
.gs-nav--transparent .gs-nav__wordmark{ color:var(--ivory,#F5F1E7); }
.gs-nav--transparent .gs-nav__owners-link{ color:var(--ivory-dim,#E8E2D2); }
.gs-nav--transparent .gs-nav__owners-link:hover{ background:rgba(245,241,231,0.1); color:#fff; }
.gs-nav--transparent .gs-nav__toggler{ filter:invert(1) brightness(1.6); }
/* Once scrolled (existing .gs-nav--scrolled toggle from header.blade.php's
own scroll JS), fall back to the normal solid/sticky nav - transparency
only makes sense while the video is actually behind it. */
nav.gs-nav.gs-nav--transparent.gs-nav--scrolled{
position:sticky; background:#fff;
box-shadow:0 2px 8px rgba(27,58,51,0.06);
}
.gs-nav--transparent.gs-nav--scrolled .gs-nav__wordmark{ color:#1B3A33; }
.gs-nav--transparent.gs-nav--scrolled .gs-nav__owners-link{ color:#1B3A33; }
.gs-nav--transparent.gs-nav--scrolled .gs-nav__toggler{ filter:none; }
/* ---- HERO ----
Height gives up a small strip (--search-overlap) so the .gs-search card
below can pull up into it as a peeking overlap, rather than a full
1-viewport-tall containment - see the card rule further down. */
.elara-landing{
--search-overlap: 55px;
}
.elara-landing .hero{
position:relative; height:calc(100vh - var(--search-overlap)); min-height:560px; display:flex; align-items:flex-end;
overflow:hidden; margin-top:-1px; /* butt up against nav with no seam */
}
.elara-landing .hero-photo{ position:absolute; inset:0; }
.elara-landing .hero-photo video{ width:100%; height:100%; object-fit:cover; display:block; }
.elara-landing .hero-photo img, .elara-landing .hero-photo video{
filter:grayscale(12%) brightness(0.78) contrast(1.08) saturate(1.05);
}
.elara-landing .hero-photo::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,9,8,0.32) 0%, rgba(10,9,8,0.05) 22%, rgba(14,13,11,0.35) 60%, rgba(14,13,11,0.94) 100%);
}
.elara-landing .hero-watermark{
position:absolute; top:96px; right:6vw; width:110px; opacity:0.6; z-index:2;
}
.elara-landing .hero-content{ position:relative; z-index:2; padding:0 6vw 72px; width:100%; }
.elara-landing .scroll-cue{
position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
display:flex; flex-direction:column; align-items:center; gap:8px;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory-dim);
opacity:0.75;
}
.elara-landing .scroll-cue .line{
width:1px; height:34px; background:linear-gradient(180deg, var(--gold-bright), transparent);
animation:elaraScrollpulse 2s ease-in-out infinite;
}
@keyframes elaraScrollpulse{ 0%,100%{ opacity:0.4; } 50%{ opacity:1; } }
.elara-landing h1.hero-headline{
font-size:clamp(34px, 5.4vw, 74px); font-weight:400; line-height:1.06;
max-width:820px; color:var(--ivory);
}
.elara-landing h1.hero-headline em{ font-style:italic; color:var(--gold-bright); font-weight:300; }
/* ---- SEARCH BAR, PULLED UP AS A FLOATING CARD OVER THE HERO ----
.gs-search itself (navy background, tabs, gold Search button) is the
real gs-home.css component, untouched in substance - this only
repositions/resizes it via the adjacent-sibling combinator so it's
scoped to exactly this page structure (hero immediately followed by the
search section) and loads after gs-home.css, so it safely overrides
gs-home.css's defaults without needing !important.
Margin is deliberately written as four longhand properties, not the
`margin: auto 0` shorthand - that shorthand silently failed to
center the card (computed margin-left/margin-right both came back 0px
in a live browser check, even though nothing else was overriding it and
the shorthand parsed as valid CSS) - mixing a var()-based calc() with
the auto keyword in the same margin shorthand is the one part of this
that didn't behave as spec'd. Longhand sidesteps it entirely. */
.elara-landing + .gs-search{
position:relative;
z-index:15;
max-width:1080px;
margin-top:calc(-1 * var(--search-overlap));
margin-bottom:0;
margin-left:auto;
margin-right:auto;
border-radius:16px;
box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.elara-landing + .gs-search .gs-search__inner{
padding:26px 40px 30px;
}
.elara-landing + .gs-search .gs-search__tabs{
margin-bottom:26px;
}
.elara-landing + .gs-search .gs-search__field{
min-height:42px;
padding:14px 20px;
}
/* WHERE (the first field) reads as the primary input - wider than the
other three, which stay equal to each other. */
.elara-landing + .gs-search .gs-search__fields > .gs-search__field:first-child{
flex:1.4;
}
/* ---- REDUCED MOTION: pause the hero video, its poster frame already
shows underneath (no info is conveyed only by the moving video - the
headline carries everything) ---- */
@media (prefers-reduced-motion: reduce){
.elara-landing .scroll-cue .line{ animation:none; }
}
/* ---- RESPONSIVE: 1440 default above, tablet ~768, phone ~375 ----
max-width stays 1080px throughout (it's simply never the binding
constraint below ~1160px wide, since these fixed side margins produce a
narrower width first) - the card expands to fill the viewport minus a
consistent margin, never shrinking into a small centered box. */
@media (max-width: 900px){
.elara-landing{ --search-overlap:50px; }
.elara-landing + .gs-search{ margin-left:20px; margin-right:20px; }
}
@media (max-width: 480px){
.elara-landing{ --search-overlap:45px; }
.elara-landing .hero{ min-height:560px; }
.elara-landing .hero-watermark{ display:none; }
.elara-landing + .gs-search{ margin-left:16px; margin-right:16px; border-radius:14px; }
.elara-landing + .gs-search .gs-search__inner{ padding:22px 20px 26px; }
}