/* * static/css/cipheriq.css * * CipherIQ Design System v1 — CSS variables + reusable component classes * * Use this in two ways: * 1. Reference CSS variables anywhere (works without Tailwind): * color: var(--text-primary); * background: var(--cipher-bg); * * 2. Apply component classes directly in templates: *
...
*
...
* * Companion file: tailwind.config.js (uses the same color tokens) */ /* ========== FONT IMPORT ========== */ /* Drop this in your instead if you prefer link tags: */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); /* ========== DESIGN TOKENS ========== */ :root { /* App surfaces */ --app-bg: #FAFAFA; --card-bg: #FFFFFF; --card-border: #E5E5E5; /* Text */ --text-primary: #0A0A0A; --text-secondary: #525252; --text-tertiary: #737373; --text-inverted: #FFFFFF; /* Purple accent */ --purple-primary: #7C3AED; --purple-light: #A78BFA; --purple-bg: #EDE9FE; /* Cipher voice */ --cipher-bg: #0A0A0A; --cipher-text: #E5E5E5; --cipher-heading: #FFFFFF; --cipher-accent: #A78BFA; --cipher-border: rgba(255, 255, 255, 0.1); --cipher-btn-bg: rgba(255, 255, 255, 0.1); /* Status */ --success: #15803D; --warning: #B45309; --danger: #B91C1C; /* Type scale */ --font-sans: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --fs-display: 24px; --fs-h1: 20px; --fs-h2: 16px; --fs-body: 14px; --fs-body-sm: 13px; --fs-label: 11px; --fs-stat-lg: 32px; --fs-stat: 22px; /* Spacing (8px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* Radius */ --r-card: 8px; --r-hero: 10px; --r-btn: 6px; --r-pill: 999px; } /* ========== BASE RESETS ========== */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); background: var(--app-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } /* ========== TOP NAV ========== */ .ciq-nav { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 22px; background: var(--card-bg); border-bottom: 0.5px solid var(--card-border); } .ciq-nav__brand { display: flex; align-items: center; gap: var(--sp-2); } .ciq-nav__logo { width: 26px; height: 26px; border-radius: var(--r-btn); background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 13px; } .ciq-nav__wordmark { font-size: 15px; font-weight: 500; color: var(--text-primary); } .ciq-nav__links { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-8); } .ciq-nav__link { padding: 6px 12px; font-size: var(--fs-body-sm); color: var(--text-tertiary); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.15s ease; } .ciq-nav__link:hover { color: var(--text-primary); } .ciq-nav__link--active { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--purple-primary); } .ciq-nav__alert-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; margin-left: 4px; border-radius: var(--r-pill); background: var(--purple-bg); color: var(--purple-primary); font-size: 10px; font-weight: 500; } .ciq-nav__actions { display: flex; align-items: center; gap: var(--sp-3); } /* ========== BUTTONS ========== */ .ciq-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px 14px; font-size: var(--fs-body-sm); font-weight: 500; border-radius: var(--r-btn); border: 0.5px solid transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; font-family: inherit; } /* Primary — black, the main "+ New" button. Use sparingly. */ .ciq-btn--primary { background: var(--text-primary); color: var(--text-inverted); border-color: var(--text-primary); } .ciq-btn--primary:hover { background: #1A1A1A; } /* Purple — only for the strongest CTAs (e.g. landing page) */ .ciq-btn--purple { background: var(--purple-primary); color: var(--text-inverted); border-color: var(--purple-primary); } .ciq-btn--purple:hover { background: #6D28D9; } /* Secondary — white card with thin border */ .ciq-btn--secondary { background: var(--card-bg); color: var(--text-primary); border-color: var(--card-border); } .ciq-btn--secondary:hover { background: var(--app-bg); } /* Ghost — no border, transparent */ .ciq-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .ciq-btn--ghost:hover { color: var(--text-primary); } /* PRIMARY action on Cipher's dark card */ .ciq-btn--cipher { background: var(--purple-primary); color: white; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: background 0.15s; font-family: inherit; } .ciq-btn--cipher:hover { background: #6D28D9; color: white; text-decoration: none; } /* SECONDARY action on Cipher's dark card */ .ciq-btn--cipher-ghost { background: transparent; color: #A78BFA; border: none; padding: 8px 4px; font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: color 0.15s; font-family: inherit; } .ciq-btn--cipher-ghost:hover { color: white; text-decoration: none; } /* ========== CARDS ========== */ /* White card — Phil's data lives here */ .ciq-card { background: var(--card-bg); border: 0.5px solid var(--card-border); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-6); } .ciq-card--hero { border-radius: var(--r-hero); padding: var(--sp-6); } /* ========== STAT CARDS ========== */ .ciq-stat { background: var(--card-bg); border: 0.5px solid var(--card-border); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); } .ciq-stat__label { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .ciq-stat__value { font-size: var(--fs-stat); font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); margin-top: var(--sp-1); } .ciq-stat__sublabel { font-size: var(--fs-label); color: var(--text-tertiary); margin-top: 2px; text-transform: none; letter-spacing: 0; } /* ========== CIPHER CARD — THE SIGNATURE ========== */ /* * Use this anywhere Cipher generates content: * - Cipher's Brief * - Ask Cipher responses * - AI-drafted discipline letters * - AI-drafted coaching messages * - Predictive scorecard insights * - Pattern Detector outputs (post-beta) * * Example markup: *
*
* * CIPHER'S BRIEF *
*

Your operation ran cleanly...

*
* *
*
*/ .ciq-cipher-card { background: var(--cipher-bg); color: var(--cipher-text); border-radius: var(--r-hero); padding: var(--sp-6) var(--sp-6); } .ciq-cipher-card__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.06em; color: var(--cipher-accent); margin-bottom: var(--sp-3); text-transform: uppercase; } .ciq-cipher-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cipher-accent); display: inline-block; } .ciq-cipher-card__heading { color: var(--cipher-heading); font-size: var(--fs-h2); font-weight: 500; margin: 0 0 var(--sp-2); } .ciq-cipher-card__body { font-size: var(--fs-body); line-height: 1.7; color: var(--cipher-text); margin: 0; white-space: pre-wrap; } /* When you want to bold a phrase inside the body, give it the white treatment */ .ciq-cipher-card__body strong, .ciq-cipher-card__highlight { color: var(--cipher-heading); font-weight: 500; } .ciq-cipher-card__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); } /* ========== STATUS PILLS ========== */ .ciq-pill { display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 500; border-radius: var(--r-badge); } .ciq-pill--success { background: #DCFCE7; color: #166534; } .ciq-pill--warning { background: #FEF3C7; color: #92400E; } .ciq-pill--danger { background: #FEE2E2; color: #991B1B; } .ciq-pill--purple { background: var(--purple-bg); color: var(--purple-primary); } /* ========== AVATAR / PROFILE CIRCLE ========== */ .ciq-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--purple-bg); color: #5B21B6; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; } /* ========== UTILITIES ========== */ .ciq-text-secondary { color: var(--text-secondary); } .ciq-text-tertiary { color: var(--text-tertiary); } .ciq-label { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } /* No more ALL CAPS HEADERS — use sentence case */ /* No drop shadows — use border weight for hierarchy */