/* marketing.css — standalone landing page (index.html) for 99northmedia.com. * * Self-contained component system (mkt- prefix) so it never collides with the * app's styles.css. Dark-brand only (the landing page is locked to dark in the * ). All colors come from tokens.css — no hardcoded palette. Responsive * via clamp()/grid; the page body never scrolls horizontally. */ /* ---- the page shape ------------------------------------------------------- */ /* One frame for every public page. tokens.css defaults these to the full-width case for the app; here they take the marketing value, and the top bar and each page's
both read them, so a page and the bar above it are the same shape by construction rather than by two files agreeing. */ :root { --page-max: 1400px; --page-gutter: 2rem; } @media (max-width: 768px) { :root { --page-gutter: 1rem; } } main { max-width: var(--page-max); margin: 0 auto; padding: 2rem var(--page-gutter); } /* ---- shell ---------------------------------------------------------------- */ body { margin: 0; background: var(--bg-base); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .mkt-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .mkt-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; color: var(--brand-secondary); margin: 0 0 14px; } /* ---- slim top bar --------------------------------------------------------- */ .mkt-nav { position: sticky; top: 0; z-index: 100; padding: 12px 0; background: color-mix(in srgb, var(--bg-base) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); } /* The bar spans the window so its wash and rule do; the row inside sits on the page box, so the mark lands on the left edge of the hero, the stat panel and the cards, and the auth group on their right. Row and page box read the same two tokens — the frame tokens.css already defines for exactly this — so they cannot drift apart, and one page cannot end up a different shape from the next. */ .mkt-nav-row { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mkt-nav-brand { display: flex; align-items: center; text-decoration: none; } /* The mark carries the name, so it stands alone — at a size the wordmark inside it can actually be read at, which the old 30px beside a text label was not. */ .mkt-nav-brand img { height: 44px; width: auto; display: block; } /* styles.css caps and centres every