/* ============================================================================ eVamb Cinematic — evamb.com HOME page styles Page-local layout on top of tokens.css + base.css + components.css. Loads LAST. Mobile <680 / tablet 680–1023 / desktop ≥1024 responsive. ========================================================================== */ /* ---- Top nav (V-mark + wordmark constant top-left) -------------------- */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--container-pad); background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-bottom: 1px solid var(--hairline-on-ink); color: var(--text-on-ink); transition: background var(--dur-3) var(--ease-brand); } .brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-2); } .brand-lockup svg { height: 26px; width: auto; } .brand-wordmark { font-family: var(--font-display); font-weight: 600; /* +~19% over the 1.35rem default so the lockup reads larger in the header */ font-size: 1.6rem; letter-spacing: -0.02em; color: var(--text-on-ink); line-height: 1; } .brand-wordmark .v-node { /* the one fixed warm accent */ color: var(--copper); } .nav-links { display: none; gap: var(--sp-5); align-items: center; } .nav-links a { font-size: var(--fs-body-sm); color: var(--text-on-ink-muted); } .nav-links a:hover { color: var(--text-on-ink); } /* Product tabs (neekOS · Connext) read products-first with a quiet copper tint */ .nav-links a.nav-product { color: var(--copper); font-weight: 600; } .nav-links a.nav-product:hover { color: #E8A23C; } .nav-actions { display: inline-flex; align-items: center; gap: var(--sp-3); } .nav-cross { display: none; font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--copper); } .nav-toggle { display: inline-flex; color: var(--text-on-ink); padding: var(--sp-2); } .nav-toggle svg { width: 24px; height: 24px; } @media (min-width: 1024px) { .nav-links { display: inline-flex; } .nav-cross { display: inline-flex; } .nav-toggle { display: none; } } /* Mobile menu (CSS-only disclosure via :target / details fallback handled in markup as a

) */ .nav-mobile { display: none; } @media (max-width: 1023px) { .nav-mobile[open] { position: fixed; inset: 56px 0 auto 0; z-index: calc(var(--z-nav) - 1); display: block; background: var(--ink); border-bottom: 1px solid var(--hairline-on-ink); padding: var(--sp-4) var(--container-pad) var(--sp-5); } .nav-mobile[open] .nav-mobile__list { display: grid; gap: var(--sp-3); } .nav-mobile[open] a { color: var(--text-on-ink); font-size: var(--fs-h6); font-family: var(--font-display); } } /* ---- Heading colour fix for the ground-paper HOME body ---------------- base.css themes body text / leads / eyebrows through the inherited --c-text / --c-muted / --c-eyebrow custom props, so the NEAREST ground always wins. Headings, however, are coloured by explicit ground-prefixed selectors in base.css (.ground-ink h1… vs .ground-paper h1…) at equal (0,1,1) specificity. On THIS page wraps the ink hero + ink sections, so BOTH heading rules match every heading and source order (the cream/paper rule is written last) wins — painting the ink-ground headlines dark-on-dark. base.css is shared/locked, so we correct it HERE, com-side, by routing home-page headings through the same nearest-ground variable the rest of the type already uses. Scoped to body.ground-paper (home only) at (0,2,0) so it cleanly beats base's (0,1,1) without re-introducing a ground-vs- ground source-order conflict (a single var, resolved by the nearest ground, can never disagree with itself). */ body.ground-paper :is(h1, h2, h3, h4, h5, h6) { color: var(--c-text); } /* ---- HERO (Scene A behind 4-layer cinema composite) ------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: clamp(96px, 14vh, 180px); padding-bottom: var(--sp-8); } /* layer 1: WebGL stage (canvas + graded still injected by sceneA) */ .evamb-stage { position: absolute; inset: 0; z-index: 0; } .evamb-stage__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-4) var(--ease-brand); } .evamb-stage[data-webgl="live"] .evamb-stage__still { opacity: 0; } /* layer 2: gradient + grain atmosphere over the stage, under the type. The Scene A globe sits in the RIGHT / lower portion of the frame, so this layer keeps a warm glow up-right (where the globe lives) while pinning a strong INK scrim down the LEFT so the cream hero headline holds >=4.5:1 contrast over the animation. The left scrim is the load-bearing layer for legibility — do not weaken it without re-checking contrast over the globe. */ .hero__atmos { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* warm glow up-right, where the globe sits (kept subtle, away from type) */ radial-gradient(120% 90% at 82% 22%, rgba(201,120,60,.18), transparent 52%), /* LEFT ink scrim: opaque under the headline column, fading out to the right so the globe stays visible. This is what guarantees headline contrast. */ linear-gradient(90deg, rgba(10,13,20,.86) 0%, rgba(10,13,20,.72) 26%, rgba(10,13,20,.34) 52%, rgba(10,13,20,0) 78%), /* cool floor lift, bottom-left (atmosphere, under the scrim visually) */ radial-gradient(90% 80% at 12% 92%, rgba(16,58,92,.34), transparent 60%), /* top-to-bottom ink so the nav + scroll cue regions stay grounded */ linear-gradient(180deg, rgba(10,13,20,.34) 0%, rgba(10,13,20,.12) 38%, rgba(10,13,20,.72) 100%); } /* Static grain: a single subtle paint, no mix-blend-mode. The overlay blend mode forced the browser to re-composite this whole layer against the live WebGL stage beneath it every frame; dropping it makes the grain a cheap, one-time static paint (opacity lowered so it stays subtle without the blend). */ .hero__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,"); } /* layer 3: editorial type */ /* width sized to the DISPLAY title (ch is too small vs the 112px headline) */ .hero__inner { position: relative; z-index: 2; max-width: min(92vw, 44rem); } .hero__inner.measure-hero { max-width: min(92vw, 56rem); } .hero__eyebrow { color: var(--copper); margin-bottom: var(--sp-4); } .hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); margin-bottom: var(--sp-5); } .hero__sub { max-width: 54ch; color: var(--text-on-ink-muted); font-size: var(--fs-body-lg); margin-bottom: var(--sp-6); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* Primary CTA = solid copper with readable text, matching evamb.io. (Shared components.css already sets copper; restated here with a darker copper hover so every primary button on .com is visually identical to io.) */ .btn-primary { --btn-bg: var(--copper); --btn-fg: #fff; background: var(--copper); color: #fff; } .btn-primary:hover { --btn-bg: #B0662F; background: #B0662F; } /* scroll cue */ .hero__cue { position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-2); /* --muted (8.86:1) not --faint (3.43:1): the "Scroll" label is 12px text sitting over the hero scene at the bottom, so it needs AA 4.5:1. */ color: var(--text-on-ink-muted); } .hero__cue .bar { width: 1px; height: 40px; background: linear-gradient(var(--copper), transparent); } @media (prefers-reduced-motion: no-preference) { .hero__cue .bar { animation: cue 2.4s var(--ease-brand) infinite; transform-origin: top; } } @keyframes cue { 0%,100%{ transform: scaleY(.4); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } } /* Keep the centered hero copy clear of the scroll cue band (cue lives at bottom:32px + ~62px of bar/label). Reserve space below the content. */ .hero__inner { margin-bottom: var(--sp-7); } /* On short viewports the centered title can grow toward the cue — hide the cue rather than risk an overlap. Tall enough to need a cue ⇒ it shows. */ @media (max-height: 600px) { .hero__cue { display: none; } } /* ---- Section heading block (shared rhythm) ---------------------------- */ .section-head { max-width: 64ch; margin-bottom: var(--sp-7); } .section-head .eyebrow { margin-bottom: var(--sp-3); } .section-head h2 { margin-bottom: var(--sp-4); } /* ---- THESIS (cream, flowing editorial prose) -------------------------- */ .thesis-prose { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); max-width: 60ch; } .thesis-prose p { font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-snug); color: var(--text-on-cream); } .thesis-prose p + p { color: var(--text-on-cream-muted); } /* ---- THE LAB (ink, pinned hand-off) ----------------------------------- */ .lab { position: relative; } .lab__inner { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-8); } .lab__line { font-size: var(--fs-h3); font-family: var(--font-display); max-width: 24ch; } .lab__line + .lab__line { margin-top: var(--sp-4); color: var(--text-on-ink-muted); } .lab__handoff { margin-top: var(--sp-7); display: inline-flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; } .lab__handoff-note { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--copper); } /* ---- PRODUCT UNIVERSE (cream, constellation) -------------------------- */ .constellation-wrap { position: relative; margin-top: var(--sp-6); } .constellation { display: block; width: 100%; height: auto; max-width: 980px; margin-inline: auto; overflow: visible; } .constellation .link-line { stroke: var(--copper); stroke-width: 1; opacity: 0.25; transition: opacity var(--dur-3) var(--ease-brand); } .constellation .node-ring { fill: none; stroke: var(--hairline-on-cream); stroke-width: 1; } .constellation .node-dot { fill: var(--surface-cream-raise); stroke: var(--copper-on-cream); stroke-width: 1.5; } .constellation [data-node="core"] .node-dot { fill: url(#coreGrad); stroke: none; } .constellation .node-label { font-family: var(--font-body); font-weight: 600; font-size: 14px; fill: var(--text-on-cream); } .constellation .node-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--text-on-cream-muted); } .constellation [data-node] a { cursor: pointer; outline: none; } .constellation [data-node] a:focus-visible .node-dot { stroke: var(--azure); stroke-width: 3; } .constellation [data-node].is-active .node-dot { stroke-width: 3; } .constellation [data-node].is-active .link-line { opacity: 0.6; } .constellation [data-node].is-active { filter: drop-shadow(0 6px 18px rgba(201,120,60,.28)); } /* prose fallback for small screens (the interactive SVG stays for ≥680) */ .constellation-prose { margin-top: var(--sp-6); max-width: 60ch; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-on-cream); } .constellation-prose .link { font-weight: 600; } @media (min-width: 680px) { .constellation-prose { display: none; } } @media (max-width: 679px) { .constellation { display: none; } } /* ---- PROOF (ink, scroll-counted metrics) ------------------------------ */ .metrics { display: grid; gap: var(--grid-gap); margin-top: var(--sp-6); } @media (min-width: 680px) { .metrics { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .metrics { grid-template-columns: repeat(4, 1fr); } } .metric { padding-top: var(--sp-4); border-top: 1px solid var(--hairline-on-ink); } .metric__value { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1; color: var(--text-on-ink); display: flex; align-items: baseline; gap: 0.15em; } .metric__unit { font-family: var(--font-body); font-size: var(--fs-body); color: var(--copper); font-weight: 600; } .metric__label { margin-top: var(--sp-3); color: var(--text-on-ink-muted); font-size: var(--fs-body-sm); } .metric .stage-label { margin-top: var(--sp-3); } .proof-note { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em; color: var(--text-on-ink-muted); max-width: 70ch; } /* ---- LEADERSHIP (cream, editorial monograms) -------------------------- */ .monograms { display: grid; gap: var(--grid-gap); margin-top: var(--sp-6); } @media (min-width: 680px) { .monograms { grid-template-columns: repeat(3, 1fr); } } .monogram { text-align: left; } .monogram__mark { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--copper-on-cream); border: 1px solid var(--hairline-on-cream); background: radial-gradient(120% 120% at 30% 25%, var(--surface-cream-raise), var(--cream)); margin-bottom: var(--sp-4); } .monogram__mark[data-accent] { background: var(--grad-gold-soft); } .monogram__role { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--copper-on-cream); } .monogram__name { font-family: var(--font-display); font-size: var(--fs-h5); margin: var(--sp-1) 0 var(--sp-2); } /* ---- CTA + FOOTER (ink) ----------------------------------------------- */ .closing { text-align: center; } .closing .hero__ctas { justify-content: center; } .closing h2 { max-width: 18ch; margin-inline: auto; } .closing .lead { max-width: 48ch; margin: var(--sp-4) auto var(--sp-6); } .site-footer { background: var(--ink); color: var(--text-on-ink-muted); border-top: 1px solid var(--hairline-on-ink); } .footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-block: var(--sp-7) var(--sp-5); } @media (min-width: 680px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } /* Footer wordmark reads larger than the header and stays vertically centred (V glyph on the text baseline via inline-flex + align-items:center). */ .footer-brand .brand-wordmark { font-size: 1.9rem; display: inline-flex; align-items: center; } .footer-brand p { margin-top: var(--sp-3); max-width: 32ch; font-size: var(--fs-body-sm); } /* Footer column headers are quiet mono LABELS, not display headings. Scope with .site-footer (specificity 0,2,1) so this beats the home heading-colour fix above (0,1,2) and keeps them a dimmed --muted (8.86:1, AA) rather than either full cream (too loud for a label) or --faint (3.43:1, fails AA). */ .site-footer .footer-col h3 { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-on-ink-muted); margin-bottom: var(--sp-3); } .footer-col ul { display: grid; gap: var(--sp-2); } .footer-col a { color: var(--text-on-ink-muted); font-size: var(--fs-body-sm); } .footer-col a:hover { color: var(--text-on-ink); } .footer-bottom { border-top: 1px solid var(--hairline-on-ink); padding-block: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; } /* --muted (#B9AE99, 8.86:1) not --faint (#6E6657, 3.43:1) — these footer lines are SMALL text (12–14px), so they need AA 4.5:1, which the "faint" HUD token (AA-large only) fails. The standard footer must stay readable. */ .footer-bottom p { font-size: var(--fs-body-sm); color: var(--text-on-ink-muted); } .footer-bottom .footer-powered { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.04em; } .footer-powered a { color: var(--copper); } /* ---- Consent layer ---------------------------------------------------- */ .consent { position: fixed; z-index: var(--z-overlay); left: var(--container-pad); right: var(--container-pad); bottom: var(--sp-4); max-width: 560px; background: var(--surface-ink-raise); color: var(--text-on-ink); border: 1px solid var(--hairline-on-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-card-ink); padding: var(--sp-5); } @media (min-width: 680px) { .consent { left: auto; right: var(--sp-5); width: 480px; } } .consent h2 { font-size: var(--fs-h5); color: var(--text-on-ink); margin-bottom: var(--sp-2); } .consent p { font-size: var(--fs-body-sm); color: var(--text-on-ink-muted); } .consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .consent__actions .btn { padding: 11px 20px; font-size: var(--fs-body-sm); } .consent__panel { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline-on-ink); display: grid; gap: var(--sp-3); } /* Guard the [hidden] attribute against display:grid/flex override (memory: Electron gotcha) */ [hidden] { display: none !important; } .consent__cat { display: flex; gap: var(--sp-3); align-items: flex-start; } .consent__cat label { font-weight: 600; font-size: var(--fs-body-sm); } .consent__cat p { margin-top: 2px; } .consent__cat input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--copper); margin-top: 2px; } .consent__cat input[disabled] { opacity: 0.6; } .consent a.link { color: var(--copper); } /* Manage button reads as a quiet ghost so Accept/Reject stay at parity. */ .consent .btn-quiet { background: transparent; color: var(--text-on-ink-muted); border: 1px solid var(--hairline-on-ink); } .consent .btn-quiet:hover { box-shadow: none; color: var(--text-on-ink); } /* ---- prefers-reduced-motion local resets ----------------------------- */ @media (prefers-reduced-motion: reduce) { .hero__cue .bar { animation: none; } } /* com home mobile nav: populate the hamburger disclosure (was empty) */ .nav-toggle-wrap { position: relative; } .nav-toggle-panel { display: none; } .nav-toggle-wrap[open] .nav-toggle-panel { display: flex; flex-direction: column; gap: var(--sp-3); position: absolute; right: 0; top: calc(100% + var(--sp-2)); background: var(--ink); border: 1px solid var(--hairline-on-ink); border-radius: 16px; padding: var(--sp-4); min-width: 220px; z-index: 200; box-shadow: 0 12px 40px rgba(0,0,0,.45); } .nav-toggle-panel .link { color: var(--text-on-ink); padding: var(--sp-1) 0; min-height: 44px; display: flex; align-items: center; } .nav-toggle-panel .link.nav-product { color: var(--copper); font-weight: 600; } .nav-toggle-panel .btn { margin-top: var(--sp-2); } /* The global .nav-cross is display:none until >=1024px (where the desktop nav shows it inline). Inside the hamburger panel — which only ever shows BELOW 1024px — that rule would hide the "Explore eVamb Labs" cross-link entirely, so re-show it here. */ .nav-toggle-panel .nav-cross { display: inline-flex; align-items: center; padding: var(--sp-1) 0; } @media (min-width: 1024px) { .nav-toggle-wrap { display: none; } }