/* Invecter — resources (glossaire / guides), "Instrument Panel" recipe. One design applied to every term + guide: only the domain accent (--domain) and the content change per page. Static/crawlable — the only JS is a tiny scroll-spy for the left-rail TOC (progressive enhancement; anchors work without it). Adapted from the design handoff, blended with the existing site chrome (Extenro wordmark header + footer). */ :root { color-scheme: dark; } html { scrollbar-width: thin; scrollbar-color: #2c2c2e #050506; scroll-behavior: smooth; } @font-face { font-family: 'Extenro'; src: url('/assets/fonts/Extenro-ExtraBold.ttf') format('truetype'); font-weight: 400 900; font-display: swap; } :root { --bg: #050506; --panel: #0a0a0c; /* spec / related card bg */ --panel-grad: linear-gradient(180deg, #0c0c0e, #080809); /* definition module */ --text: #f6f6f8; --body: #d6d6db; /* definition body */ --body2: #a6a6ad; /* secondary / field note */ --muted: #83838b; --faint: #55555c; --faintest: #4a4a52; --sep: #333338; /* breadcrumb separators */ --hair: #131317; /* nav border */ --hair2: #17171b; /* spec / diagram card border */ --hair3: #1a1a1e; /* related row border */ --hair4: #1c1c20; /* definition / promo border */ --hair5: #1e1e22; /* search border */ /* Domain accent — overridden per page via inline style="--domain:#…" on . Falls back to the brand amber on aggregate pages (index / hub). */ --domain: #FFA51F; --measure: 46rem; /* reading column on aggregate pages */ --wide: 75rem; /* reader (rail + article) frame */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--domain) 30%, transparent); } /* Focus — one rounded ring per control that hugs its own corner radius, and no stray ring on a mouse click (keyboard focus only). Fixes the mismatch between the browser's default click outline and the rounded boxes. */ a:focus:not(:focus-visible) { outline: none; } .hub-card:focus-visible, .related-grid a:focus-visible, .cta-btn:focus-visible, .toc-search:focus-visible { outline: 2px solid var(--domain); outline-offset: 2px; /* follows the box radius */ } .toc a:focus-visible, ul.grid a:focus-visible, .nav-menu nav a:focus-visible, .crumbs a:focus-visible { outline: 2px solid var(--domain); outline-offset: 3px; border-radius: 4px; } /* ── Site header ───────────────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px clamp(20px, 5vw, 44px); background: rgba(5, 5, 6, 0.82); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--hair); } .site-nav .brand { font-family: Extenro, Archivo, sans-serif; font-weight: 800; letter-spacing: 0.06em; font-size: 1.2rem; color: var(--text); text-decoration: none; } /* Nav — native

hamburger on mobile, inline row on desktop (no JS). */ .nav-menu { position: relative; } .nav-menu summary { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; list-style: none; color: var(--text); font-size: 1.25rem; border: 1px solid var(--hair4); border-radius: 9px; } .nav-menu summary::-webkit-details-marker { display: none; } .nav-menu summary::before { content: "\2630"; } /* ☰ */ .nav-menu[open] summary::before { content: "\2715"; } /* ✕ */ .nav-menu nav { position: absolute; right: 0; top: calc(100% + 12px); display: flex; flex-direction: column; gap: 2px; min-width: 190px; background: #0b0b0d; border: 1px solid var(--hair4); border-radius: 12px; padding: 8px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65); } .nav-menu nav a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .nav-menu nav a:hover { color: #fff; background: var(--panel); } .nav-menu nav a.active { color: var(--domain); } @media (min-width: 720px) { .nav-menu summary { display: none; } .nav-menu nav { position: static !important; display: flex !important; /* defeat closed-details UA hiding */ flex-direction: row; align-items: center; gap: clamp(16px, 3vw, 26px); min-width: 0; background: none; border: 0; padding: 0; box-shadow: none; } .nav-menu nav a { padding: 0; } .nav-menu nav a:hover { background: none; } } /* ── Document — aggregate pages (index / hub): single reading column ────────── */ .doc { max-width: var(--measure); margin: 0 auto; padding: 34px clamp(20px, 5vw, 32px) 88px; } .doc.wide { max-width: var(--wide); } /* ── Reader pages (term / guide): channel-strip rail + article ─────────────── */ .doc.reader { max-width: var(--wide); display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 44px; align-items: start; } /* Left rail — sticky TOC + search. */ .toc-rail { position: sticky; top: 84px; } .toc-eyebrow { font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; } .toc { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--hair4); } .toc a { padding: 9px 14px; border-left: 2px solid transparent; margin-left: -2px; font-size: 12px; color: var(--muted); text-decoration: none; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; } .toc a:hover { color: #fff; } .toc a.active { color: #e6e6ea; border-left-color: var(--domain); background: linear-gradient(90deg, color-mix(in srgb, var(--domain) 10%, transparent), transparent); } .toc-search { margin-top: 28px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--hair5); border-radius: 8px; padding: 9px 12px; background: #0b0b0d; color: var(--faint); text-decoration: none; font-size: 12px; } .toc-search:hover { color: var(--muted); border-color: var(--hair4); } .toc-search::before { content: ""; width: 13px; height: 13px; flex: none; border: 1.5px solid currentColor; border-radius: 999px; } /* ── Breadcrumb ────────────────────────────────────────────────────────────── */ .crumbs { font-size: 11px; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 24px; } .crumbs a { color: var(--faint); text-decoration: none; } .crumbs a:hover { color: #fff; } .crumbs span { margin: 0 6px; color: var(--sep); } .crumbs [aria-current] { color: #9a9aa2; } /* ── Category readout + title ─────────────────────────────────────────────── */ .cat-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .cat { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--domain); border: 1px solid var(--domain); border-radius: 5px; padding: 6px 12px; box-shadow: 0 0 20px color-mix(in srgb, var(--domain) 18%, transparent); } .cat-meta { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; color: var(--faint); } h1 { font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: 1.0; letter-spacing: -0.025em; color: var(--text); margin: 0 0 8px; } .title-bar { width: 56px; height: 3px; background: var(--domain); margin: 20px 0 34px; } /* On aggregate pages the title keeps a little more breathing room. */ .doc.wide h1 { margin-bottom: 16px; } /* ── Numbered modules ─────────────────────────────────────────────────────── */ .mod { margin-top: 34px; scroll-margin-top: 84px; } .mod:first-of-type { margin-top: 0; } .mod-label { font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .mod-label.accent { color: var(--domain); } /* 01 — Definition: corner-ticked card. */ .def { position: relative; border: 1px solid var(--hair4); border-radius: 10px; padding: 26px 28px; background: var(--panel-grad); } .def::before, .def::after { content: ""; position: absolute; top: -1px; width: 12px; height: 12px; border-top: 2px solid var(--domain); } .def::before { left: -1px; border-left: 2px solid var(--domain); border-radius: 3px 0 0 0; } .def::after { right: -1px; border-right: 2px solid var(--domain); border-radius: 0 3px 0 0; } .def p { font-size: 19px; line-height: 1.62; color: var(--body); margin: 0; } .def strong { color: #f4f4f5; font-weight: 600; } /* 02 — Field note / rule callout: accent left border. */ .fieldnote { border-left: 2px solid var(--domain); padding-left: 20px; } .fieldnote p { font-size: 17px; line-height: 1.66; color: var(--body2); margin: 0 0 14px; } .fieldnote p:last-child { margin-bottom: 0; } .fieldnote strong { color: #f4f4f5; font-weight: 600; } /* Guide long-form prose (02 — Le guide). */ .prose p { font-size: 18px; line-height: 1.72; color: var(--body); margin: 0 0 18px; } .prose ul { margin: 0 0 18px; padding-left: 22px; color: var(--body); } .prose li { margin: 0 0 8px; } .prose strong { color: #fff; font-weight: 700; } .prose a, .fieldnote a, .def a { color: var(--domain); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--domain) 35%, transparent); } .prose a:hover, .fieldnote a:hover, .def a:hover { border-bottom-color: var(--domain); } /* Guide lead photo (Wikimedia) — sits under the definition. */ .lead-photo { margin: 34px 0 0; } .lead-photo img { width: 100%; height: auto; display: block; border-radius: 9px; border: 1px solid var(--hair2); background: var(--panel); } .lead-photo figcaption { font-size: 12px; color: var(--faintest); margin-top: 8px; line-height: 1.5; } .lead-photo figcaption a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hair4); } .lead-photo figcaption a:hover { color: #fff; } /* Related — patch matrix of link rows. */ .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .related-grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--hair3); border-radius: 8px; padding: 14px 16px; background: var(--panel); text-decoration: none; transition: border-color 150ms ease, background 150ms ease; } .related-grid a > span:first-child { font-size: 15px; color: #d0d0d6; } .related-grid a > span:last-child { font-size: 14px; color: var(--domain); } .related-grid a:hover { border-color: var(--domain); background: color-mix(in srgb, var(--domain) 5%, var(--panel)); } @media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } } /* Tools promo. */ .cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--hair4); border-radius: 11px; padding: 22px 26px; background: linear-gradient(100deg, color-mix(in srgb, var(--domain) 6%, transparent), transparent); } .cta-name { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--domain); margin-bottom: 6px; } .cta p { color: var(--body2); margin: 0; font-size: 15px; } .cta-btn { white-space: nowrap; flex: none; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: #050506; background: var(--domain); border-radius: 7px; padding: 11px 18px; text-decoration: none; } @media (max-width: 560px) { .cta { flex-direction: column; align-items: flex-start; } } /* ── Resources hub (landing) — two collection cards. ───────────────────────── */ .hub { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0; } .hub-card { position: relative; display: block; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--hair4); border-radius: 12px; padding: 24px 24px 22px; transition: border-color 150ms ease; } .hub-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-top: 2px solid var(--domain); border-left: 2px solid var(--domain); border-radius: 3px 0 0 0; } .hub-card:hover { border-color: var(--domain); } .hub-k { display: block; font-weight: 700; font-size: 1.18rem; } .hub-n { display: block; color: var(--domain); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px; } .hub-card p { color: var(--body2); font-size: 0.98rem; margin: 12px 0 14px; line-height: 1.55; } .hub-go { color: var(--domain); font-weight: 600; font-size: 0.95rem; } .hub-go::after { content: " →"; } @media (max-width: 560px) { .hub { grid-template-columns: 1fr; } } /* ── Index (list) pages ────────────────────────────────────────────────────── */ .doc .tldr { font-size: 1.1rem; line-height: 1.62; color: var(--body); border-left: 3px solid var(--domain); padding: 4px 0 4px 20px; margin: 0 0 8px; } .doc section { margin-top: 40px; } .doc section > h2 { font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--domain); margin: 0 0 16px; } ul.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px; } ul.grid a { color: #d0d0d6; text-decoration: none; border-bottom: 1px solid transparent; padding: 4px 0; display: inline-block; font-size: 0.98rem; } ul.grid a:hover { color: #fff; border-bottom-color: var(--domain); } /* ── Footer ────────────────────────────────────────────────────────────────── */ .site-foot { border-top: 1px solid var(--hair); padding: 34px clamp(20px, 5vw, 48px) 48px; text-align: center; } .site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 4px; justify-content: center; align-items: center; font-size: 0.85rem; } .site-foot nav a { color: var(--muted); text-decoration: none; } .site-foot nav a:hover { color: #fff; } .site-foot nav span { color: var(--faint); margin: 0 8px; } .site-foot .copy { font-size: 12px; color: var(--faint); margin-top: 16px; } /* ── Responsive: collapse the reader grid, drop the rail (per the mobile mock) ─ */ @media (max-width: 880px) { .doc.reader { grid-template-columns: 1fr; gap: 0; } .toc-rail { display: none; } h1 { font-size: clamp(2rem, 8vw, 2.4rem); } .title-bar { width: 44px; margin: 16px 0 26px; } .def { padding: 20px; } .def::after { display: none; } /* single top-left tick on mobile */ .def p { font-size: 16px; } } @media (max-width: 560px) { body { font-size: 17px; } ul.grid { grid-template-columns: 1fr; } }