/* ═══════════════════════════════════════════════════════════ THE AI NATIVES — Design Tokens V1.1 (Updated) Electric Lime + Forest Black Usage: Import this file as the single source of truth. Toggle dark mode by setting data-theme="dark" on . Font stack (load via Google Fonts or self-host): - Playfair Display: display/hero headings - Plus Jakarta Sans: body/UI text - JetBrains Mono: code/tokens ═══════════════════════════════════════════════════════════ */ /* ─── LIGHT MODE (default) ──────────────────────────────── */ :root { /* ── Accent: Electric Lime ── */ --accent: #C8F53A; --accent-hover: #B8E52A; --accent-dim: #8CB823; --accent-wash: rgba(200, 245, 58, 0.08); --accent-wash-solid: #F3FBDA; /* ── Foundation: Forest Scale ── */ --forest-1: #070F0A; /* Deepest — hero bg, primary buttons */ --forest-2: #0D1A12; /* Button hover on dark surfaces */ --forest-3: #142618; /* Elevated surfaces, borders on dark */ --forest-4: #1E3A24; /* Links on light, accent text */ --forest-5: #2A5233; /* Tertiary, softer green accents */ /* ── Neutrals ── */ --black: #080808; --gray-900: #161616; --gray-800: #222; --gray-700: #3A3A3A; --gray-600: #555; --gray-500: #717171; --gray-400: #8E8E8E; --gray-300: #B5B5B5; --gray-200: #D6D6D6; --gray-100: #EDEDED; --gray-50: #F6F6F4; --white: #FAFAF7; /* Warm white — slightly organic */ /* ── Semantic ── */ --success: #3BA58A; /* Teal-shifted to distinguish from forest */ --warning: #E8B931; --error: #D45A3B; --info: #4A7FA5; /* ── Surfaces ── */ --bg-page: var(--white); --bg-card: #FFFFFF; --bg-elevated: #FFFFFF; --bg-subtle: var(--gray-50); --bg-accent: var(--accent-wash-solid); --bg-hero: #FAFAF7; --bg-section-alt: #F2F5EF; /* Green-tinted alt section */ /* ── Text ── */ --text-primary: #1C1C1C; --text-heading: var(--black); --text-secondary: var(--gray-500); --text-muted: var(--gray-300); --text-accent: var(--forest-4); --text-on-dark: #EAEAE6; --text-hero-accent: var(--accent); /* ── Borders ── */ --border: var(--gray-100); --border-strong: var(--gray-200); --border-accent: rgba(200, 245, 58, 0.25); /* ── Buttons ── */ --btn-primary-bg: var(--forest-1); --btn-primary-text: var(--accent); --btn-primary-hover: var(--forest-2); --btn-accent-bg: var(--accent); --btn-accent-text: var(--forest-1); --btn-accent-hover: var(--accent-hover); /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10); /* ── Radii ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── Typography ── */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* ── Letter Spacing ── */ --ls-tight: -0.035em; --ls-heading: -0.025em; --ls-body: -0.01em; --ls-eyebrow: 0.16em; --ls-caps: 0.08em; /* ── Standardized Opacity ── */ --opacity-muted: 0.5; --opacity-subtle: 0.3; --opacity-wash: 0.08; /* ── Duration & Easing ── */ --duration-micro: 0.15s; /* Instant feedback: checkbox, icon swap */ --duration-default: 0.2s; /* Button hovers, link transitions */ --duration-emphasis: 0.3s; /* Card lifts, nav condensing, accordion */ --duration-page: 0.5s; /* Page transitions, hero entrance delays */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Signature easing */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* ── Texture ── */ --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); /* ── Glow (RGB for rgba() use in animations) ── */ --accent-glow-rgb: 200, 245, 58; /* ── Legacy aliases (for backward compatibility) ── */ --ease-out-expo: var(--ease-out); --ease-default: ease; --duration-fast: var(--duration-default); --duration-normal: var(--duration-emphasis); --duration-smooth: 0.4s; --duration-entrance: 0.7s; --duration-hero: 0.8s; --stagger-base: 0.1s; } /* ─── DARK MODE ─────────────────────────────────────────── */ /* Green-tinted neutrals maintain brand cohesion. */ /* Two-tier button hierarchy preserves emphasis control. */ [data-theme="dark"] { /* ── Surfaces — near-black with subtle green cast ── */ --bg-page: #060806; --bg-card: #0C0F0D; --bg-elevated: #111412; --bg-subtle: #090B09; --bg-accent: rgba(200, 245, 58, 0.04); --bg-hero: #030503; --bg-section-alt: #080A08; /* ── Text — warm green cast ── */ --text-primary: #C5C8C2; --text-heading: #E5E8E2; --text-secondary: #6A6D67; --text-muted: #555855; --text-accent: var(--accent); --text-on-dark: #E5E8E2; --text-hero-accent: var(--accent); /* ── Borders — green-tinted ── */ --border: #1A1D1A; --border-strong: #262926; --border-accent: rgba(200, 245, 58, 0.12); /* ── Buttons — two-tier hierarchy ── Primary: forest bg + lime text (secondary emphasis) Accent: lime bg + dark text (highest emphasis) */ --btn-primary-bg: var(--forest-4); --btn-primary-text: var(--accent); --btn-primary-hover: var(--forest-5); --btn-accent-bg: var(--accent); --btn-accent-text: #060806; /* ── Shadows — deeper for dark surfaces ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.60); } /* ─── TYPE SCALE ────────────────────────────────────────── */ /* Level Font Size Weight Tracking Leading ───────────── ─────────────── ───── ────── ──────── ─────── Display / H1 Playfair Display 44px 800 -0.035em 1.0 H2 Playfair Display 30px 700 -0.025em 1.12 H2 italic Playfair Display 30px 700i -0.020em 1.12 H3 Jakarta Sans 22px 700 -0.020em 1.3 H4 Jakarta Sans 17px 700 -0.010em 1.4 H5 Jakarta Sans 14px 700 0.020em 1.5 H6 Jakarta Sans 12px 700 0.040em 1.5 uppercase Body Jakarta Sans 16px 400 0 1.7 Small Jakarta Sans 13px 400 0 1.65 Eyebrow Jakarta Sans 10px 700 0.160em — uppercase Mono JetBrains Mono 13px 400 0 1.6 */ /* ─── SPACING SCALE ─────────────────────────────────────── */ /* 4px base unit. Every value divisible by 4. --space-xs: 4px --space-sm: 8px --space-md: 12px --space-base: 16px --space-lg: 24px --space-xl: 32px --space-2xl: 48px --space-3xl: 64px --space-4xl: 80px */ /* ─── Z-INDEX STACK ─────────────────────────────────────── */ /* --z-grain: 50 grain texture overlay --z-vtag: 99 version tag --z-nav: 100 fixed navigation pill --z-toast: 200 toast notifications --z-modal: 300 modals + backdrop */ /* ─── COMPONENT PATTERNS ────────────────────────────────── */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--duration-default); text-decoration: none; border: none; letter-spacing: var(--ls-body); } .btn-lg { padding: 14px 28px; font-size: 14px; border-radius: var(--radius-md); } .btn-md { padding: 10px 22px; font-size: 13px; } .btn-sm { padding: 7px 14px; font-size: 12px; } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn-primary:hover { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-accent { background: var(--btn-accent-bg); color: var(--btn-accent-text); } .btn-accent:hover { background: var(--btn-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200, 245, 58, 0.15); } .btn-outline { background: transparent; color: var(--text-heading); border: 1.5px solid var(--border-strong); } .btn-outline:hover { border-color: var(--text-heading); background: var(--accent-wash-solid); } [data-theme="dark"] .btn-outline { color: var(--text-secondary); border-color: var(--border-strong); } [data-theme="dark"] .btn-outline:hover { border-color: var(--accent); color: var(--accent); background: rgba(200, 245, 58, 0.04); } .btn-ghost { background: transparent; color: var(--text-accent); border: none; font-weight: 600; } .btn-ghost:hover { color: var(--accent-dim); background: var(--accent-wash); } [data-theme="dark"] .btn-ghost { color: var(--accent); } [data-theme="dark"] .btn-ghost:hover { color: var(--accent); background: rgba(200, 245, 58, 0.06); } .btn-disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .badge-accent { background: var(--accent-wash-solid); color: var(--forest-4); } .badge-dark { background: var(--forest-1); color: var(--accent); } .badge-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .badge-success { background: rgba(59, 165, 138, 0.08); color: var(--success); } .badge-warning { background: rgba(232, 185, 49, 0.10); color: var(--warning); } .badge-error { background: rgba(212, 90, 59, 0.08); color: var(--error); } [data-theme="dark"] .badge-accent { background: rgba(200, 245, 58, 0.08); color: var(--accent); } [data-theme="dark"] .badge-dark { background: #1A1A1A; color: var(--text-secondary); } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; transition: all var(--duration-emphasis) ease; position: relative; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background var(--duration-emphasis); border-radius: var(--radius-md) var(--radius-md) 0 0; } .card:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card:hover::before { background: var(--accent); opacity: 0.5; } .card-selected { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-wash-solid); } [data-theme="dark"] .card:hover { box-shadow: 0 4px 24px rgba(200, 245, 58, 0.03); } [data-theme="dark"] .card-selected { box-shadow: 0 0 0 2px rgba(200, 245, 58, 0.10); } /* Form inputs */ .form-input { padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; background: var(--bg-card); color: var(--text-primary); transition: all var(--duration-default); outline: none; } .form-input:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(200, 245, 58, 0.08); } [data-theme="dark"] .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 245, 58, 0.06); } .form-input::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-input::placeholder { color: var(--gray-500); } /* Grain texture overlay — apply to body::after */ /* body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; background-image: var(--grain); background-repeat: repeat; background-size: 256px 256px; opacity: 0.35; mix-blend-mode: overlay; } */ /* ═══════════════════════════════════════════════════════════ ANIMATION SYSTEM Full animation inventory for The AI Natives. All animations honour prefers-reduced-motion: reduce. ═══════════════════════════════════════════════════════════ */ /* ─── 1. ENTRANCE: FADE UP ──────────────────────────────── */ /* The signature entrance. Use on any element entering the */ /* viewport: headings, cards, paragraphs, CTAs. */ /* Apply .reveal class + add .visible via IntersectionObserver. */ /* Or use directly with animation + delay for hero sequences. */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Softer variant — 20px travel for smaller elements */ @keyframes fadeUpSoft { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Scroll-triggered reveal class */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered children — apply .reveal-stagger to parent, */ /* .reveal to each child. JS adds .visible to parent. */ .reveal-stagger.visible .reveal:nth-child(1) { transition-delay: 0.00s; } .reveal-stagger.visible .reveal:nth-child(2) { transition-delay: 0.08s; } .reveal-stagger.visible .reveal:nth-child(3) { transition-delay: 0.16s; } .reveal-stagger.visible .reveal:nth-child(4) { transition-delay: 0.24s; } .reveal-stagger.visible .reveal:nth-child(5) { transition-delay: 0.32s; } .reveal-stagger.visible .reveal:nth-child(6) { transition-delay: 0.40s; } /* Hero-specific entrance — direct animation (no JS trigger) */ .hero-entrance { opacity: 0; animation: fadeUp 0.8s var(--ease-out) forwards; } .hero-entrance:nth-child(1) { animation-delay: 0.10s; } .hero-entrance:nth-child(2) { animation-delay: 0.25s; } .hero-entrance:nth-child(3) { animation-delay: 0.40s; } .hero-entrance:nth-child(4) { animation-delay: 0.55s; } .hero-entrance:nth-child(5) { animation-delay: 0.65s; } /* Homepage scattered desk cards */ @keyframes deskEntrance { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes cardAttention { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.04); } } /* ─── 2. AMBIENCE: GLOW BREATHE ─────────────────────────── */ /* Radial background glow that scales and fades on a loop. */ /* Apply to a positioned pseudo-element or dedicated div. */ /* Interactive: follows mouse via requestAnimationFrame, */ /* updating --glow-x and --glow-y CSS variables. */ @keyframes glowBreathe { 0%, 100% { transform: translate(-50%, -55%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -55%) scale(1.25); opacity: 0.7; } } .glow-ambient { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); width: 700px; height: 700px; background: radial-gradient( circle, rgba(var(--accent-glow-rgb), 0.18) 0%, rgba(var(--accent-glow-rgb), 0.08) 40%, transparent 70% ); filter: blur(80px); pointer-events: none; animation: glowBreathe 6s var(--ease-in-out) infinite; } /* Smaller variant for section accents */ .glow-section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: radial-gradient( circle, rgba(var(--accent-glow-rgb), 0.10) 0%, transparent 70% ); filter: blur(100px); pointer-events: none; } /* ─── 3. AMBIENCE: SCROLL BOUNCE ────────────────────────── */ /* Scroll indicator arrow that bounces gently. */ /* Fades in after 0.9s via scrollFadeIn. */ @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes scrollFadeIn { from { opacity: 0; } to { opacity: 1; } } .scroll-bounce { animation: scrollBounce 2s var(--ease-in-out) infinite; } .scroll-hint { animation: scrollBounce 2s ease-in-out infinite, scrollFadeIn 0.5s ease 0.9s both; } /* ─── 4. INTERACTION: HIGHLIGHT PULSE ────────────────────── */ /* One-shot glow pulse — use when an element gets selected, */ /* confirmed, or needs momentary emphasis. */ @keyframes highlightPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-glow-rgb), 0.4); } 50% { box-shadow: 0 0 20px 4px rgba(var(--accent-glow-rgb), 0.3); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-glow-rgb), 0); } } .highlight-pulse { animation: highlightPulse 1.5s ease; } /* Publish modal live indicator */ @keyframes publishModalPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-glow-rgb), 0.4); } 50% { box-shadow: 0 0 12px 4px rgba(var(--accent-glow-rgb), 0.2); } } /* ─── 5. INTERACTION: CARD HOVER ─────────────────────────── */ /* Standard card hover — lift + enhanced shadow with glow. */ /* Already built into .card above, but here's the standalone */ /* pattern for any hoverable surface. */ .hover-lift { transition: transform var(--duration-emphasis) ease, box-shadow var(--duration-emphasis) ease, border-color var(--duration-emphasis) ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(var(--accent-glow-rgb), 0.06); } [data-theme="dark"] .hover-lift:hover { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.30), 0 0 20px rgba(var(--accent-glow-rgb), 0.06); } /* ─── 6. INTERACTION: BUTTON HOVER ───────────────────────── */ /* Buttons already have hover in component section above. */ /* This adds the accent glow shadow to .btn-accent on hover. */ /* (Already defined — included here for completeness.) */ /* ─── 7. INTERACTION: FAQ / ACCORDION ────────────────────── */ /* Expand/collapse with max-height transition + chevron rotate. */ /* JS sets maxHeight = scrollHeight + 'px' for smooth expand. */ /* Single-open: others close when a new one opens. */ .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); } .accordion-header svg { transition: transform var(--duration-emphasis) var(--ease-out); } .accordion-item.open .accordion-header svg { transform: rotate(180deg); } /* Legacy class names (backward compat) */ .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); } .accordion-item.open .accordion-body { max-height: none; } .accordion-chevron { transition: transform var(--duration-emphasis) ease; } .accordion-item.open .accordion-chevron { transform: rotate(180deg); } /* ─── 8. INTERACTION: CONTENT CYCLER ─────────────────────── */ /* Fade out + slide for rotating text (hero subtitles, etc.) */ .cycler-text { display: inline-block; transition: opacity 0.4s ease, transform 0.4s ease; } .cycler-text.fade-out { opacity: 0; transform: translateY(-6px); } /* ─── 9. MODAL ENTRANCE / EXIT ──────────────────────────── */ /* Application modal */ @keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Admin publish modal */ @keyframes publishModalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes publishModalSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ─── 10. LOADING ANIMATIONS ────────────────────────────── */ /* Skeleton shimmer for placeholder content */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-elevated) 50%, var(--bg-subtle) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease infinite; border-radius: var(--radius-sm); } /* ─── INTERSECTION OBSERVER (reference JS) ───────────────── */ /* Drop this script into your app to activate .reveal elements: const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); // For staggered parents, add visible to children too entry.target.querySelectorAll('.reveal').forEach(child => { child.classList.add('visible'); }); } }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); document.querySelectorAll('.reveal, .reveal-stagger').forEach(el => { observer.observe(el); }); */ /* ─── REDUCED MOTION ─────────────────────────────────────── */ /* Respect user preference — disable all motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .hero-entrance { opacity: 1; transform: none; } }