/* ───────────────────────────────────────────────────────────────────────────── HumAInity Rocks — Foundations Colors, type, spacing, radii, shadows. Import once at the top of any artifact. The brand orbits around three ideas: • A neutral STAGE (warm paper white by default; ink navy when dark) • A single COBALT used flat for the "human" structural elements • A warm MAGENTA → ORANGE gradient reserved for the "AI" elements only — the letters "AI" inside HumAInity, the mark's crescent, nowhere else. Default theme is LIGHT. Dark theme available via `.theme-dark` on . ──────────────────────────────────────────────────────────────────────────── */ /* ── Type imports ─────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { /* ── Brand palette (locked from the official wordmark) ───────────────────── */ --brand-cobalt: #1F5FFF; /* "humans" — flat color, structural */ --brand-magenta: #FC2F7A; /* AI gradient start */ --brand-orange: #FF8A00; /* AI gradient end */ --ink-navy: #0A1A2F; /* primary text on paper */ --brand-grad: linear-gradient(110deg, var(--brand-magenta) 0%, var(--brand-orange) 100%); --brand-grad-flat: var(--brand-grad); /* Legacy aliases — older code may still reference these */ --brand-cyan: var(--brand-cobalt); --brand-blue: var(--brand-cobalt); --brand-emerald: var(--brand-magenta); --brand-lime: var(--brand-orange); --brand-amber: var(--brand-orange); --brand-violet: var(--brand-orange); --accent-crimson: var(--brand-magenta); --accent-crimson-2: #B81753; --accent-ember: var(--brand-orange); /* ── Stage (default = LIGHT, warm paper — matches the brand wordmark) ───── */ --stage-0: #F6F4EF; /* page — warm paper */ --stage-1: #FFFFFF; /* surface */ --stage-2: #FFFFFF; /* card */ --stage-3: #F0EDE6; /* raised card / input bg */ --stage-4: #E5E1D8; /* hover / divider lift */ --line-1: #E5E1D8; --line-2: #D7D2C6; /* Foreground on paper */ --fg-1: var(--ink-navy); --fg-2: #3D424C; --fg-3: #6B7180; --fg-4: #A1A6B1; /* ── Semantic ────────────────────────────────────────────────────────────── */ /* Saturated print colors — readable on white, kräftig but not glowing. */ --ok: #0FA968; --ok-soft: rgba(15, 169, 104, 0.12); --warn: #E58A00; --warn-soft: rgba(229, 138, 0, 0.14); --danger: #DC2640; --danger-soft: rgba(220, 38, 64, 0.14); --info: var(--brand-cobalt); --info-soft: rgba(31, 95, 255, 0.10); /* Lifecycle phase chips (charter-specific semantics) */ --phase-shadow: #6B7180; --phase-suggest: var(--brand-cobalt); --phase-act: var(--warn); --phase-autonomous: var(--ok); /* ── Type system ─────────────────────────────────────────────────────────── */ --font-display: "Space Grotesk", "Söhne Breit", system-ui, sans-serif; --font-body: "IBM Plex Sans", "SF Pro Text", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scale (px @ 1rem = 16px) */ --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1rem; --t-lg: 1.1875rem; --t-xl: 1.5rem; --t-2xl: 2rem; --t-3xl: 2.75rem; --t-4xl: 4rem; --t-5xl: 6rem; --t-6xl: 8.5rem; --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-display: -0.025em; --tracking-eyebrow: 0.18em; --tracking-body: -0.005em; /* ── Space, radius, motion ──────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-5: 28px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(10,26,47,0.05); --shadow-2: 0 8px 24px -10px rgba(10,26,47,0.16); --shadow-3: 0 24px 60px -24px rgba(10,26,47,0.22); --glow-brand: 0 0 0 1px rgba(252,47,122,0.30), 0 12px 36px -10px rgba(255,138,0,0.40); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; --container: 1240px; --gutter: 24px; } /* ── Dark theme override — opt-in for hero panels, deck slides, posters ─── */ .theme-dark { --stage-0: #0A1A2F; /* the brand's own ink navy */ --stage-1: #0F2238; --stage-2: #142A45; --stage-3: #1B3454; --stage-4: #244065; --line-1: #1F3859; --line-2: #2A4670; --fg-1: #F4F5F7; --fg-2: #B7BCC6; --fg-3: #8B95A8; --fg-4: #5C6680; --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px -8px rgba(0,0,0,0.55); --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.7); } /* Light theme override — explicit class (default is already light) */ .theme-light { --stage-0: #F6F4EF; --stage-1: #FFFFFF; --stage-2: #FFFFFF; --stage-3: #F0EDE6; --stage-4: #E5E1D8; --line-1: #E5E1D8; --line-2: #D7D2C6; --fg-1: var(--ink-navy); --fg-2: #3D424C; --fg-3: #6B7180; --fg-4: #A1A6B1; } /* ───────────────────────────────────────────────────────────────────────────── Semantic element styles. Use these directly via tag selectors in artifacts. ──────────────────────────────────────────────────────────────────────────── */ html, body { background: var(--stage-0); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-normal); letter-spacing: var(--tracking-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--fg-1); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); text-wrap: balance; margin: 0; } h1 { font-size: var(--t-4xl); font-weight: 500; } h2 { font-size: var(--t-3xl); } h3 { font-size: var(--t-2xl); font-weight: 500; } h4 { font-size: var(--t-xl); font-weight: 500; line-height: var(--lh-snug); } h5 { font-size: var(--t-lg); font-family: var(--font-display); font-weight: 500; margin: 0; } p { margin: 0; text-wrap: pretty; color: var(--fg-2); max-width: 64ch; } /* Eyebrow label — uppercase mono tag above headers ("01 · CHARTER") */ .eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-3); font-weight: 500; } code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; } a { color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--fg-4); text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); } a:hover { text-decoration-color: var(--brand-cobalt); } hr { border: 0; border-top: 1px solid var(--line-1); margin: var(--s-6) 0; } /* The brand gradient on text — magenta → orange — used on the literal letters "AI" inside HumAInity and the very occasional hero phrase. Never as a general accent. */ .ink-grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* A gradient hairline divider for hero/footer boundaries. */ .hairline-grad { height: 1px; background: var(--brand-grad); border: 0; opacity: 0.7; } /* Star-field background — cobalt + magenta + orange dots on paper. Pure CSS, no asset required. Auto-adapts to dark theme via stage-0. */ .bg-starfield { background-color: var(--stage-0); background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(31,95,255,0.16), transparent 50%), radial-gradient(1.5px 1.5px at 70% 80%, rgba(252,47,122,0.18), transparent 50%), radial-gradient(1.5px 1.5px at 45% 65%, rgba(255,138,0,0.18), transparent 50%), radial-gradient(1px 1px at 85% 20%, rgba(31,95,255,0.12), transparent 50%), radial-gradient(1px 1px at 10% 75%, rgba(252,47,122,0.10), transparent 50%); background-size: 240px 240px, 320px 320px, 480px 480px, 280px 280px, 360px 360px; } /* Tiny utility used by preview cards */ .fade-edge { mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }