/* ============================================================================
VENDORED FILE — DO NOT EDIT BY HAND.
Verbatim copy of the canonical CCI design system:
repo: cybercraft-institute/cci-styles
file: cci.css
commit: ca51fdfbe452710bfb71c88c6c89fa5836937a21
Refresh: npm run sync:cci-styles
Check drift: npm run sync:cci-styles -- --check
Update: bump PINNED_COMMIT in scripts/sync-cci-styles.mjs, then refresh.
============================================================================ */
/* ============================================================================
CyberCraft Institute — shared UI / design system (cci.css)
ONE canonical stylesheet for every CCI subdomain: Chat, Events, Members (MMS),
Network, and the Forum. Dark theme over a vertical gradient, a single yellow
accent (#ffed00), Outfit + IBM Plex Mono, sharp corners, semi-transparent
"frosted" panels with a subtle drop shadow.
── Usage ──────────────────────────────────────────────────────────────────
1. Load the brand fonts in (they must be loaded by the host page):
2. Link this stylesheet:
This file is self-contained: it includes the design tokens (also available
on their own in tokens.css), a reset/base, typography, form controls,
buttons, cards, badges, tables, and header/footer/nav patterns.
============================================================================ */
/* ---- Design tokens -------------------------------------------------------- */
:root {
/* Brand palette */
--cci-black: #0e0e10;
--cci-white: #ffffff;
--cci-yellow: #ffed00;
--cci-yellow-soft: rgba(255, 237, 0, 0.14);
--cci-text-highlight: #ffed0066;
--cci-ink: #f4f4f6;
--cci-body: #c7c7cd;
--cci-muted: #a4a4ac;
--cci-hairline: rgba(255, 255, 255, 0.16);
/* Semantic colours (dark theme) */
--color-bg: #0e0e10;
--color-surface: rgba(255, 255, 255, 0.04);
--color-surface-alt: rgba(255, 255, 255, 0.07);
--color-border: rgba(255, 255, 255, 0.16);
--color-text: #c7c7cd;
--color-heading: #f4f4f6;
--color-text-muted: #a4a4ac;
--color-primary: #f4f4f6;
--color-accent: #ffed00;
--color-on-primary: #111114;
--color-on-accent: #111114;
--color-highlight: var(--cci-yellow-soft);
--color-danger: #ff6b6b;
--color-danger-soft: rgba(255, 107, 107, 0.1); /* tinted danger fill (notices) */
--color-success: #4ade80;
/* Form controls (frosted, semi-transparent) */
--input-bg: rgba(255, 255, 255, 0.06);
--input-border: rgba(255, 255, 255, 0.28);
/* Overlay / popup surfaces ("frosted glass") — floating "windows" over page
content (popovers, search, drawers). See .cci-overlay and tokens.css for
the backdrop-filter implementer notes. */
--overlay-bg: rgba(0, 0, 0, 0.65);
--overlay-blur: blur(16px) saturate(1.1);
/* Typography */
--font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.375rem;
--font-size-2xl: 1.75rem;
--line-height: 1.6;
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
/* Radius & elevation (sharp corners; avatars/pills stay round) */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-full: 999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.35);
/* Layout */
--content-width: 70rem;
--feed-width: 640px;
--header-height: 64px;
--bp-mobile: 640px; /* responsive-nav collapse; CSS @media can't read a var, so the media queries hardcode 640px — keep them in sync. Apps may read this via getComputedStyle. */
--cci-gradient: linear-gradient(to bottom, #60606a 0%, #0e0e10 100%);
color-scheme: dark;
}
/* ---- Reset & base --------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height);
color: var(--color-text);
/* Fixed so the gradient covers the viewport and never tiles under long pages. */
background: var(--cci-gradient) no-repeat fixed;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
main {
flex: 1 0 auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
color: var(--color-heading);
line-height: 1.2;
font-weight: 600;
}
a {
color: var(--color-heading);
text-decoration: none;
transition: color 120ms;
}
a:hover,
a:focus-visible {
text-decoration: underline solid var(--cci-yellow);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
outline: none;
}
code,
pre,
kbd {
font-family: var(--font-mono);
}
::selection {
background: var(--cci-text-highlight);
}
/* Readable match / search highlight: solid yellow with DARK text — light text
on yellow is hard to read. Distinct from ::selection (--cci-text-highlight)
and the faint inline tint (--color-highlight). */
mark,
.cci-mark {
background: var(--cci-yellow);
color: var(--color-on-accent);
padding: 0 0.1em;
border-radius: var(--radius-sm);
}
button {
font: inherit;
}
/* ---- Form controls -------------------------------------------------------- */
/* Frosted/transparent over the gradient. Fields never exceed their container;
textareas resize vertically only (default `resize: both` lets them spill out). */
input,
select,
textarea {
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-heading);
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius-sm);
padding: 0.6rem 0.8rem;
max-width: 100%;
}
textarea {
resize: vertical;
}
input::placeholder,
textarea::placeholder {
color: var(--color-text-muted);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--cci-yellow);
outline-offset: 0;
border-color: var(--color-heading);
}
/* Native