.badge-page { min-height: 100vh; background: var(--bg); } .badge-hero { background: linear-gradient(135deg, #1a2a1a 0%, #0d1a0d 100%); padding: 4.5rem 2rem 3.5rem; text-align: center; color: white; } .badge-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-family: var(--font-serif); color: var(--forest-pale); margin-bottom: 1rem; } .badge-hero p { color: rgba(200,230,210,0.8); font-size: 1rem; max-width: 560px; margin: 0 auto; line-height: 1.7; } .badge-main { max-width: 780px; margin: 0 auto; padding: 3rem 2rem; } /* Step blocks */ .badge-step { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 2.25rem; margin-bottom: 1.5rem; } .badge-step-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .badge-step-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--forest-mid); color: white; font-weight: 800; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-sans); } .badge-step-title { font-size: 1rem; font-weight: 700; color: var(--text-dark); font-family: var(--font-sans); } /* Tier selector */ .tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .tier-option { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; cursor: pointer; transition: all 0.2s ease; background: transparent; text-align: left; width: 100%; } .tier-option:hover { border-color: var(--forest-mid); } .tier-option.selected { border-color: var(--forest-mid); background: rgba(74,124,89,0.08); } .tier-option-emoji { font-size: 1.4rem; margin-bottom: 0.3rem; display: block; } .tier-option-name { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); display: block; margin-bottom: 0.2rem; } .tier-option-score { font-size: 0.75rem; color: var(--text-muted); display: block; } /* Name input */ .badge-name-input { width: 100%; padding: 0.85rem 1.1rem; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text-dark); font-family: var(--font-sans); font-size: 0.95rem; transition: border-color 0.2s ease; box-sizing: border-box; } .badge-name-input:focus { outline: none; border-color: var(--forest-mid); } .badge-name-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; } /* Style selector */ .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .style-option { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 1rem; cursor: pointer; transition: all 0.2s ease; background: transparent; text-align: center; width: 100%; } .style-option:hover { border-color: var(--forest-mid); } .style-option.selected { border-color: var(--forest-mid); background: rgba(74,124,89,0.08); } .style-option-name { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); display: block; margin-bottom: 0.2rem; } .style-option-desc { font-size: 0.72rem; color: var(--text-muted); display: block; } /* Canvas preview */ .badge-preview-section { text-align: center; margin-bottom: 1.5rem; } .badge-canvas-wrap { display: inline-block; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.15); margin-bottom: 1.5rem; } #badgeCanvas { display: block; max-width: 100%; } .badge-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; } .badge-btn-download { background: var(--forest-mid); color: white; border: none; border-radius: var(--radius-md); padding: 0.85rem 1.75rem; font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: var(--font-sans); transition: background 0.2s ease; } .badge-btn-download:hover { background: var(--forest-dark); } .badge-btn-share { background: transparent; color: var(--text-dark); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1.75rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: var(--font-sans); transition: all 0.2s ease; text-decoration: none; display: inline-block; } .badge-btn-share:hover { border-color: var(--forest-mid); color: var(--forest-mid); } /* LinkedIn copy box */ .linkedin-copy-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-top: 1rem; } .linkedin-copy-box h3 { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; font-family: var(--font-sans); } .linkedin-copy-text { font-size: 0.82rem; color: var(--text-body); line-height: 1.65; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.75rem; white-space: pre-wrap; font-family: var(--font-sans); } .btn-copy-text { background: none; border: 1px solid var(--forest-mid); color: var(--forest-mid); border-radius: var(--radius-md); padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--font-sans); transition: all 0.2s ease; } .btn-copy-text:hover { background: rgba(74,124,89,0.1); } /* Why share section */ .why-share { background: linear-gradient(135deg, rgba(74,124,89,0.06), transparent); border: 1px solid rgba(74,124,89,0.2); border-radius: var(--radius-md); padding: 1.5rem 1.75rem; margin-top: 1.5rem; } .why-share h3 { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; } .why-share ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .why-share li { font-size: 0.88rem; color: var(--text-body); line-height: 1.5; padding-left: 1.5rem; position: relative; } .why-share li::before { content: '🌿'; position: absolute; left: 0; font-size: 0.8rem; } /* Explore grid */ .badge-explore { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .badge-explore-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease; } .badge-explore-card:hover { border-color: var(--forest-mid); transform: translateY(-2px); } .badge-explore-emoji { font-size: 1.3rem; margin-bottom: 0.4rem; } .badge-explore-title { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.2rem; } .badge-explore-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } [data-theme="dark"] .badge-step { background: #1a2a1a; } [data-theme="dark"] .linkedin-copy-box { background: #1a2a1a; } [data-theme="dark"] .badge-explore-card { background: #1a2a1a; } [data-theme="dark"] .badge-name-input { background: #1a2a1a; } @media (max-width: 600px) { .badge-main { padding: 2rem 1.25rem; } .tier-grid { grid-template-columns: 1fr; } .style-grid { grid-template-columns: repeat(2, 1fr); } .badge-actions { flex-direction: column; align-items: stretch; } .badge-btn-download, .badge-btn-share { text-align: center; } } .callout { background: var(--surface-2); border-left: 4px solid var(--accent); padding: 1.25rem 1.5rem; border-radius: 0 12px 12px 0; margin: 2rem 0; } .callout p { margin: 0; color: var(--text-1); } .callout.warning { border-left-color: #f59e0b; } .callout.crisis { border-left-color: #ef4444; } .callout-info { background: rgba(106,176,212,0.08); border-color: var(--accent-blue); border-left-color: #60a5fa; } .inline-links { margin-top: 2rem; } .inline-links a { color: var(--accent); text-decoration: none; font-weight: 500; } .inline-links a:hover { text-decoration: underline; } .inline-links strong { display: block; margin-bottom: 0.5rem; color: var(--text); }

Shareable badge

Your AI Fatigue Score

Generate a badge from your quiz result. Download it. Share it on LinkedIn or Twitter. Start a real conversation — because the engineers around you are probably feeling it too.

1

Select your AI Fatigue Tier

Haven't taken the quiz yet? Take it first → Then come back with your tier.

2

Your name (optional)

First name or handle only. Leave blank for an anonymous badge.

3

Badge style

4

Preview & download

← Select your tier above to generate your badge

Keep going

More from The Clearing

5 questions. Find your tier before generating your badge.

Full Tier Breakdown

Deep advice for each tier — what it means and what to do.

7 practical phases. Honest. No toxic positivity.

One question a day. Track how you're doing over time.

If this resonated, you might also want to read:
Take the AI Fatigue Quiz — find your score
AI Fatigue Type Calculator — find your type
Social Badges — share your result
Recovery Guide — how to recover