/* ========================================================================== LG ECOSYSTEM · PHASE 0 PRODUCTION Ecosystem strip + shared chrome tokens. Scoped component tokens — never bind to Luis global --ink (light text). Reference: docs/lg-ecosystem/ (do not load that CSS in production). ========================================================================== */ .lg-eco, .lg-header { --lg-ink: var(--surface-ink, #0F1111); --lg-paper: var(--surface-canvas, #F7F2E9); --lg-ink-soft: var(--ink-raised, #1A1A1A); --lg-paper-soft: var(--ivory-alt, #EFE8DB); --lg-accent: var(--accent-action, #C96E53); --lg-editorial: var(--font-editorial, "Fraunces", Georgia, serif); --lg-body: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); --lg-structural: var(--font-structural, "Big Shoulders Display", "Big Shoulders", sans-serif); --lg-utility: var(--font-system, "JetBrains Mono", ui-monospace, Menlo, monospace); --lg-strip-h: 30px; --lg-strip-h-sm: 26px; --lg-pad: 40px; --lg-pad-sm: 20px; --lg-shell: 1320px; --lg-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* -------------------------------------------------------------------------- 1 · IDENTITY STRIP — property switcher only (not global nav) Centered: Luis Gilberto | LG Studio Active identity marked with diamond via [aria-current="page"]::before -------------------------------------------------------------------------- */ .lg-eco { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--lg-strip-h); background: var(--lg-ink); color: var(--lg-paper); border-bottom: 1px solid rgba(247, 242, 233, 0.05); } .lg-eco__shell { max-width: var(--lg-shell); height: 100%; margin: 0 auto; padding: 0 var(--lg-pad); display: flex; align-items: center; justify-content: center; } .lg-eco__primary { display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; } .lg-eco__sep { display: inline-flex; align-items: center; margin: 0 0.65rem; font-family: var(--lg-utility); font-size: 9.5px; font-weight: 400; color: rgba(247, 242, 233, 0.28); user-select: none; flex: none; } .lg-eco__node { display: inline-flex; align-items: center; font-family: var(--lg-utility); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: rgba(247, 242, 233, 0.42); transition: color 0.3s var(--lg-ease); } /* Identity labels */ .lg-eco__node--identity { color: rgba(247, 242, 233, 0.78); } .lg-eco__node:hover, .lg-eco__node:focus-visible { color: rgba(247, 242, 233, 0.92); } .lg-eco__node[aria-current="page"] { color: rgba(247, 242, 233, 0.92); } .lg-eco__node[aria-current="page"]::before { content: ""; width: 3px; height: 3px; margin-right: 7px; background: var(--lg-accent); opacity: 0.9; transform: rotate(45deg); flex: none; } :where(.lg-eco a, .lg-eco button):focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 3px; } @media (max-width: 1080px) { .lg-eco { height: var(--lg-strip-h-sm); } .lg-eco__shell { padding: 0 var(--lg-pad-sm); } .lg-eco__node { font-size: 9px; letter-spacing: 0.12em; } .lg-eco__sep { margin: 0 0.5rem; font-size: 9px; } } @media (max-width: 390px) { .lg-eco__node { font-size: 8.5px; letter-spacing: 0.1em; } .lg-eco__sep { margin: 0 0.4rem; } .lg-eco__node[aria-current="page"]::before { margin-right: 5px; } } @media (prefers-reduced-motion: reduce) { .lg-eco__node { transition: none; } } /* -------------------------------------------------------------------------- 2 · HOST OFFSETS Strip is fixed at top. Local headers shift below it. -------------------------------------------------------------------------- */ body.has-ecosystem-nav { --lg-eco-strip-offset: 30px; --lg-luis-header-h: 68px; } @media (max-width: 1080px) { body.has-ecosystem-nav { --lg-eco-strip-offset: 26px; } } /* Luis / Insights / Hub: strip + sovereign local header */ body.has-ecosystem-nav[data-eco-context="luis"], body.has-ecosystem-nav[data-eco-context="insights"], body.has-ecosystem-nav[data-eco-context="hub"] { padding-top: calc(var(--lg-eco-strip-offset) + var(--lg-luis-header-h)) !important; } body.has-ecosystem-nav[data-eco-context="luis"] .site-header, body.has-ecosystem-nav[data-eco-context="insights"] .site-header, body.has-ecosystem-nav[data-eco-context="hub"] .site-header { top: var(--lg-eco-strip-offset) !important; height: var(--lg-luis-header-h) !important; } /* Luis-only: quieter local chrome — editorial, not Studio */ body.has-ecosystem-nav[data-eco-context="luis"] .site-header { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } body.has-ecosystem-nav[data-eco-context="luis"] .nav-container { padding-left: 40px !important; padding-right: 40px !important; } /* Refined Luis compact lockup — optical fit in ~68px dark header */ body.has-ecosystem-nav[data-eco-context="luis"] #snav-logo-desktop { height: 36px !important; width: auto !important; max-height: 40px; display: block; } body.has-ecosystem-nav[data-eco-context="luis"] #snav-logo-mobile { height: 40px !important; width: auto !important; display: block; } body.has-ecosystem-nav[data-eco-context="luis"] .nav-link { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; padding: 6px 12px !important; } /* Studio: strip only from #site-nav; local .nav / .ed-nav owns the brand. Padding here clears the strip only. Studio pages that fix .ed-nav / .nav beneath the strip (homepage + editorial) override padding to include local-nav height via a more specific body.studio-lovable rule or homepage inline CSS. */ body.has-ecosystem-nav[data-eco-context="studio"] { padding-top: var(--lg-eco-strip-offset) !important; } body.has-ecosystem-nav[data-eco-context="studio"] .nav, body.has-ecosystem-nav[data-eco-context="studio"] .ed-nav { top: var(--lg-eco-strip-offset) !important; z-index: 150; } /* Hide sovereign mobile chrome on Studio — Studio has its own drawer */ body.has-ecosystem-nav[data-eco-context="studio"] .mobile-menu-btn, body.has-ecosystem-nav[data-eco-context="studio"] .mobile-drawer, body.has-ecosystem-nav[data-eco-context="studio"] .drawer-overlay { display: none !important; }