/* ============================================================ agentsclub - Color & Type Foundations Gamified platform for learning CLI tools (incl. Claude Code) Direction (Styleguide v2): Editorial paper · bold orange accent · sharp corners · one typeface (Funnel Sans). ------------------------------------------------------------ Fonts are loaded from Google Fonts (CDN). Funnel Sans is used for everything (UI + reading prose); JetBrains Mono stays for the terminal / code / CLI surfaces (functional). ============================================================ */ /* Funnel Sans is self-hosted via css/v2/bridge.css (loaded after this file on every non-mgmt page) instead of Google Fonts - see that file's docblock. */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* ---- Font families ---- */ --font-ui: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-read: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ============================================================ CORE PALETTE - Light (default) · Styleguide v2 "Paper" Warm cream paper, bold orange accent, sharp editorial feel. ============================================================ */ /* Surfaces & ink */ --canvas: #ECE7DE; /* app background - warm paper */ --surface: #F6F3EC; /* cards, panels - light paper */ --surface-2: #E5DFD3; /* sunken / subtle fill */ --surface-3: #DCD4C6; /* track, disabled fill */ --fg-1: #1B1A17; /* primary text - ink */ --fg-2: #4A4741; /* secondary text (ink ~84%) */ --fg-3: #75706A; /* muted / captions / placeholders (ink ~60%) */ --fg-on-color: #FFFDF7; /* text on saturated brand/semantic fills */ --border-1: #E0DAD0; /* hairline borders (ink ~8%) */ --border-2: #D2CBBE; /* stronger borders / input outline (ink ~14%) */ /* ---- Brand: Orange (primary accent) ---- */ --primary: #DB511D; /* orange - the agentsclub brand accent */ --primary-hover: #C2461A; /* hover (darker) */ --primary-press: #A63C15; /* press / candy-button bottom edge */ --primary-soft: #FBE8DF; /* tint fill behind primary content */ --primary-ring: #EB9F82; /* focus ring / subtle outline */ /* ---- Secondary accent: Yellow ---- */ --accent-2: #F0BE12; /* yellow - underlines, tags, rewards */ --accent-2-soft: #FDF3D2; /* tint behind yellow content */ --accent-2-ink: #3A2C00; /* readable text on yellow fills */ /* ---- Background dot grid (subtle paper texture) ---- */ --grid: color-mix(in srgb, var(--fg-1) 6%, transparent); /* ---- Secondary: Ink (terminal / code) ---- */ --ink: #1B1A17; /* terminal window body, code blocks */ --ink-2: #26241F; /* terminal toolbar */ --ink-fg: #ECE7DE; /* mono text on ink */ /* ---- Terminal syntax + window chrome (themeable) ---- */ --term-prompt: #8FBE72; /* user@host (green) */ --term-path: #6FC3D6; /* cwd path (cyan) */ --term-dim: #8E867A; /* punctuation / dim output */ --term-cursor: var(--primary); --win-close: #FF5F57; /* macOS traffic lights */ --win-min: #FEBC2E; --win-max: #28C840; /* ============================================================ GAMIFICATION SEMANTICS - kept stable across the system. These are functional colors: XP, streak, hearts, gems, etc. ============================================================ */ --xp: #F0BE12; /* XP / stars - brand yellow */ --xp-soft: #FDF3D2; --streak: #F2790D; /* streak / flame 🔥 */ --streak-soft:#FDEAD7; --heart: #E5484D; /* hearts / lives ❤️ */ --heart-soft:#FBE3E3; --gem: #18B6C9; /* gems 💎 - cyan */ --gem-soft: #DAF3F6; /* ---- State semantics ---- */ --success: #3B7A4B; /* correct answer / completed */ --success-soft: #E2EEE4; --success-edge: #2C5C39; /* candy-button bottom edge */ --warning: #E8920C; --warning-soft: #FCEFD6; --danger: #C23B2E; /* wrong answer / destructive */ --danger-soft: #F7E1DE; --danger-edge: #9C2C21; --info: #2F6FE0; --info-soft: #E1EBFC; /* ============================================================ LEAGUE COLORS (weekly leaderboard, ascending tiers) ============================================================ */ --league-bronze: #B26B3B; --league-silver: #9AA3AD; --league-gold: #E8B53C; --league-diamond: #38C0DC; --league-pearl: #E9C4D4; --league-ruby: #D8344B; --league-emerald: #2FA968; --league-sapphire: #3A6FE0; --league-obsidian: #2A2630; /* ---- Achievement tier metals (badge gradients) ---- */ --tier-bronze: #B26B3B; --tier-bronze-hi: #E0A471; --tier-silver: #9AA3AD; --tier-silver-hi: #DCE1E6; --tier-gold: #E8B53C; --tier-gold-hi: #F7DC8A; /* ============================================================ RADII - Styleguide v2 hard rule: ZERO rounding on blocks. Round is intentional only: pills, avatars, dots, "play" circle (--r-full) and the brand "ticket" motif (--r-ticket). ============================================================ */ --r-xs: 0; --r-sm: 0; --r-md: 0; /* inputs, chips */ --r-lg: 0; /* buttons */ --r-xl: 0; /* cards */ --r-2xl: 0; /* hero / large surfaces */ --r-full: 999px; /* pills, avatars, dots */ --r-ticket: 12px;/* intentional: brand "ticket" motif only */ /* ============================================================ SHADOWS - soft, low, warm-tinted (Apple-clean) ============================================================ */ --shadow-xs: 0 1px 0 rgba(27, 26, 23, 0.04); /* near-flat editorial */ --shadow-sm: 0 1px 3px rgba(27, 26, 23, 0.05); --shadow-md: 0 8px 24px rgba(27, 26, 23, 0.10); --shadow-lg: 0 18px 50px rgba(27, 26, 23, 0.14); --shadow-pop: 0 24px 70px rgba(27, 26, 23, 0.22); /* modals / confetti card */ --shadow-hard: 0 6px 0 rgba(27, 26, 23, 0.08); /* flat "sticker" edge - card hover, no blur */ --ring-focus: 0 0 0 4px var(--primary-ring); /* ============================================================ SPACING SCALE (4px base) ============================================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ============================================================ TYPE SCALE - semantic roles ============================================================ */ --display: 800 56px/1.05 var(--font-ui); --h1: 800 38px/1.12 var(--font-ui); --h2: 700 28px/1.18 var(--font-ui); --h3: 700 22px/1.25 var(--font-ui); --h4: 700 18px/1.3 var(--font-ui); --body-lg: 400 18px/1.6 var(--font-ui); --body: 400 16px/1.55 var(--font-ui); --body-sm: 400 14px/1.5 var(--font-ui); --label: 600 14px/1.2 var(--font-ui); --caption: 500 12px/1.3 var(--font-ui); --overline: 700 12px/1.2 var(--font-ui); /* etykieta - jak w zdaniu, wyroznia ja waga */ /* Reading (course prose) - same Funnel Sans, generous line-height */ --read-body: 400 18px/1.72 var(--font-read); --read-lead: 400 21px/1.6 var(--font-read); /* Mono / CLI */ --mono-body: 400 14px/1.6 var(--font-mono); --mono-lg: 500 16px/1.55 var(--font-mono); } /* ============================================================ DARK MODE - class `dark` on . Ink paper, orange accent. Styleguide v2 has no native dark theme; this is a faithful dark adaptation of the paper palette. ============================================================ */ .dark { --canvas: #16150F; --surface: #1F1D17; --surface-2: #29261F; --surface-3: #343027; --fg-1: #ECE7DE; --fg-2: #C3BCAE; --fg-3: #8B857A; --fg-on-color:#FFFDF7; --border-1: #302C24; --border-2: #423C32; --primary: #E86B3D; --primary-hover: #F07E52; --primary-press: #C2461A; --primary-soft: #3A2114; --primary-ring: #7A4327; --accent-2: #F0BE12; --accent-2-soft: #35290A; --accent-2-ink: #FDF3D2; --grid: color-mix(in srgb, var(--fg-1) 7%, transparent); --ink: #100F0B; --ink-2: #1A1813; --ink-fg: #ECE7DE; --xp-soft: #35290A; --streak-soft: #3A2412; --heart-soft: #3A1B1C; --gem-soft: #0E3036; --success-soft:#173021; --warning-soft:#3A2C10; --danger-soft: #3A1B1A; --info-soft: #16243F; --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 2px 6px rgba(0,0,0,0.45); --shadow-md: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 18px 50px rgba(0,0,0,0.6); --shadow-pop:0 24px 70px rgba(0,0,0,0.7); --shadow-hard: 0 6px 0 rgba(0,0,0,0.35); } /* ============================================================ SEMANTIC ELEMENT DEFAULTS (optional helpers) ============================================================ */ .cm-display { font: var(--display); letter-spacing: -0.02em; color: var(--fg-1); } .cm-h1 { font: var(--h1); letter-spacing: -0.02em; color: var(--fg-1); } .cm-h2 { font: var(--h2); letter-spacing: -0.01em; color: var(--fg-1); } .cm-h3 { font: var(--h3); color: var(--fg-1); } .cm-h4 { font: var(--h4); color: var(--fg-1); } .cm-body { font: var(--body); color: var(--fg-2); } .cm-read { font: var(--read-body); color: var(--fg-1); } .cm-label { font: var(--label); color: var(--fg-2); } .cm-overline { font: var(--overline); color: var(--fg-3); } .cm-mono { font: var(--mono-body); color: var(--ink-fg); }