/* Self-hosted IBM Plex (latin subset, OFL license — see /fonts/LICENSE-OFL.txt) */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } /* Shared design system for all concept sites. Per-site accent is injected as --accent in each page's . */ :root { --bg: #FCFCFA; --ink: #17191E; --ink-2: #50545E; --ink-3: #83878F; --line: #E6E5DF; --surface: #F5F4F0; --accent: #17191E; /* overridden per site */ --max: 44rem; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.01em; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } /* ---------- masthead ---------- */ .masthead { display: flex; justify-content: space-between; align-items: baseline; max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 0; color: var(--ink-3); } .masthead-right { color: var(--ink-3); } /* ---------- layout ---------- */ main { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; } section { padding: 3.25rem 0 0.5rem; border-top: 1px solid var(--line); margin-top: 3.25rem; } section:first-of-type { border-top: 0; margin-top: 0; } h2 { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 1.5rem; } .section-mark { color: var(--accent); margin-right: 0.5rem; font-weight: 500; } section p { margin: 0 0 1.1rem; max-width: 40rem; } .section-note { color: var(--ink-2); font-size: 0.95rem; } /* ---------- hero ---------- */ .hero { padding-top: 5rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 0 0 1.25rem; } h1 { font-size: clamp(2.6rem, 8.5vw, 4.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 1.5rem; } .definition { font-size: clamp(1.2rem, 3vw, 1.45rem); line-height: 1.5; font-weight: 400; color: var(--ink); max-width: 38rem; margin: 0 0 0.9rem; } .category { color: var(--ink-2); font-size: 0.95rem; margin: 0 0 2.75rem; } /* Concept record — the signature element */ .record { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin: 0; padding: 0.25rem 0; } .record > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--line); } .record > div:first-child { border-top: 0; } .record dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding-top: 0.1rem; } .record dd { margin: 0; color: var(--ink-2); } .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); margin-right: 0.5rem; vertical-align: 1px; } /* ---------- scope grid ---------- */ .scope-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } .scope-grid li { background: var(--bg); padding: 1.1rem 1.2rem 1.2rem; } .scope-grid h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.35rem; } .scope-grid p { font-size: 0.9rem; color: var(--ink-2); margin: 0; line-height: 1.55; } /* ---------- signals ---------- */ .signals { list-style: none; margin: 1.75rem 0 0; padding: 0; } .signals li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.25rem; padding: 1.35rem 0; border-top: 1px solid var(--line); } .signals li:first-child { border-top: 1px solid var(--ink); } .signal-meta { color: var(--ink-3); display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .signal-meta time { font-size: 0.8125rem; } .tag { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.15rem 0.45rem; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); background: var(--surface); } .tag-standards { border-color: var(--accent); color: var(--accent); background: transparent; } .signal-body h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; line-height: 1.45; } .signal-body h3 a { color: var(--ink); } .signal-body h3 a:hover { color: var(--accent); } .signal-body p { font-size: 0.925rem; color: var(--ink-2); margin: 0 0 0.5rem; max-width: 36rem; } .signal-source { color: var(--ink-3); font-size: 0.75rem; } /* ---------- email ---------- */ #track { padding-bottom: 2rem; } .track-form { display: flex; gap: 0.6rem; max-width: 30rem; margin: 1.5rem 0 0.75rem; } .track-form input[type="email"] { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); } .track-form input[type="email"]:focus { border-color: var(--accent); outline: none; } .track-form button { font: inherit; font-size: 0.95rem; font-weight: 500; padding: 0.65rem 1.1rem; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #FCFCFA; cursor: pointer; white-space: nowrap; } .track-form button:hover { filter: brightness(1.08); } .track-form button:disabled { opacity: 0.6; cursor: default; } .form-msg { min-height: 1.4rem; color: var(--ink-2); } /* ---------- footer ---------- */ footer { max-width: var(--max); margin: 3rem auto 0; padding: 1.75rem 1.25rem 3rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-3); } /* ---------- mobile ---------- */ @media (max-width: 40rem) { .hero { padding-top: 3.25rem; } .record > div, .signals li { grid-template-columns: 1fr; gap: 0.35rem; } .signal-meta { flex-direction: row; align-items: center; gap: 0.75rem; } .scope-grid { grid-template-columns: 1fr; } .track-form { flex-direction: column; } .track-form button { width: 100%; } } /* ---------- additions: status note, signal read, privacy, consent ---------- */ .plain-link { color: inherit; text-decoration: none; } .plain-link:hover { text-decoration: underline; } .status-note { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0 0; max-width: 38rem; } .signal-fact { } .signal-read { color: var(--ink-2); } .read-label { color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 0.25rem; } .consent-note { font-size: 0.85rem; color: var(--ink-3); margin: 0.6rem 0 0.4rem; max-width: 30rem; } /* Honeypot: hidden from humans, present for naive bots */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .cf-turnstile { margin: 0.25rem 0; } .privacy-hero { padding-top: 4rem; } .privacy-title { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -0.02em; } footer .mono a { color: var(--ink-3); } footer .mono a:hover { color: var(--accent); }