/* ====================================================================== NorthArc — /glossary stylesheet Loaded after briefing.css. Briefing.css supplies the shared header, footer, wordmark, and skip-link styles. This file owns everything inside . ====================================================================== */ :root { --gloss-cream: #F5F1E8; --gloss-bone: #FAF7F2; --gloss-card: #FFFFFF; --gloss-card-bd: #E5E1D5; --gloss-rule: #D6D0C0; --gloss-tag-bg: #EEF2FF; --gloss-ink: #0F172A; --gloss-body: #475569; --gloss-muted: #94A3B8; --gloss-arc: #4F46E5; --gloss-arc-dk: #818CF8; /* indigo on dark surface */ --gloss-dark: #07080F; --gloss-dark-mu: #9CA3AF; } body.glossary-page { background: var(--gloss-cream); color: var(--gloss-ink); } /* ── Hero ──────────────────────────────────────────────────────────── */ .glossary-hero { padding: 80px 0 48px; background: var(--gloss-cream); } .glossary-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media (min-width: 1024px) { .glossary-hero-inner { padding: 0 40px; } } .glossary-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: 3px; color: var(--gloss-arc); text-transform: uppercase; margin: 0 0 24px; } .glossary-eyebrow .rule { display: inline-block; width: 60px; height: 1px; background: var(--gloss-arc); opacity: 0.35; } .glossary-headline { font-size: 38px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; color: var(--gloss-ink); max-width: 720px; margin: 0 0 24px; } .glossary-headline em.accent { font-style: italic; color: var(--gloss-arc); } @media (max-width: 1023px) { .glossary-headline { font-size: 30px; } } @media (max-width: 767px) { .glossary-headline { font-size: 24px; } } .glossary-standfirst { font-size: 17px; line-height: 1.55; color: var(--gloss-body); max-width: 640px; margin: 0 0 32px; } /* ── Search input ──────────────────────────────────────────────────── */ .glossary-search-wrap { position: relative; max-width: 520px; margin: 0 0 24px; } .glossary-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gloss-muted); pointer-events: none; } .glossary-search { width: 100%; height: 48px; background: #FFFFFF; border: 1px solid var(--gloss-card-bd); border-radius: 8px; padding: 0 16px 0 44px; font: 400 14px/1.4 'Geist', ui-sans-serif, system-ui, sans-serif; color: var(--gloss-ink); transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1); } .glossary-search::placeholder { color: var(--gloss-muted); } .glossary-search:focus { outline: none; border-color: var(--gloss-arc); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); } /* ── Category filter pills ────────────────────────────────────────── */ .category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; } .category-pill { font: 500 12px/1 'Geist', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.02em; padding: 6px 14px; border-radius: 20px; background: transparent; color: var(--gloss-body); border: 1px solid var(--gloss-rule); cursor: pointer; transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1); } .category-pill:hover { border-color: var(--gloss-body); } .category-pill.active { background: var(--gloss-arc); color: #FFFFFF; border-color: var(--gloss-arc); } /* ── Alphabet jump nav ────────────────────────────────────────────── */ .alphabet-nav-wrap { border-top: 0.5px solid var(--gloss-rule); padding-top: 20px; margin-top: 12px; } .alphabet-nav-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gloss-muted); margin: 0 0 12px; } .alphabet-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; } .alphabet-nav a, .alphabet-nav span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 13px; font-weight: 500; border-radius: 4px; text-decoration: none; transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1); } .alphabet-nav a { color: var(--gloss-arc); cursor: pointer; } .alphabet-nav a:hover { background: var(--gloss-tag-bg); } .alphabet-nav span { color: var(--gloss-muted); cursor: default; } /* ── Glossary body ─────────────────────────────────────────────────── */ .glossary-body { background: var(--gloss-cream); padding: 32px 0 80px; } .glossary-body-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media (min-width: 1024px) { .glossary-body-inner { padding: 0 40px; } } .glossary-letter-group { margin: 0 0 32px; } .glossary-letter-group:last-child { margin-bottom: 0; } .letter-divider { font-size: 64px; font-weight: 300; letter-spacing: -0.02em; color: var(--gloss-muted); line-height: 1; margin: 0 0 24px; scroll-margin-top: 96px; } @media (max-width: 767px) { .letter-divider { font-size: 48px; margin-bottom: 16px; } } /* ── Entry card ────────────────────────────────────────────────────── */ .glossary-entry { background: var(--gloss-card); border: 1px solid var(--gloss-card-bd); border-radius: 12px; padding: 28px 32px; margin: 0 0 16px; scroll-margin-top: 96px; max-width: 880px; } .glossary-entry:last-child { margin-bottom: 0; } @media (max-width: 767px) { .glossary-entry { padding: 22px 20px; border-radius: 10px; } } .glossary-entry .category-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .glossary-entry .tag { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--gloss-tag-bg); color: var(--gloss-arc); font: 500 10px/1.3 'Geist', ui-sans-serif, system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; border-radius: 12px; } .glossary-entry .term-name { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--gloss-ink); margin: 0 0 12px; line-height: 1.25; } .glossary-entry .definition { font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--gloss-ink); margin: 0 0 16px; } .glossary-entry .definition strong { font-weight: 500; } .glossary-entry .expansion { font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--gloss-body); margin: 0 0 16px; } .glossary-entry .expansion p:not(:last-child) { margin-bottom: 12px; } /* Visible flag for [TECHNICAL: ...] placeholders inside expansion blocks. Mirrors the briefing-page convention so Stephen can spot fill-ins. */ .glossary-entry .expansion .placeholder-needed { display: block; background: #FEF9C3; border-left: 3px solid #CA8A04; padding: 10px 14px; margin: 8px 0; border-radius: 2px; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; color: #422006; } .glossary-entry .expansion .placeholder-needed::before { content: 'TECHNICAL INPUT NEEDED — '; font-weight: 600; color: #854D0E; letter-spacing: 0.04em; } .glossary-entry .related-terms { border-top: 0.5px solid var(--gloss-card-bd); padding-top: 14px; margin-top: 14px; } .glossary-entry .related-label { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gloss-muted); margin: 0 0 8px; } .glossary-entry .related-list { font-size: 13px; font-weight: 400; line-height: 1.6; } .glossary-entry .related-list a { color: var(--gloss-arc); text-decoration: none; transition: color 200ms cubic-bezier(0.2, 0, 0, 1); } .glossary-entry .related-list a:hover { color: var(--gloss-ink); text-decoration: underline; text-underline-offset: 3px; } .glossary-entry .related-list .separator { color: var(--gloss-muted); margin: 0 6px; } /* Inline source links inside expansion paragraphs */ .glossary-entry .expansion a { color: var(--gloss-arc); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 200ms cubic-bezier(0.2, 0, 0, 1), text-decoration-thickness 200ms cubic-bezier(0.2, 0, 0, 1); } .glossary-entry .expansion a:hover { color: var(--gloss-ink); text-decoration-thickness: 2px; } /* Global disclaimer at end of glossary body */ .glossary-disclaimer { max-width: 880px; padding: 32px 0; margin: 32px 0 0; border-top: 0.5px solid var(--gloss-rule); } .glossary-disclaimer .disclaimer-text { font-size: 14px; font-style: italic; color: var(--gloss-body); line-height: 1.6; max-width: 640px; margin: 0; } /* Brief flash when arriving at a related-term anchor. Respect prefers-reduced-motion. */ .glossary-entry.highlight { animation: gloss-highlight-flash 1.5s ease-out; } @keyframes gloss-highlight-flash { 0% { background: #FAF8F2; } 100% { background: var(--gloss-card); } } @media (prefers-reduced-motion: reduce) { .glossary-entry.highlight { animation: none; } .glossary-search, .category-pill, .alphabet-nav a, .glossary-entry .related-list a, .gloss-cta { transition: none; } html { scroll-behavior: auto; } } /* ── Empty state (no search/filter results) ───────────────────────── */ .glossary-empty-state { background: var(--gloss-card); border: 1px dashed var(--gloss-card-bd); border-radius: 12px; padding: 40px 32px; text-align: center; max-width: 880px; margin: 0 0 16px; } .glossary-empty-state .empty-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gloss-muted); margin: 0 0 8px; } .glossary-empty-state .empty-title { font-size: 18px; font-weight: 500; color: var(--gloss-ink); margin: 0 0 8px; } .glossary-empty-state .empty-body { font-size: 14px; color: var(--gloss-body); margin: 0 0 16px; } .glossary-empty-state .empty-clear { font: 500 12px/1 'Geist', ui-sans-serif, system-ui, sans-serif; background: transparent; border: 1px solid var(--gloss-rule); color: var(--gloss-body); padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1); } .glossary-empty-state .empty-clear:hover { border-color: var(--gloss-body); color: var(--gloss-ink); } /* ── Cross-sell dark block ────────────────────────────────────────── */ .glossary-crosssell { background: var(--gloss-dark); padding: 80px 0; } .glossary-crosssell-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media (min-width: 1024px) { .glossary-crosssell-inner { padding: 0 40px; } } .glossary-crosssell .gloss-eyebrow-dark { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gloss-arc-dk); margin: 0 0 24px; } .glossary-crosssell .gloss-eyebrow-dark .rule { display: inline-block; width: 60px; height: 1px; background: var(--gloss-arc-dk); opacity: 0.5; } .glossary-crosssell .gloss-headline { font-size: 36px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: #FFFFFF; max-width: 700px; margin: 0; } .glossary-crosssell .gloss-headline em.accent { font-style: italic; color: var(--gloss-arc-dk); } @media (max-width: 1023px) { .glossary-crosssell .gloss-headline { font-size: 28px; } } @media (max-width: 767px) { .glossary-crosssell .gloss-headline { font-size: 22px; } } .glossary-crosssell .gloss-standfirst { font-size: 17px; line-height: 1.55; color: var(--gloss-dark-mu); max-width: 600px; margin: 24px 0 40px; } .gloss-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--gloss-arc); color: #FFFFFF; font: 500 14px/1 'Geist', ui-sans-serif, system-ui, sans-serif; padding: 14px 28px; border-radius: 8px; text-decoration: none; transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1); } .gloss-cta:hover { background: #5750E8; } /* ── Mobile refinements ───────────────────────────────────────────── */ @media (max-width: 767px) { .glossary-hero { padding: 56px 0 32px; } .glossary-body { padding: 24px 0 56px; } .glossary-crosssell { padding: 56px 0; } .glossary-search-wrap { max-width: 100%; } .glossary-search { height: 44px; font-size: 16px; } /* 16px prevents iOS zoom-on-focus */ .alphabet-nav a, .alphabet-nav span { width: 26px; height: 26px; font-size: 12px; } }