/* ========================================================================== Site header — SINGLE SOURCE OF TRUTH. Loaded in the of both the landing (index.hbs) and every default-layout page (default.hbs), so the header is byte-for-byte identical everywhere and never drifts between templates. Layout: fixed paper bar, three zones — wordmark (left) · nav: About / Subscribe (center) · try it live (right) Relies on tokens defined by both loading contexts: --sic-*, --rule, --font-code, --font1, --sic-gold, --gold-tint, --landing-max, --landing-gutter. ========================================================================== */ /* The wordmark face. Both loading contexts reference --font1-mono but neither defined it (the fallback ui-monospace shipped silently) — declared here so the wordmark is Avenue Mono everywhere. The @font-face comes from global.css (inner pages) / landing-scroll.css (landing). */ :root { --font1-mono: 'Avenue Mono', ui-monospace, monospace; } .ls-brand { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--room, #FFFFFF); border-bottom: 1px solid var(--rule); } .ls-brand-inner { /* content-box: the 960 is the CONTENT width; gutters sit outside it, so the wordmark lands at the same x as the editorial column edge. */ box-sizing: content-box; max-width: var(--landing-max, 960px); margin: 0 auto; padding: 14px var(--landing-gutter, 56px); min-height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .ls-brand a { text-decoration: none; } /* wordmark (left) */ .ls-brand .wordmark { justify-self: start; border: none; font-family: var(--font1-mono, ui-monospace, monospace); font-size: 18px; letter-spacing: 0.01em; line-height: 1; color: var(--sic-ink); } .ls-brand .wordmark sup { vertical-align: baseline; font-size: 0.62em; position: relative; top: -1.9em; margin-left: 1px; } /* nav (center) — the door's bracket grammar, one set everywhere: [contact] [about] [docs] [blog] [subscribe] */ .ls-brand-nav { justify-self: center; display: flex; gap: 22px; font-family: var(--font1-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1; /* pin height: inner pages inherit a taller body line-height that would grow the bar */ color: var(--sic-ink); } .ls-brand-nav a { border: none; color: var(--sic-ink); opacity: 0.85; cursor: pointer; } .ls-brand-nav a:hover { opacity: 1; } /* CTA (right) — try it live pill */ .ls-brand-cta { justify-self: end; border: 1px dashed var(--sic-stone); padding: 8px 16px; font-family: var(--font-code); font-size: 11px; line-height: 1; /* pin height so the bar is 61px everywhere */ letter-spacing: 0.12em; text-transform: uppercase; color: var(--sic-ink); white-space: nowrap; transition: border-color 0.2s, background 0.2s; } .ls-brand-cta:hover { border-color: var(--sic-gold); background: var(--gold-tint); } @media (max-width: 800px) { /* two zones on mobile: wordmark + the live CTA; About/Subscribe reachable in the footer (matches the landing's mobile header). */ .ls-brand-inner { padding: 12px 20px; grid-template-columns: 1fr auto; } .ls-brand-nav { display: none; } } /* ========================================================================== Site footer — same source of truth. Sits at the end of the landing and every default page. Full-width paper bar; inner uses content-box like .ls-brand-inner so its content aligns to the same 240 column. ========================================================================== */ .lp-footer { position: relative; z-index: 60; margin-top: 0; border-top: 1px solid var(--rule); background: var(--room, #FFFFFF); } .lp-footer .lp-footer-inner { box-sizing: content-box; max-width: var(--landing-max, 960px); margin: 0 auto; padding: 14px var(--landing-gutter, 56px); min-height: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; font-family: var(--font-code); font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sic-stone); } .lp-footer p { margin: 0; justify-self: start; } .lp-footer a { text-decoration: none; color: var(--sic-stone); } .lp-footer a:hover { color: var(--sic-ink); } .lp-footer .legal { display: flex; gap: 24px; justify-self: center; } .lp-footer .meta { text-align: right; justify-self: end; } .lp-footer .meta a { color: var(--sic-ink); white-space: nowrap; } @media (max-width: 800px) { .lp-footer .lp-footer-inner { padding: 12px 20px; grid-template-columns: 1fr auto; } .lp-footer .legal { display: none; } }