/* @import must precede all other rules. Pulls in Fraunces (serif display) from Google Fonts so its @font-face lives in this stylesheet's closure. When the brand provides a licensed Fraunces file, self-host it and drop this line. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300&display=swap'); /* ============================================================================ QUANTUM SPACES — Foundations: Color + Type The Quantum Spaces Project, Inc. — institutional surface (quantumspaces.ai) Source of truth: qs-marketing/index.html (claude-design-share @ main) ---------------------------------------------------------------------------- Sister brand to FriendlyPhotons (friendlyphotons.ai). Same Plus Jakarta Sans + teal anchor, but QS reads HEAVIER: serious, institutional, NYT-business — leans on the dark teals (teal-dark) and ink/night neutrals, less teal-light. ============================================================================ */ /* ── FONT FACES ────────────────────────────────────────────────────────────── Plus Jakarta Sans: bundled .ttf (uploaded by the brand). The body + UI face. Fraunces: the serif DISPLAY face for headlines — loaded from Google Fonts in production (no file was provided). Import it in your HTML : ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* ── NEUTRALS — INK (warm near-black text scale) ───────────────────────── */ --ink: #111110; /* primary text, logo, buttons */ --ink-2: #3A3A38; /* secondary text / hover-ink */ --ink-3: #6B6B68; /* body copy, muted labels */ --ink-4: #9B9B98; /* tertiary, captions, disabled, mono */ /* ── NEUTRALS — PAPER (warm off-white surface scale) ───────────────────── */ --paper: #FAFAF8; /* page background */ --paper-2: #F2F1EE; /* raised surface / section tint */ --paper-3: #E8E7E3; /* deeper tint / pressed */ /* ── NEUTRALS — NIGHT (dark institutional sections) ────────────────────── */ --night: #0E0F0D; /* dark section background */ --night-2: #181A17; /* dark section, slightly lifted */ /* ── BRAND — TEAL (the anchor; QS leans dark) ──────────────────────────── */ --teal: #1D9E75; /* primary teal — links, accents, CTA */ --teal-mid: #5DCAA5; /* on-dark teal (eyebrows over night) */ --teal-light: #E1F5EE; /* teal tint surface (use sparingly) */ --teal-dark: #085041; /* deep teal — hover, headings-on-tint */ /* ── BORDERS (hairline system, opacity-based) ──────────────────────────── */ --border: rgba(0,0,0,0.08); /* 0.5px hairline default */ --border-md: rgba(0,0,0,0.14); /* card / input border */ --border-on-dark: rgba(255,255,255,0.08); /* hairlines over night */ /* ── TYPEFACES ─────────────────────────────────────────────────────────── */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; /* display */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* body + UI */ --font-mono: 'Courier New', ui-monospace, monospace; /* meta/tags */ /* ── RADII ─────────────────────────────────────────────────────────────── */ --r-sm: 4px; /* buttons, inputs, small chips */ --r-md: 8px; /* link lists, panels */ --r-lg: 14px; /* cards, dark boxes, modals */ --r-pill: 100px; /* pill buttons, tags */ /* ── ELEVATION (very restrained — borders do most of the work) ─────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 8px 24px rgba(0,0,0,0.08); --shadow-lg: 0 32px 100px rgba(0,0,0,0.32); /* modal only */ /* ── SPACING (section rhythm) ──────────────────────────────────────────── */ --space-section: 6rem; /* vertical padding for full sections */ --container: 1080px; /* max content width */ } /* ============================================================================ SEMANTIC TYPE — drop-in element styles Display headlines = Fraunces 600 w/ tight tracking. Body = Plus Jakarta 300/400. Eyebrows + meta = uppercase, letter-spaced. Mono = Courier for technical tags. ============================================================================ */ .qs-h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.06; letter-spacing: -0.025em; color: var(--ink); } .qs-h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); } .qs-h3 { font-family: var(--font-serif); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); } .qs-h2-em, /* italic light serif — the "voice" accent */ .qs-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--ink-3); } .qs-lead { /* large intro paragraph */ font-family: var(--font-sans); font-weight: 300; font-size: 17px; line-height: 1.72; color: var(--ink-3); } .qs-body { /* default paragraph */ font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--ink-3); } .qs-body strong { font-weight: 500; color: var(--ink-2); } .qs-eyebrow { /* section kicker */ font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); } .qs-eyebrow-teal { color: var(--teal); } .qs-label { /* uppercase form / column label */ font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dark); } .qs-mono { /* technical meta / timestamps / IDs */ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-4); } /* On-dark variants (night sections) */ .qs-on-dark { color: rgba(255,255,255,0.55); } .qs-on-dark-strong { color: rgba(255,255,255,0.9); } .qs-h2.on-dark, .qs-h3.on-dark { color: #fff; } .qs-eyebrow.on-dark { color: var(--teal-mid); }