/* ========================================================================== EMNC core - shared chrome for every page on emncautomation.com Tokens, nav (incl. Products dropdown), buttons, typography, footer. Page-specific component CSS stays in the page. Nothing here loads from a third-party host. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* legacy brand tokens - kept so older component CSS keeps resolving */ --navy: #07111f; --navy2: #0c1c30; --navy3: #112540; --gold: #c8a84b; --gold2: #dfc07a; --gold-dim: rgba(200,168,75,0.12); --white: #ffffff; --text: #0d1520; --muted: #64748b; --border: rgba(200,168,75,0.18); --border-w: rgba(200,168,75,0.12); /* current light system - these are the ones to use */ --off: #f5f5f7; --ink: #1d1d1f; --ink2: #6e6e73; --goldink: #8c6f22; --hair: #d2d2d7; --card-line: rgba(13,21,32,0.09); --card-sh: 0 1px 2px rgba(12,23,40,0.04), 0 8px 22px rgba(12,23,40,0.05); --card-sh-h: 0 4px 10px rgba(12,23,40,0.06), 0 18px 40px rgba(12,23,40,0.10); } html { scroll-behavior: smooth; } html, body { background: #ffffff; } /* The homepage tool marquee and hero art deliberately run past the viewport. Clipping on is what actually stops the page scrolling sideways - the same declaration on does not reliably reach the viewport. `clip` rather than `hidden`, so position:sticky keeps working. */ html, body { overflow-x: clip; } body { font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--off); } ::-webkit-scrollbar-thumb { background: var(--gold); } /* ── section rhythm + type scale ─────────────────────────────────────────── */ section { padding: 120px 40px; } .si { max-width: 1120px; margin: 0 auto; } .s-title, .s-title.light { font-size: clamp(32px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); } .s-title span, .s-title span[style] { color: var(--goldink) !important; } .s-desc, .s-desc.light { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink2); max-width: 640px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .eyebrow-line { width: 36px; height: 1px; background: var(--goldink); } .eyebrow-text { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--goldink); } /* ── nav ─────────────────────────────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 64px; height: 56px; transition: background 0.35s, border-bottom 0.35s; border-bottom: 1px solid transparent; } /* light glass - the default on inner pages, and on the homepage once scrolled */ nav.scrolled, nav.solid { background: rgba(255,255,255,0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); } .nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; } .nav-logo img { height: 32px; width: auto; display: block; transition: filter 0.35s; } .nav-logo-text { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--white); line-height: 1.15; } .nav-logo-sub { font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-top: 1px; } nav.scrolled .nav-logo-text, nav.solid .nav-logo-text { color: var(--ink); } nav.scrolled .nav-logo-sub, nav.solid .nav-logo-sub { color: var(--goldink); } nav.scrolled .nav-logo img, nav.solid .nav-logo img { filter: none; } .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; } .nav-links > li { position: relative; } /* every hero on the site is light now, so nav text is ink by default. The homepage styles its own items; .nav-trigger is a