/* ============================================================ NexaCore OS — Public site stylesheet Direction: C — Civic Tech / Generational Authoritative: brand/STRATEGY.md, brand/colors/*, brand/typography/* Scope: index.html (landing) + technology.html (deep dive) Colour tokens are imported verbatim from the brand source of truth. Typography tokens are mirrored from brand/typography/type-tokens.css (the @font-face block is intentionally NOT imported — the three SIL OFL families are loaded from Google Fonts in each page so the type renders as designed even though the WOFF2 files are not yet vendored). ============================================================ */ @import url("../brand/colors/tokens.css"); :root { /* Typography — mirrored from brand/typography/type-tokens.css */ --nexacore-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --nexacore-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --nexacore-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; --nexacore-text-xs: 0.75rem; --nexacore-text-sm: 0.875rem; --nexacore-text-base: 1rem; --nexacore-text-lg: 1.25rem; --nexacore-text-xl: 1.5625rem; --nexacore-text-2xl: 1.953rem; --nexacore-text-3xl: 2.441rem; --nexacore-text-4xl: 3.052rem; --nexacore-text-5xl: 3.815rem; --nexacore-leading-tight: 1.15; --nexacore-leading-snug: 1.4; --nexacore-leading-normal: 1.55; --nexacore-leading-relaxed: 1.6; --nexacore-tracking-tight: -0.015em; --nexacore-tracking-wide: 0.06em; --nexacore-tracking-wider: 0.08em; --nexacore-tracking-widest: 0.12em; --nexacore-weight-regular: 400; --nexacore-weight-medium: 500; --nexacore-weight-semibold: 600; --nexacore-weight-bold: 700; /* Layout */ --nexacore-maxw: 72rem; --nexacore-prose: 38rem; --nexacore-gutter: clamp(1.25rem, 5vw, 4rem); --nexacore-section-y: clamp(3.5rem, 8vw, 7rem); --nexacore-radius: 4px; /* Code-syntax accents — light mode (legible on --nexacore-bg-code = petrol-50) */ --code-keyword: var(--nexacore-petrol-600); --code-string: var(--nexacore-sage-700); --code-comment: var(--nexacore-charcoal-300); --code-number: var(--nexacore-brick-700); --code-attr: var(--nexacore-petrol-700); } @media (prefers-color-scheme: dark) { :root:not([data-nexacore-theme="light"]) { /* Code-syntax accents — dark mode (legible on --nexacore-bg-code = petrol-900) */ --code-keyword: var(--nexacore-petrol-200); --code-string: var(--nexacore-sage-300); --code-comment: var(--nexacore-charcoal-300); --code-number: var(--nexacore-brick-300); --code-attr: var(--nexacore-petrol-200); } } [data-nexacore-theme="dark"] { --code-keyword: var(--nexacore-petrol-200); --code-string: var(--nexacore-sage-300); --code-comment: var(--nexacore-charcoal-300); --code-number: var(--nexacore-brick-300); --code-attr: var(--nexacore-petrol-200); } /* ---------- Reset & base ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--nexacore-bg-canvas); color: var(--nexacore-text-primary); font-family: var(--nexacore-font-body); font-size: var(--nexacore-text-base); line-height: var(--nexacore-leading-normal); font-feature-settings: "liga" on, "calt" on, "kern" on; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--nexacore-font-display); font-weight: var(--nexacore-weight-bold); letter-spacing: var(--nexacore-tracking-tight); line-height: var(--nexacore-leading-tight); color: var(--nexacore-text-accent); margin: 0 0 0.6em; } h1 { font-size: var(--nexacore-text-4xl); } h2 { font-size: var(--nexacore-text-2xl); } h3 { font-size: var(--nexacore-text-xl); } h4 { font-family: var(--nexacore-font-body); font-weight: var(--nexacore-weight-semibold); font-size: var(--nexacore-text-lg); color: var(--nexacore-text-primary); margin: 0 0 0.5em; letter-spacing: 0; } p { margin: 0 0 1.1em; max-width: var(--nexacore-prose); } .measure-wide p { max-width: 46rem; } a { color: var(--nexacore-text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--nexacore-text-link-hover); } a:focus-visible { outline: 2px solid var(--nexacore-focus-ring); outline-offset: 2px; border-radius: 2px; } strong { font-weight: var(--nexacore-weight-semibold); } hr { border: 0; border-top: 1px solid var(--nexacore-rule); margin: var(--nexacore-section-y) 0; } ::selection { background: var(--nexacore-petrol-500); color: var(--nexacore-cream-300); } /* ---------- Layout helpers -------------------------------- */ .wrap { max-width: var(--nexacore-maxw); margin-inline: auto; padding-inline: var(--nexacore-gutter); } .section { padding-block: var(--nexacore-section-y); } .section--surface { background: var(--nexacore-bg-surface); } .section--surface-2 { background: var(--nexacore-bg-surface-2); } .eyebrow { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); font-weight: var(--nexacore-weight-medium); letter-spacing: var(--nexacore-tracking-wider); text-transform: uppercase; color: var(--nexacore-text-secondary); margin: 0 0 1rem; } .eyebrow::before { content: ""; display: inline-block; width: 1.75rem; height: 1px; vertical-align: middle; margin-right: 0.75rem; background: var(--nexacore-rule); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head p { font-size: var(--nexacore-text-lg); color: var(--nexacore-text-secondary); max-width: 42rem; } /* ---------- Skip link & focus ----------------------------- */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--nexacore-petrol-500); color: var(--nexacore-cream-300); padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 var(--nexacore-radius) 0; } .skip-link:focus { left: 0; } /* ---------- Top navigation -------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--nexacore-bg-canvas) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--nexacore-border-default); } .nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; } .nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--nexacore-text-accent); font-family: var(--nexacore-font-display); font-weight: 700; font-size: var(--nexacore-text-lg); letter-spacing: var(--nexacore-tracking-tight); } .nav__brand:hover { color: var(--nexacore-text-accent); } .nav__mark { width: 28px; height: 28px; flex: none; } .nav__links { margin-left: auto; display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); } .nav__links a { font-family: var(--nexacore-font-body); font-size: var(--nexacore-text-sm); font-weight: 500; color: var(--nexacore-text-secondary); text-decoration: none; } .nav__links a:hover { color: var(--nexacore-text-accent); } .nav__links a[aria-current="page"] { color: var(--nexacore-text-accent); } .nav__cta { white-space: nowrap; } .theme-toggle { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); background: transparent; color: var(--nexacore-text-secondary); border: 1px solid var(--nexacore-border-strong); border-radius: var(--nexacore-radius); padding: 0.3rem 0.55rem; cursor: pointer; text-transform: uppercase; } .theme-toggle:hover { color: var(--nexacore-text-accent); border-color: var(--nexacore-border-accent); } @media (max-width: 640px) { .nav__links a:not(.nav__cta) { display: none; } } /* ---------- Buttons --------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--nexacore-font-body); font-size: var(--nexacore-text-sm); font-weight: 600; padding: 0.7rem 1.15rem; border-radius: var(--nexacore-radius); text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1; min-height: 44px; } .btn--primary { background: var(--nexacore-petrol-500); color: var(--nexacore-cream-300); border-color: var(--nexacore-petrol-500); } .btn--primary:hover { background: var(--nexacore-petrol-700); color: var(--nexacore-cream-300); } .btn--ghost { background: transparent; color: var(--nexacore-text-accent); border-color: var(--nexacore-border-accent); } .btn--ghost:hover { background: var(--nexacore-bg-surface-2); color: var(--nexacore-text-accent); } .btn__arrow { font-family: var(--nexacore-font-mono); } /* ---------- Status pills (brand pattern) ------------------ */ .nexacore-status { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); font-weight: 500; letter-spacing: var(--nexacore-tracking-wider); text-transform: uppercase; padding: 3px 8px; border-radius: 2px; display: inline-block; white-space: nowrap; } .nexacore-status--draft { background: var(--nexacore-bg-surface-2); color: var(--nexacore-text-secondary); border: 1px solid var(--nexacore-border-default); } .nexacore-status--review { background: var(--nexacore-bg-surface-2); color: var(--nexacore-status-info); border: 1px solid var(--nexacore-status-info); } .nexacore-status--active { background: var(--nexacore-sage-100); color: var(--nexacore-sage-900); } .nexacore-status--final { background: var(--nexacore-petrol-500); color: var(--nexacore-cream-300); } .nexacore-status--critical { background: var(--nexacore-brick-500); color: var(--nexacore-cream-300); } /* ---------- Hero ------------------------------------------ */ .hero { padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem); } .hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero__metaline { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.6rem, 6vw, var(--nexacore-text-5xl)); margin-bottom: 0.4em; } .hero__lede { font-family: var(--nexacore-font-display); font-size: var(--nexacore-text-lg); line-height: var(--nexacore-leading-normal); color: var(--nexacore-text-secondary); max-width: 34rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .hero__mark { display: grid; place-items: center; } .hero__mark svg { width: min(280px, 70%); height: auto; } @media (max-width: 820px) { .hero__grid { grid-template-columns: 1fr; } .hero__mark { order: -1; justify-items: start; } .hero__mark svg { width: 140px; } } /* ---------- Cards / grids --------------------------------- */ .grid { display: grid; gap: 1.25rem; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { background: var(--nexacore-bg-surface); border: 1px solid var(--nexacore-border-default); border-radius: var(--nexacore-radius); padding: 1.5rem 1.5rem 1.6rem; } .card__icon { color: var(--nexacore-petrol-500); width: 32px; height: 32px; display: block; margin-bottom: 1rem; } .card h3 { font-size: var(--nexacore-text-lg); font-family: var(--nexacore-font-body); font-weight: 600; color: var(--nexacore-text-primary); letter-spacing: 0; margin-bottom: 0.4em; } .card p { font-size: var(--nexacore-text-sm); color: var(--nexacore-text-secondary); margin: 0; max-width: none; } .card p + p { margin-top: 0.7em; } /* ---------- Stat row -------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--nexacore-border-default); border: 1px solid var(--nexacore-border-default); border-radius: var(--nexacore-radius); overflow: hidden; } .stat { background: var(--nexacore-bg-surface); padding: 1.25rem 1.25rem; } .stat__num { font-family: var(--nexacore-font-display); font-weight: 700; font-size: var(--nexacore-text-2xl); color: var(--nexacore-text-accent); line-height: 1; } .stat__label { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; color: var(--nexacore-text-secondary); margin-top: 0.5rem; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- Tiers ladder ---------------------------------- */ .tiers { display: grid; gap: 1rem; } .tier { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; background: var(--nexacore-bg-surface); border: 1px solid var(--nexacore-border-default); border-left: 3px solid var(--nexacore-border-accent); border-radius: var(--nexacore-radius); padding: 1.1rem 1.4rem; } .tier__idx { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-sm); color: var(--nexacore-text-tertiary); } .tier__body h4 { margin: 0 0 0.25em; } .tier__body p { margin: 0; font-size: var(--nexacore-text-sm); color: var(--nexacore-text-secondary); max-width: 48rem; } .tier__scale { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-sm); color: var(--nexacore-text-accent); white-space: nowrap; } @media (max-width: 640px) { .tier { grid-template-columns: auto 1fr; } .tier__scale { grid-column: 2; } } /* ---------- Manifesto band (petrol) ----------------------- */ .band { background: var(--nexacore-petrol-500); color: var(--nexacore-cream-300); } .band .wrap { padding-block: clamp(3rem, 7vw, 5.5rem); } .band__quote { font-family: var(--nexacore-font-display); font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 4vw, var(--nexacore-text-3xl)); line-height: var(--nexacore-leading-snug); color: var(--nexacore-cream-300); max-width: 30em; margin: 0; } .band__attr { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; color: var(--nexacore-petrol-200); margin-top: 1.5rem; } /* ---------- Pull quote (brand pattern) -------------------- */ .nexacore-pullquote { font-family: var(--nexacore-font-display); font-style: italic; font-weight: 600; font-size: var(--nexacore-text-2xl); line-height: var(--nexacore-leading-snug); color: var(--nexacore-text-accent); max-width: 38rem; padding-left: 1rem; border-left: 3px solid var(--nexacore-border-accent); margin: 2rem 0; } /* ---------- Code blocks ----------------------------------- */ .code { background: var(--nexacore-bg-code); border: 1px solid var(--nexacore-border-default); border-left: 3px solid var(--nexacore-border-accent); border-radius: var(--nexacore-radius); overflow: hidden; margin: 0 0 1.25rem; } .code__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--nexacore-border-default); background: color-mix(in srgb, var(--nexacore-bg-code) 70%, var(--nexacore-bg-surface)); } .code__name { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); color: var(--nexacore-text-secondary); } .code__tag { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); color: var(--nexacore-text-tertiary); text-transform: uppercase; } pre { margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto; font-family: var(--nexacore-font-mono); font-size: 0.86rem; line-height: var(--nexacore-leading-relaxed); color: var(--nexacore-text-primary); font-feature-settings: "liga" off, "calt" off; } code { font-family: var(--nexacore-font-mono); } p code, li code, td code { background: var(--nexacore-bg-code); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; color: var(--nexacore-text-accent); } /* token classes for the ncScript showcase */ .tok-c { color: var(--code-comment); font-style: italic; } .tok-k { color: var(--code-keyword); font-weight: 600; } .tok-s { color: var(--code-string); } .tok-n { color: var(--code-number); } .tok-a { color: var(--code-attr); } .tok-f { color: var(--nexacore-text-accent); } /* ---------- Tables ---------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--nexacore-border-default); border-radius: var(--nexacore-radius); } table { border-collapse: collapse; width: 100%; font-size: var(--nexacore-text-sm); } caption { text-align: left; font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; color: var(--nexacore-text-secondary); padding: 0.75rem 1rem; } th, td { text-align: left; padding: 0.65rem 1rem; border-bottom: 1px solid var(--nexacore-border-default); vertical-align: top; } thead th { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; color: var(--nexacore-text-secondary); background: var(--nexacore-bg-surface-2); } tbody tr:last-child td { border-bottom: 0; } td code { white-space: nowrap; } /* ---------- Definition list / spec rows ------------------- */ .spec { display: grid; grid-template-columns: 12rem 1fr; gap: 0.25rem 1.5rem; } .spec dt { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; color: var(--nexacore-text-secondary); padding-top: 0.85rem; border-top: 1px solid var(--nexacore-border-default); } .spec dd { margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--nexacore-border-default); font-size: var(--nexacore-text-sm); } @media (max-width: 640px) { .spec { grid-template-columns: 1fr; } .spec dd { padding-top: 0.2rem; border-top: 0; } } /* ---------- Callout (honest / risk) ----------------------- */ .callout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--nexacore-bg-surface); border: 1px solid var(--nexacore-border-default); border-radius: var(--nexacore-radius); padding: 1.25rem 1.4rem; } .callout--risk { border-left: 3px solid var(--nexacore-brick-500); } .callout p { margin: 0; font-size: var(--nexacore-text-sm); color: var(--nexacore-text-secondary); max-width: 52rem; } .callout p + p { margin-top: 0.6em; } /* ---------- Inline note ----------------------------------- */ .note { font-size: var(--nexacore-text-sm); color: var(--nexacore-text-tertiary); } /* ---------- TOC (tech page) ------------------------------- */ .toc { position: sticky; top: 80px; align-self: start; } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--nexacore-border-default); } .toc li { margin: 0; } .toc a { display: block; padding: 0.35rem 0 0.35rem 1rem; margin-left: -1px; border-left: 1px solid transparent; font-size: var(--nexacore-text-sm); color: var(--nexacore-text-secondary); text-decoration: none; } .toc a:hover { color: var(--nexacore-text-accent); border-left-color: var(--nexacore-border-accent); } .doc-layout { display: grid; grid-template-columns: 14rem 1fr; gap: clamp(2rem, 5vw, 4rem); } @media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .toc { display: none; } } .doc-body > section { padding-top: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 84px; } .doc-body h2 { margin-top: 0; } /* ---------- Footer ---------------------------------------- */ .footer { background: var(--nexacore-bg-inverse); color: var(--nexacore-text-inverse); } .footer .wrap { padding-block: clamp(3rem, 6vw, 4.5rem); } .footer__top { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; } .footer__brand { max-width: 24rem; } .footer__brand .tag { font-family: var(--nexacore-font-display); font-size: var(--nexacore-text-lg); color: var(--nexacore-text-inverse); margin: 0.75rem 0 0; } .footer__cols { display: flex; gap: clamp(2rem, 6vw, 4rem); flex-wrap: wrap; } .footer__col h5 { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wider); text-transform: uppercase; color: var(--nexacore-petrol-200); margin: 0 0 0.75rem; } .footer__col a { display: block; color: var(--nexacore-text-inverse); opacity: 0.85; text-decoration: none; font-size: var(--nexacore-text-sm); padding: 0.25rem 0; } .footer__col a:hover { opacity: 1; text-decoration: underline; } .footer__mark { width: 30px; height: 30px; } .footer hr { border-top-color: color-mix(in srgb, var(--nexacore-text-inverse) 18%, transparent); margin: 2.5rem 0 1.5rem; } .nexacore-doc-fingerprint { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); color: var(--nexacore-text-tertiary); } .footer .nexacore-doc-fingerprint { color: color-mix(in srgb, var(--nexacore-text-inverse) 60%, transparent); } /* In the petrol footer the federated ring should read in cream */ .footer .nav__brand { color: var(--nexacore-text-inverse); } /* ---------- Utilities ------------------------------------- */ .lead { font-size: var(--nexacore-text-lg); color: var(--nexacore-text-secondary); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .flow > * + * { margin-top: 1.1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ ADDENDUM — diagrams, figures, motion, ncScript playground ============================================================ */ /* ---------- Scroll-reveal (progressive enhancement) -------- */ /* Hidden state applies only when JS is active (html.js), so the page is fully readable with JavaScript disabled. */ html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: none; } html.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } html.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; } html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .07s; } html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .14s; } html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .21s; } html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .28s; } html.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .35s; } @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Figures & diagrams ----------------------------- */ .figure { margin: clamp(1.5rem, 4vw, 2.5rem) 0; } .figure img { display: block; width: 100%; height: auto; border: 1px solid var(--nexacore-border-default); border-radius: var(--nexacore-radius); } .figure figcaption { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); color: var(--nexacore-text-tertiary); margin-top: .7rem; } .diagram { background: var(--nexacore-bg-surface); border: 1px solid var(--nexacore-border-default); border-radius: var(--nexacore-radius); padding: clamp(1.1rem, 3vw, 2rem); overflow: hidden; } .diagram svg { display: block; width: 100%; height: auto; } .diagram--inset { background: var(--nexacore-bg-surface-2); } .diagram-label { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; fill: var(--nexacore-text-secondary); } .diagram-title { font-family: var(--nexacore-font-body); font-weight: 600; fill: var(--nexacore-text-primary); } .diagram-sub { font-family: var(--nexacore-font-mono); fill: var(--nexacore-text-tertiary); } .d-box { fill: var(--nexacore-bg-surface); stroke: var(--nexacore-border-strong); } .d-box-2 { fill: var(--nexacore-bg-surface-2); stroke: var(--nexacore-border-default); } .d-petrol { fill: var(--nexacore-petrol-500); } .d-petrol-soft { fill: var(--nexacore-petrol-50); stroke: var(--nexacore-border-accent); } .d-stroke { stroke: var(--nexacore-rule); fill: none; } .d-stroke-strong { stroke: var(--nexacore-petrol-400); fill: none; } .d-anchor { fill: var(--nexacore-brick-500); } .d-text { font-family: var(--nexacore-font-body); fill: var(--nexacore-text-primary); } .d-text-mono { font-family: var(--nexacore-font-mono); fill: var(--nexacore-text-secondary); } .d-text-on-petrol { fill: var(--nexacore-cream-300); } /* ---------- Animated federated-mesh (hero) ----------------- */ .mesh-hero { width: min(360px, 78%); height: auto; } .mesh-hero .ml { stroke: var(--nexacore-petrol-300); stroke-width: 1.25; fill: none; } .mesh-hero .mn { fill: var(--nexacore-petrol-500); } .mesh-hero .mring { fill: none; stroke: var(--nexacore-petrol-200); stroke-width: 1; } .mesh-hero .manchor { fill: var(--nexacore-brick-500); } @media (prefers-reduced-motion: no-preference) { .mesh-hero .ml { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mesh-draw 1.4s ease forwards; } .mesh-hero .mn { opacity: 0; animation: mesh-pop .5s ease forwards; } .mesh-hero .mring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mesh-draw 2.2s ease forwards; } .mesh-hero .manchor { transform-origin: center; opacity: 0; animation: mesh-pop .6s ease .9s forwards; } @keyframes mesh-draw { to { stroke-dashoffset: 0; } } @keyframes mesh-pop { to { opacity: 1; } } } /* ---------- ncScript playground -------------------------- */ .oms-pg { margin: 1.5rem 0 0.5rem; } .oms-pg__examples { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; } .oms-ex { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: .02em; background: var(--nexacore-bg-surface); color: var(--nexacore-text-secondary); border: 1px solid var(--nexacore-border-default); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; white-space: nowrap; } .oms-ex:hover { color: var(--nexacore-text-accent); border-color: var(--nexacore-border-accent); } .oms-ex[aria-pressed="true"] { background: var(--nexacore-petrol-500); color: var(--nexacore-cream-300); border-color: var(--nexacore-petrol-500); } .oms-pg__main { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 820px) { .oms-pg__main { grid-template-columns: 1fr; } } .oms-pg__editor, .oms-pg__out { background: var(--nexacore-bg-code); border: 1px solid var(--nexacore-border-default); border-left: 3px solid var(--nexacore-border-accent); border-radius: var(--nexacore-radius); overflow: hidden; } .oms-pg__code { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 17rem; border: 0; outline: none; background: transparent; color: var(--nexacore-text-primary); font-family: var(--nexacore-font-mono); font-size: .86rem; line-height: var(--nexacore-leading-relaxed); padding: 1rem 1.1rem; tab-size: 2; } .oms-pg__code:focus { box-shadow: inset 0 0 0 2px var(--nexacore-focus-ring); } .oms-pg__actions { display: flex; gap: .5rem; padding: .65rem 1rem; border-top: 1px solid var(--nexacore-border-default); background: color-mix(in srgb, var(--nexacore-bg-code) 70%, var(--nexacore-bg-surface)); } .oms-pg__actions .btn { min-height: 36px; padding: .45rem .9rem; } .oms-pg__console { padding: 1rem 1.1rem; min-height: 13rem; font-family: var(--nexacore-font-mono); font-size: .84rem; line-height: var(--nexacore-leading-relaxed); white-space: pre-wrap; word-break: break-word; color: var(--nexacore-text-primary); } .oms-cap { color: var(--nexacore-text-secondary); } .oms-cap b { color: var(--nexacore-text-accent); font-weight: 600; } .oms-print { color: var(--nexacore-text-primary); } .oms-value { color: var(--nexacore-sage-700); } .oms-err { color: var(--nexacore-brick-500); } .oms-muted { color: var(--nexacore-text-tertiary); } [data-nexacore-theme="dark"] .oms-value { color: var(--nexacore-sage-300); } @media (prefers-color-scheme: dark) { :root:not([data-nexacore-theme="light"]) .oms-value { color: var(--nexacore-sage-300); } } [data-nexacore-theme="dark"] .oms-err { color: var(--nexacore-brick-300); } @media (prefers-color-scheme: dark) { :root:not([data-nexacore-theme="light"]) .oms-err { color: var(--nexacore-brick-300); } } .oms-status-ok { color: var(--nexacore-sage-700); } .oms-status-err { color: var(--nexacore-brick-500); } /* ---------- ncScript guided tutorial --------------------- */ .oms-tut { margin: 1.5rem 0 0.5rem; } .oms-tut__head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .85rem; } .oms-tut__progress { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .oms-tut__count { font-family: var(--nexacore-font-mono); font-size: var(--nexacore-text-xs); letter-spacing: var(--nexacore-tracking-wide); text-transform: uppercase; color: var(--nexacore-text-secondary); white-space: nowrap; } .oms-tut__dots { display: inline-flex; gap: 5px; flex-wrap: wrap; } .oms-tut__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--nexacore-border-strong); background: transparent; cursor: pointer; } .oms-tut__dot:hover { border-color: var(--nexacore-border-accent); } .oms-tut__dot[aria-current="true"] { background: var(--nexacore-petrol-500); border-color: var(--nexacore-petrol-500); } .oms-tut__nav { display: flex; align-items: center; gap: .5rem; } .oms-tut__btn { min-height: 36px; padding: .4rem .8rem; } .oms-tut__btn:disabled { opacity: .4; cursor: not-allowed; } .oms-tut__jump { font-family: var(--nexacore-font-body); font-size: var(--nexacore-text-sm); color: var(--nexacore-text-primary); background: var(--nexacore-bg-surface); border: 1px solid var(--nexacore-border-strong); border-radius: var(--nexacore-radius); padding: .4rem .5rem; max-width: 14rem; } .oms-tut__lesson { background: var(--nexacore-bg-surface-2); border: 1px solid var(--nexacore-border-default); border-left: 3px solid var(--nexacore-border-accent); border-radius: var(--nexacore-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; } .oms-tut__lesson h4 { margin: 0 0 .4em; font-family: var(--nexacore-font-body); font-weight: 600; font-size: var(--nexacore-text-lg); color: var(--nexacore-text-accent); } .oms-tut__prose { font-size: var(--nexacore-text-sm); color: var(--nexacore-text-secondary); line-height: var(--nexacore-leading-normal); max-width: 60ch; } .oms-tut__prose code { background: var(--nexacore-bg-code); padding: .08em .35em; border-radius: 3px; font-size: .9em; color: var(--nexacore-text-accent); } /* ---------- Print (Save as PDF) ---------------------------- */ @media print { .no-print { display: none !important; } :root, [data-nexacore-theme="dark"], [data-nexacore-theme="light"] { --nexacore-bg-canvas: #ffffff; --nexacore-bg-surface: #ffffff; --nexacore-bg-surface-2: #F8F0DA; --nexacore-bg-code: #F1F6F7; --nexacore-bg-inverse: #1F2421; --nexacore-text-primary: #1F2421; --nexacore-text-secondary: #3E423E; --nexacore-text-tertiary: #5E635E; --nexacore-text-accent: #0F4C5C; --nexacore-text-link: #0F4C5C; --nexacore-text-link-hover: #0A323C; --nexacore-border-default: #DCDEDC; --nexacore-border-strong: #888D88; --nexacore-border-accent: #6390A0; --nexacore-rule: #94B3BC; --code-keyword: #0C3E4B; --code-string: #587657; --code-comment: #5E635E; --code-number: #8F2519; --code-attr: #0A323C; } html, body { background: #fff !important; color: #1F2421 !important; } html.js .reveal, html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .section { padding-block: 0 !important; } .wrap { max-width: none !important; padding-inline: 0 !important; } .doc-layout { display: block !important; } a { text-decoration: none !important; } h1, h2, h3 { break-after: avoid; } .code, pre, .table-wrap, figure, .callout, tr { break-inside: avoid; } pre { white-space: pre-wrap; word-break: break-word; } @page { margin: 16mm 14mm; } } /* long manual TOC scrolls within the viewport */ .toc { max-height: calc(100vh - 96px); overflow-y: auto; }