/* ===== AIdemica — Common Styles (v2 · refreshed visual identity) ===== */ /* Fonts (Fraunces / Inter / JetBrains Mono / Manrope) are loaded directly in of each HTML via to avoid the @import-in-CSS waterfall (which forces the browser to fetch this CSS, parse it, then start a second request for the fonts). */ :root { /* ─── Palette (matched to mascot — emerald robot, cream surfaces, soft sage) ─── */ --primary: #0F3D2E; /* deep emerald — text/headings on light bg */ --primary-dark: #0A2A20; --accent: #10B981; /* deep emerald — primary brand (was acid teal #2DD4BF) */ --accent-2: #059669; /* deeper for hover/active */ --accent-3: #047857; /* deepest, for pressed */ --accent-mint: #6EE7B7; /* soft mint for chip borders / decorative */ --accent-soft: #ECFDF5; /* surface tint */ --sage: #C7E8DA; /* secondary accent */ --cream: #FAF6EE; /* warm bg from hero illustration */ --cream-2: #F0EAD8; /* darker cream for borders/dividers on cream surfaces */ --text: #1A2833; /* near-black, slight warm cool */ --text-2: #475569; /* secondary text */ --text-light: #94A3B8; /* tertiary / muted */ --ink: #0A2A20; /* deepest emerald-black for dark sections / CTAs */ --bg: #FAFBFC; /* page bg */ --bg-light: #FFFFFF; --bg-warm: var(--cream); --surface: #FFFFFF; --border: #E8ECEF; --border-strong: #D1D9E0; --danger: #E11D48; --warn: #F59E0B; --info: #3B82F6; --success: var(--accent-2); --radius: 12px; /* updated from 8 → 12, more friendly */ --radius-lg: 18px; --radius-pill: 99px; --shadow-xs: 0 1px 2px rgba(15, 61, 46, 0.04); --shadow-sm: 0 2px 8px rgba(15, 61, 46, 0.06); --shadow: 0 6px 24px rgba(15, 61, 46, 0.08); --shadow-lg: 0 24px 64px rgba(15, 61, 46, 0.12); --shadow-glow: 0 0 0 4px rgba(45, 212, 191, 0.18); --easing: cubic-bezier(0.32, 0.72, 0, 1); --transition: all 0.18s var(--easing); } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text); line-height: 1.55; background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv02','cv03','cv04','cv11'; } h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.015em; color: var(--primary); line-height: 1.2; } h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.025em; } h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.0625rem; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--accent); color: #fff; } /* ─── Buttons (refreshed) ─── */ .btn { padding: 11px 22px; border-radius: var(--radius); font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: var(--transition); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; line-height: 1; white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .btn-accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; box-shadow: 0 4px 14px rgba(45, 212, 191, 0.35); } .btn-accent:hover { box-shadow: 0 6px 20px rgba(45, 212, 191, 0.5); transform: translateY(-1px); } .btn-outline { border: 1.5px solid var(--border-strong); color: var(--primary); background: var(--surface); } .btn-outline:hover { border-color: var(--primary); background: var(--accent-soft); } .btn-ghost { background: none; border: none; color: var(--text-2); cursor: pointer; padding: 8px 14px; } .btn-ghost:hover { color: var(--accent-2); background: var(--accent-soft); } .btn-lg { padding: 14px 32px; font-size: 15px; border-radius: var(--radius); } .btn-block { width: 100%; } .btn-pill { border-radius: var(--radius-pill); } /* ─── Tags / Pills ─── */ .tag { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.01em; } .tag-work { color: #1E40AF; background: #DBEAFE; } .tag-wait { color: #B45309; background: #FEF3C7; } .tag-done { color: var(--accent-2); background: var(--accent-soft); } .tag-new { color: #6D28D9; background: #EDE9FE; } .tag-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: tagPulse 2s infinite; } @keyframes tagPulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 6px transparent; opacity: 0.6; } } /* ─── Forms ─── */ .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text); letter-spacing: 0.01em; } /* Placeholder color for