/* ═══════════════════════════════════════════════════════════════ NqshLab — shared design tokens and base components. Single source of truth for the site's visual system. Every page links this file; no page should hardcode a brand color, font, or button style of its own. Theming: light is the default, defined on :root. Dark is an override under [data-theme="dark"], set on by theme.js before first paint and persisted in localStorage under 'nqsh_theme'. Nothing here reads prefers-color-scheme — the toggle is the single source of truth so the choice survives navigation between pages. ═══════════════════════════════════════════════════════════════ */ /* ── Typeface ───────────────────────────────────────────────── Paths are root-relative to this file, which sits beside the font directory. */ @font-face { font-family: 'ThmanyahSans'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSans'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSans'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSans'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSans'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSerifDisplay'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSerifDisplay'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSerifDisplay'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSerifDisplay'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'ThmanyahSerifDisplay'; src: url('Thmanyah-Font-Family/thmanyah typeface/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* ── LIGHT (default) ────────────────────────────────────────── Warm paper ground, deep navy ink. Brand blue is reserved for the logo mark, links, and interactive accents — it is never a surface or a body-text color. */ :root { color-scheme: light; /* ground */ --bg: #F7F4EC; --bg-deep: #EFEBE0; --surface: #FDFCF7; --surface-hi: #FFFFFF; --section-alt: rgba(16,23,58,0.025); --nav-bg: rgba(247,244,236,0.92); /* ink */ --fg: #10173A; --fg-hi: rgba(16,23,58,0.87); --fg-md: rgba(16,23,58,0.66); --fg-lo: rgba(16,23,58,0.52); --fg-vl: rgba(16,23,58,0.4); --fg-ul: rgba(16,23,58,0.28); /* rules */ --border: rgba(16,23,58,0.16); --border-hi: rgba(16,23,58,0.3); --border-sm: rgba(16,23,58,0.09); /* brand accent */ --teal: #42A9E6; --teal-link: #1D6FA8; --teal-md: rgba(29,111,168,0.75); --teal-lo: rgba(29,111,168,0.55); --teal-vl: rgba(66,169,230,0.22); --teal-ul: rgba(66,169,230,0.1); --teal-surface: rgba(66,169,230,0.1); --teal-brd: rgba(66,169,230,0.4); /* inverted band — the page's one dark moment */ --band-bg: #0B1233; --band-fg: #F7F4EC; --band-mut: rgba(247,244,236,0.6); --band-kick: rgba(247,244,236,0.45); --band-line: rgba(247,244,236,0.35); --band-line-hi: rgba(247,244,236,0.8); /* Eyebrow accent. Held at one value across both themes so the section labels read identically light and dark, as on the landing page this system was taken from. */ --amber: #F5C518; /* status — darkened so they carry on a paper ground */ --ok: #147A5C; --ok-surface: rgba(20,122,92,0.08); --ok-border: rgba(20,122,92,0.24); --warn: #9A6410; --warn-surface: rgba(154,100,16,0.08); --warn-border: rgba(154,100,16,0.24); --info: #5B41A8; --info-surface: rgba(91,65,168,0.08); --info-border: rgba(91,65,168,0.24); --red: #C2402E; --red-surface: rgba(194,64,46,0.07); --red-border: rgba(194,64,46,0.28); --mute: rgba(16,23,58,0.64); /* carries AA as badge text */ --mute-surface: rgba(16,23,58,0.05); --mute-border: rgba(16,23,58,0.14); } /* ── DARK ───────────────────────────────────────────────────── Same system, roles swapped: deep ink ground, warm paper type. The band lifts to a raised navy rather than inverting to paper, which would flash white between two dark sections. */ [data-theme="dark"] { color-scheme: dark; --bg: #0F1430; --bg-deep: #0B0F26; --surface: #151A3C; --surface-hi: #1A2047; --section-alt: rgba(241,239,231,0.03); --nav-bg: rgba(15,20,48,0.92); --fg: #F1EFE7; --fg-hi: rgba(241,239,231,0.88); --fg-md: rgba(241,239,231,0.64); --fg-lo: rgba(241,239,231,0.5); --fg-vl: rgba(241,239,231,0.38); --fg-ul: rgba(241,239,231,0.26); --border: rgba(241,239,231,0.16); --border-hi: rgba(241,239,231,0.32); --border-sm: rgba(241,239,231,0.09); --teal: #42A9E6; --teal-link: #6FBFEB; --teal-md: rgba(111,191,235,0.75); --teal-lo: rgba(111,191,235,0.55); --teal-vl: rgba(66,169,230,0.25); --teal-ul: rgba(66,169,230,0.12); --teal-surface: rgba(66,169,230,0.12); --teal-brd: rgba(66,169,230,0.38); --band-bg: #1B2250; --band-fg: #F1EFE7; --band-mut: rgba(241,239,231,0.64); --band-kick: rgba(241,239,231,0.48); --band-line: rgba(241,239,231,0.35); --band-line-hi: rgba(241,239,231,0.8); --amber: #F5C518; /* same hue families, lifted for contrast on the dark ground */ --ok: #3FD1A5; --ok-surface: rgba(63,209,165,0.1); --ok-border: rgba(63,209,165,0.28); --warn: #FBBF24; --warn-surface: rgba(251,191,36,0.1); --warn-border: rgba(251,191,36,0.28); --info: #A78BFA; --info-surface: rgba(167,139,250,0.1); --info-border: rgba(167,139,250,0.28); --red: #E06A57; --red-surface: rgba(224,106,87,0.1); --red-border: rgba(224,106,87,0.32); --mute: rgba(241,239,231,0.56); /* carries AA as badge text */ --mute-surface: rgba(241,239,231,0.06); --mute-border: rgba(241,239,231,0.16); } /* ── Base ─────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; background: var(--bg); } body { background: var(--bg); color: var(--fg); font-family: 'ThmanyahSans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } select option { background: var(--surface); color: var(--fg); } /* ── Panels ─────────────────────────────────────────────────── Solid on paper — hairline border, whisper of shadow. Flat: no translucency, no lift on hover. */ .panel { background: var(--surface); border: 1px solid var(--border-sm); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,23,58,0.05); } [data-theme="dark"] .panel { box-shadow: 0 1px 2px rgba(0,0,0,0.3); } .fade-top { border-top: 1px solid var(--border-sm); } /* ── Eyebrow ────────────────────────────────────────────────── Mono label above section headings — the logo mark, then bold amber small caps. No pill, no border. The mark is a rule with a dot floating above it, so each eyebrow reads as the brand at small size: ink rule, brand-blue dot, taken from the master mark (brand_identity/nqshlab-icon.svg). The dot bounces on a loop, and holds still for anyone who asks for reduced motion. inset-inline-start keeps it on the rule's leading edge in both LTR and RTL. */ .kicker { position: relative; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: var(--amber); } .kicker::before { content: ''; width: 22px; height: 2px; background: var(--fg); flex-shrink: 0; } .kicker::after { content: ''; position: absolute; border-radius: 50%; inset-inline-start: 4px; top: calc(50% - 10px); width: 7px; height: 7px; background: var(--teal); animation: kickerBounce 1.1s ease-in-out infinite; } @keyframes kickerBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .kicker::after { animation: none; } } /* ── Buttons ────────────────────────────────────────────────── Solid ink and hairline outline. The ink button warms to the link blue on hover — no gradients, no clipped corners. In dark mode the ink button inverts to paper-on-navy, which falls out of --fg/--bg swapping rather than a separate rule. */ .btn-ink { background: var(--fg); color: var(--bg); border: none; border-radius: 8px; cursor: pointer; transition: background .15s ease; } .btn-ink:hover { background: var(--teal-link); } .btn-line { background: transparent; border: 1px solid var(--border-hi); color: var(--fg); border-radius: 8px; cursor: pointer; transition: border-color .15s ease; } .btn-line:hover { border-color: var(--fg); } /* Variants for the inverted band (band colors swap per theme). */ .btn-paper { background: var(--band-fg); color: var(--band-bg); border: none; border-radius: 8px; cursor: pointer; transition: opacity .15s ease; } .btn-paper:hover { opacity: 0.88; } .btn-line-paper { background: transparent; border: 1px solid var(--band-line); color: var(--band-fg); border-radius: 8px; cursor: pointer; transition: border-color .15s ease; } .btn-line-paper:hover { border-color: var(--band-line-hi); } /* ── Annotation mark ────────────────────────────────────────── The nqsh mark applied as a live annotation. At display size (hero) it's the flat brand rule under the phrase; the floating dot only appears in the specimen card, where the loose line height gives it room to sit above the marked span. */ .anno-h1 { border-bottom: 4px solid var(--teal); padding-bottom: 0.04em; } .anno-spec { position: relative; border-bottom: 2px solid var(--teal); padding-bottom: 1px; } .anno-spec::before { content: ''; position: absolute; border-radius: 50%; background: var(--teal); inset-inline-start: 0; width: 6px; height: 6px; top: -0.65em; }