/* Ecological Intelligence, Inc. — Base Styles */ @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap'); /* Header theme system — flip to switch all of: background, link/hover text, border, dropdown bg+hover, hamburger, logo. The four themes are kept in sync with HEADER_THEMES in server.py. */ :root { /* Defaults match `color` theme — sage-on-white DNA-ring lockup */ --nav-bg: rgba(255,255,255,0.95); --nav-text: #6e7355; /* hover — dark sage */ --nav-text-dim: #979f76; /* default link — brand sage */ --nav-border: #979f76; --nav-dropdown-bg: #fff; --nav-dropdown-hover: #f3f1e7; --nav-logo-invert: 0; --nav-hamburger: #6e7355; --black: #000; --white: #fff; --gray-100: #f7f7f7; --gray-200: #e5e5e5; --gray-400: #999; --gray-600: #555; --gray-800: #1a1a1a; --font: 'Oxygen', sans-serif; --max-width: 1100px; --nav-height: 62px; /* 48 px logo + 7 px breathing on each side */ } /* Theme: color — sage on white (life-led, default brand lockup) */ body.theme-color { --nav-bg: rgba(255,255,255,0.95); --nav-text: #6e7355; --nav-text-dim: #979f76; --nav-border: #979f76; --nav-dropdown-bg: #fff; --nav-dropdown-hover: #f3f1e7; --nav-logo-invert: 0; --nav-hamburger: #6e7355; } /* Theme: inverted — sage on forest (life-led, dark ground) */ body.theme-inverted { --nav-bg: rgba(26,30,26,0.95); /* forest #1a1e1a */ --nav-text: #b8bda0; /* light sage hover */ --nav-text-dim: #979f76; /* brand sage */ --nav-border: #6e7355; /* dark sage rule */ --nav-dropdown-bg: #1a1e1a; --nav-dropdown-hover: #232823; --nav-logo-invert: 0; --nav-hamburger: #979f76; } /* Theme: black_white — black ink on white (machine-led, B&W lockup) */ body.theme-black-white { --nav-bg: rgba(255,255,255,0.95); --nav-text: #000; --nav-text-dim: #555; --nav-border: #000; --nav-dropdown-bg: #fff; --nav-dropdown-hover: #f0f0f0; --nav-logo-invert: 0; --nav-hamburger: #000; } /* Theme: white_black — white on black (machine-led, W&B lockup) */ body.theme-white-black { --nav-bg: rgba(0,0,0,0.95); --nav-text: #fff; --nav-text-dim: rgba(255,255,255,0.65); --nav-border: #fff; --nav-dropdown-bg: #000; --nav-dropdown-hover: #1a1a1a; --nav-logo-invert: 0; --nav-hamburger: #fff; } /* Theme: investor — white-ish ground with pure black nav text */ body.theme-investor { --nav-bg: rgba(255,255,255,0.95); --nav-text: #000; --nav-text-dim: #000; --nav-border: #000; --nav-dropdown-bg: #fff; --nav-dropdown-hover: #f0f0f0; --nav-logo-invert: 0; --nav-hamburger: #000; } /* Investor pages drop the cockpit nav entirely — the .investor-bar becomes the single, unified header for those views. Scope by the presence of .investor-bar so the rule never hits the home/main pages (which share the investor theme palette but have no portal bar). */ body:has(.investor-bar) nav, body:has(.investor-bar) .nav-mobile { display: none !important; } /* Lockup embedded into the .investor-bar (left side, before the "Investor Portal" label). Matches the cockpit nav-logo height exactly (32 px) — same brand size, just inverted to white_black so it reads on the black bar. The 40 px bar gives 4 px breathing on each side. Margin pulls the logo 10 px closer to the viewport edge — same "snug to the corner" feel as the cockpit tab. */ .inv-bar-brand { position: relative; /* anchor for .nav-logo-hotspot */ display: inline-flex; align-items: center; line-height: 0; text-decoration: none; margin-left: -10px; } .inv-bar-logo { height: 32px; width: auto; display: block; } /* The hotspot in the investor bar sits over a brand link with zero padding (vs. the cockpit's 19 px left padding), so the icon-only hover trigger starts at the brand's left edge. */ .inv-bar-brand .nav-logo-hotspot { left: 0; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; -webkit-font-smoothing: antialiased; } body { font-family: var(--font); font-weight: 300; color: var(--black); background: var(--white); line-height: 1.7; font-size: 16px; opacity: 0; animation: pageFadeIn 500ms ease 250ms forwards; } body[data-page="home"] { opacity: 1; animation: none; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } a { color: var(--black); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; margin-bottom: 1rem; } h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; } p { margin-bottom: 1rem; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } .section { padding: 5rem 0; } .section--alt { background: var(--gray-100); } /* --- Navigation --- */ /* Cockpit nav: invisible bar — only the two corner panels are rendered. The bar itself is just a positioning context. */ nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: transparent; z-index: 100; display: flex; align-items: center; pointer-events: none; /* let the center top of the screen receive scroll/click */ opacity: 1; transition: opacity 1.5s ease; } /* Frost field default opacity uses an inline CSS variable per instance. `transition: opacity` lets the intro-pending state animate cleanly. */ .ei-frost-field { opacity: var(--frost-target-opacity, 0.92); transition: opacity 1.5s ease; } /* Intro pending: page is waiting for the foreground image (the first hummingbird and flower) to render. All cloudy background elements and every piece of text (cockpit nav, frost layers, the brand overlay) stay invisible. Once intro.js clears the class the whole scene soft-fades into view together. */ body.intro-pending nav, body.intro-pending .ei-frost-field, body.intro-pending #brand-overlay { opacity: 0; } nav.visible { opacity: 1; } nav > * { pointer-events: auto; } nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: none; padding: 0 1.5rem 0 19px; /* 19 px from the viewport edge */ } .nav-brand { position: relative; /* anchor for .nav-logo-hotspot */ font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; display: flex; align-items: center; } /* Cockpit tab + pill styling is opt-in via `body.with-brand-tab`. Pages whose own background already provides contrast (image, dark, gradient) add the class to dress the brand in a coloured tab with a semi-circular right end + drop shadow + entrance animation. White-background pages omit the class — the logo and nav-links sit flat on the page with no overlay. */ body.with-brand-tab .nav-brand { background: var(--tab-bg, #000); height: var(--nav-height); margin-left: -19px; /* extend to the viewport's left edge */ padding: 0 calc(var(--nav-height) / 2 + 4px) 0 19px; border-radius: 0 calc(var(--nav-height) / 2) calc(var(--nav-height) / 2) 0; filter: drop-shadow(2px 0 8px rgba(0, 0, 0, 0.25)); animation: tab-wipe-in 2s cubic-bezier(0.86, 0, 0.07, 1) both; } /* Tab entrance: slides in from off-left in one continuous motion. */ @keyframes tab-wipe-in { 0% { transform: translateX(-110%); } 100% { transform: translateX(0); } } /* Wordmark fades in (with a short rightward drift) after the tab arrives. */ @keyframes nav-logo-fade-in { 0%, 30% { opacity: 0; transform: translateX(-8px); } 100% { opacity: 1; transform: translateX(0); } } /* Cockpit right panel — mirror of the left tab, opt-in via `body.with-brand-tab`. On white-background pages, the nav-links sit flat with no pill, drop shadow, or entrance animation. */ .nav-right { display: flex; align-items: center; gap: 1.5rem; height: var(--nav-height); } body.with-brand-tab .nav-right { background: var(--nav-bg); margin-right: -1.5rem; /* reach the viewport's right edge */ padding: 0 1.5rem 0 calc(var(--nav-height) / 2 + 0.75rem); border-radius: calc(var(--nav-height) / 2) 0 0 calc(var(--nav-height) / 2); filter: drop-shadow(-2px 0 8px rgba(0, 0, 0, 0.18)); animation: nav-right-wipe-in 2s cubic-bezier(0.86, 0, 0.07, 1) both; } @keyframes nav-right-wipe-in { 0% { transform: translateX(110%); } 100% { transform: translateX(0); } } /* Transparent hover-trigger over just the ring portion of the lockup (icon visible range ≈ 0–30px at 32px-tall lockup). Sits above the img so mouseenter fires on the icon, not the wordmark. Click still bubbles to the parent link → navigates home. Defaults to left:0 (no tab padding); the tab-mode rule below shifts it to match the tab's 19 px left padding so it still lines up over the icon. */ .nav-logo-hotspot { position: absolute; top: 0; left: 0; width: 48px; /* matches the icon portion of the 48 px tall lockup */ height: 100%; z-index: 1; } body.with-brand-tab .nav-brand .nav-logo-hotspot { left: 19px; } /* Stroke-region zones inside .nav-brand — invisible spans whose bboxes feed an (optional) FrostField the actual ink regions of the lockup (icon at the left, wordmark text in the mid-vertical band on the right). Geometry derived from the lockup SVG viewBox 1664.218×232 at 48 px display height (scale ≈ 0.207). */ .nav-logo-icon-zone { position: absolute; top: 0; left: 0; width: 48px; height: 48px; pointer-events: none; } .nav-logo-text-zone { position: absolute; top: 10px; left: 48px; width: 300px; height: 25px; pointer-events: none; } .nav-logo { height: 48px; /* 1.5× prior 32 px */ width: auto; display: block; filter: invert(var(--nav-logo-invert)); } body.with-brand-tab .nav-logo { animation: nav-logo-fade-in 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) 1.6s both; } /* Mobile brand subtitle in nav, hidden on desktop */ .nav-brand-sub { display: none; } .nav-links { display: flex; gap: 2rem; list-style: none; font-size: 0.9775rem; /* 1.15× prior 0.85rem */ font-weight: 400; } .nav-links a { color: var(--nav-text-dim); } .nav-links a:hover { color: var(--nav-text); text-decoration: none; } .nav-dropdown { position: relative; } .nav-dropdown-trigger { cursor: pointer; color: var(--nav-text-dim); user-select: none; text-decoration: none; } .nav-dropdown-trigger:hover { color: var(--nav-text); } .nav-dropdown-menu { position: absolute; top: calc(100% + 0.5rem); background: var(--nav-dropdown-bg); padding: 0.5rem 0; min-width: 200px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-radius: 0 0 6px 6px; } .nav-dropdown-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown-menu a { display: block; padding: 0.5rem 1.25rem; font-size: 0.9775rem; color: var(--nav-text-dim); white-space: nowrap; } .nav-dd-center .nav-dropdown-menu { left: 50%; transform: translateX(-50%) translateY(-4px); } .nav-dd-center .nav-dropdown-menu.open { transform: translateX(-50%) translateY(0); } .nav-dd-right .nav-dropdown-menu { right: 0; } .nav-dropdown-menu a { display: block; padding: 0.5rem 1.25rem; font-size: 0.9775rem; color: var(--nav-text-dim); } .nav-dropdown-menu a:hover { background: var(--nav-dropdown-hover); color: var(--nav-text); text-decoration: none; } /* Hamburger */ .nav-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--nav-hamburger); transition: transform 0.3s ease, opacity 0.3s ease; } /* Hamburger X animation when open */ .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav panel */ .nav-mobile { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); padding: 0 2rem 2rem; z-index: 99; flex-direction: column; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.75s ease; } .nav-mobile.open { opacity: 1; pointer-events: auto; } /* Spacer to push content below the nav bar */ .nav-mobile-spacer { height: calc(var(--nav-height) + 2rem); flex-shrink: 0; } .nav-mobile a { display: block; padding: 0.85rem 0; font-size: 1.05rem; font-weight: 400; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); } .nav-mobile a:hover { color: var(--black); text-decoration: none; } .nav-mobile .mobile-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray-400); margin-top: 2rem; margin-bottom: 0.25rem; border: none; padding: 0; } /* Mobile brand block inside mobile nav */ .nav-mobile-brand { margin-top: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-200); } .nav-mobile-brand .mobile-brand-name { font-weight: 700; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; } .nav-mobile-brand .mobile-brand-sub { display: none; } .nav-mobile-brand .mobile-mid { margin-top: 1rem; } .mobile-mid-rule { height: 1px; background: var(--black); opacity: 0.15; } .mobile-mid-label { font-family: 'Oxygen', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; color: var(--black); padding: 0.5rem 0; padding-left: 0.5rem; } .mobile-mid-item { font-family: 'Oxygen', sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.15em; color: var(--black); padding: 0.4rem 0; padding-left: 1rem; display: flex; align-items: center; gap: 0.5rem; } .mobile-mid-icon { width: 28px; height: 28px; object-fit: contain; /* The icon art sits high in its canvas; nudge down so it reads as vertically centered against its label (drone <-> MAPPING aligned). */ position: relative; top: 5px; } /* Dark mode (voice page inverted theme): the black PNG icons must read white. */ body.voice-inverted .mobile-mid-icon { filter: invert(1) brightness(2.2); } .nav-mobile-brand .mobile-brand-tagline { font-size: 0.9rem; font-weight: 400; color: var(--gray-600); margin-top: 1rem; line-height: 1.6; } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } /* Expand nav bar on mobile for home page intro */ nav { height: var(--nav-height); background: rgba(255,255,255,0.97); } .nav-brand-sub { display: block; font-weight: 300; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); margin-top: 1px; } } /* --- Spotlight block --- */ .spotlight { margin-top: 2.5rem; padding: 2.5rem; border: 1px solid var(--gray-200); background: var(--white); } .spotlight-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray-400); margin-bottom: 0.8rem; } .spotlight h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; } .spotlight p { font-size: 0.9rem; color: var(--gray-600); margin-bottom: 0.75rem; } .spotlight .spotlight-video { display: block; margin-top: 1rem; font-size: 0.85rem; font-weight: 400; } .spotlight .spotlight-video::before { content: "▶ "; font-size: 0.7rem; } /* --- Page content reaches the very top: the cockpit corners overlay the page; only the corner zones cover content, the center top is free. --- */ main { padding-top: 0; } /* --- Footer --- */ footer { padding: 3rem 0; border-top: 1px solid var(--gray-200); font-size: 0.8rem; color: var(--gray-400); } /* --- Animations --- */ [data-animate] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-animate].visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } /* --- Team / Collaborator tables --- */ .people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .person { padding: 1.5rem 0; border-bottom: 1px solid var(--gray-200); } .person-name { font-weight: 700; font-size: 1rem; } .person-title { font-size: 0.85rem; color: var(--gray-600); margin-top: 0.15rem; } .person-link { font-size: 0.8rem; margin-top: 0.25rem; } .person-link a { color: var(--gray-400); } .person-link a:hover { color: var(--black); } /* GitHub icon */ .gh-icon { display: inline-block; width: 14px; height: 14px; background: var(--black); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; vertical-align: -0.1em; margin-left: 5px; } /* LinkedIn icon */ .li-icon { display: inline-block; width: 14px; height: 14px; background: var(--black); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; vertical-align: middle; margin-left: 4px; } /* --- Service cards --- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.5rem; margin-top: 2rem; } .service-card h3 { margin-bottom: 0.5rem; } .service-card p { font-size: 0.9rem; color: var(--gray-600); } /* --- Blog --- */ .post-list { list-style: none; } .post-item { padding: 2rem 0; border-bottom: 1px solid var(--gray-200); } .post-item h3 a { color: var(--black); } .post-item h3 a:hover { text-decoration: underline; } .post-date { font-size: 0.8rem; color: var(--gray-400); margin-bottom: 0.25rem; } .post-summary { font-size: 0.9rem; color: var(--gray-600); margin-top: 0.5rem; } .post-body { max-width: 680px; margin: 0 auto; } .post-body h1 { margin-bottom: 0.5rem; } .post-body h2 { margin-top: 2.5rem; } .post-body h3 { margin-top: 2rem; } .post-body blockquote { border-left: 3px solid var(--black); margin: 2rem 0; padding: 1.5rem 1.5rem; } .post-body blockquote p { margin-bottom: 0.5rem; } .post-body blockquote p:last-child { margin-bottom: 0; } .post-body audio { width: 100%; margin: 1.5rem 0; } /* --- Audience pages --- */ .audience-hero { padding: 2rem 0 0; } .audience-hero h1 { margin-bottom: 1.2rem; } .audience-hero .lead { font-size: 1.1rem; color: var(--gray-600); max-width: 580px; line-height: 1.7; } .value-list { list-style: none; margin-top: 0; } .value-list li { padding: 2rem 0; border-bottom: 1px solid var(--gray-200); font-size: 0.95rem; line-height: 1.7; } .value-list li:first-child { border-top: 1px solid var(--gray-200); } .value-list li strong { display: block; font-size: 1rem; margin-bottom: 0.4rem; }