/* ============================================================================= INTERACTIVE TOOLS - Global Component Library ============================================================================= */ /* Purpose: Scalable CSS for all interactive components across the site Architecture: Each tool has its own section with prefixed class names Usage: Link once in , use any tool by adding HTML structure Version: 1.0 Last Updated: 2026-01-04 TOOLS INCLUDED: 1. Copy-Prompt Component (.copy-prompt-*) 2. Copy-Paste Card Component (.it-*) 3. [Future Tool 3] (.tool-name-*) */ /* ============================================================================= TOOL 1: COPY-PROMPT COMPONENT ============================================================================= */ /* Purpose: Stop-the-skim component with copy-to-clipboard functionality Psychology: Authority signal + Action trigger + Friction removal Color: Green (go/action/proven) Classes: .copy-prompt-* (all prefixed to avoid conflicts) */ /* ----------------------------------------------------------------------------- Container - Pattern Interrupt ----------------------------------------------------------------------------- */ .copy-prompt-container { background: #ffffff; border: 2px solid #10b981; /* Emerald green - action trigger */ border-radius: 12px; padding: 0; margin: 2rem 0; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1); overflow: hidden; transition: box-shadow 0.3s ease, transform 0.2s ease; } .copy-prompt-container:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15); transform: translateY(-2px); /* Subtle lift - depth perception trigger */ } /* ----------------------------------------------------------------------------- Header - Title with Badge (Original Design) ----------------------------------------------------------------------------- */ .copy-prompt-header { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); /* Light green gradient */ padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .copy-prompt-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; color: #065f46; /* Dark green */ letter-spacing: 0.3px; margin: 0; /* Reset h2 default margin */ padding: 0; /* Reset h2 default padding */ } .copy-prompt-badge::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #10b981; color: white; border-radius: 50%; font-size: 0.75rem; font-weight: 900; } /* ----------------------------------------------------------------------------- Instructions Section (Moved to Top, Original Design) ----------------------------------------------------------------------------- */ .copy-prompt-instructions { background: #ffffff; padding: 1.25rem 1.5rem; font-size: 0.95rem; line-height: 1.6; color: #4b5563; border-bottom: 1px solid #e5e7eb; display: flex; align-items: flex-start; gap: 0.75rem; } .copy-prompt-instructions::before { content: "📋"; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; } .copy-prompt-instructions strong { color: #1f2937; font-weight: 600; } /* ----------------------------------------------------------------------------- Copy Button - Action Trigger + Friction Removal ----------------------------------------------------------------------------- */ .copy-prompt-btn { background: #10b981; /* Emerald green - GO signal */ color: white; border: none; padding: 0.65rem 1.5rem; font-size: 0.9rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); } .copy-prompt-btn:hover { background: #059669; /* Darker green on hover */ transform: scale(1.05); /* Slight grow - attention trigger */ box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); } .copy-prompt-btn:active { transform: scale(0.98); /* Press effect */ } /* Success state - instant gratification feedback */ .copy-prompt-btn.copied { background: #34d399; /* Lighter green - success color */ pointer-events: none; /* Prevent double-click during feedback */ } .copy-prompt-btn.copied::after { content: " ✓"; font-weight: 900; } /* ----------------------------------------------------------------------------- Terminal Window Header - Recognition Trigger ----------------------------------------------------------------------------- */ .copy-prompt-window-header { background: linear-gradient(180deg, #2d2d2d 0%, #1e1e1e 100%); padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid #3d3d3d; border-bottom: 1px solid #0a0a0a; } /* Fake window controls (● ● ●) - Universal code editor signal */ .copy-prompt-window-controls { display: flex; align-items: center; gap: 0.5rem; } .copy-prompt-window-controls span { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .copy-prompt-window-controls .control-close { background: #ff5f56; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .copy-prompt-window-controls .control-minimize { background: #ffbd2e; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .copy-prompt-window-controls .control-maximize { background: #27c93f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } /* Window title */ .copy-prompt-window-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 0.8rem; color: #888; font-weight: 500; letter-spacing: 0.3px; } /* ----------------------------------------------------------------------------- Prompt Content - DARK TERMINAL AESTHETIC (Code Recognition Trigger) ----------------------------------------------------------------------------- */ .copy-prompt-content { background: #1e1e1e; /* Dark VS Code background */ padding: 1.75rem 1.5rem; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace; font-size: 0.9rem; line-height: 1.8; color: #d4d4d4; /* Light gray text - VS Code default */ white-space: pre-wrap; overflow-x: auto; overflow-y: auto; /* Enable vertical scrolling */ max-height: 320px; /* Fixed height - shows ~8-10 lines, rest scrollable */ border-top: 1px solid #0a0a0a; border-bottom: 1px solid #0a0a0a; position: relative; scroll-behavior: smooth; /* Smooth scrolling */ /* Subtle gradient for depth */ background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%); } /* Custom scrollbar styling (terminal aesthetic) */ .copy-prompt-content::-webkit-scrollbar { width: 10px; } .copy-prompt-content::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 0; } .copy-prompt-content::-webkit-scrollbar-thumb { background: #4ec9b0; /* Cyan to match code highlighting */ border-radius: 5px; border: 2px solid #2a2a2a; } .copy-prompt-content::-webkit-scrollbar-thumb:hover { background: #5fd4bb; /* Lighter cyan on hover */ } /* Firefox scrollbar */ .copy-prompt-content { scrollbar-width: thin; scrollbar-color: #4ec9b0 #2a2a2a; } /* Scroll fade indicator (shows "more content below") */ .copy-prompt-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 10px; /* Account for scrollbar */ height: 40px; background: linear-gradient(to top, rgba(30, 30, 30, 0.95), transparent); pointer-events: none; opacity: 1; /* Always visible to indicate scrollable content */ transition: opacity 0.3s; } /* Syntax highlighting for keywords (psychological trigger: "this is code") */ .copy-prompt-content strong { color: #4ec9b0; /* Cyan - VS Code property color */ font-weight: 700; } /* Number highlighting */ .copy-prompt-content::first-line { color: #9cdcfe; /* Light blue - VS Code variable color */ } /* ----------------------------------------------------------------------------- Footer - Copy Button (Bottom Right Action) ----------------------------------------------------------------------------- */ .copy-prompt-footer { background: #f3f4f6; /* Soft cool gray - supports button without competing */ padding: 1rem 1.5rem; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid #e5e7eb; } /* ----------------------------------------------------------------------------- Code Editor Enhancements ----------------------------------------------------------------------------- */ /* Selection styling (when user selects text) */ .copy-prompt-content::selection { background: rgba(78, 201, 176, 0.3); /* Cyan highlight */ color: #d4d4d4; } .copy-prompt-content::-moz-selection { background: rgba(78, 201, 176, 0.3); color: #d4d4d4; } /* Subtle glow effect on hover (makes it feel interactive) */ .copy-prompt-container:hover .copy-prompt-content { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.2); } /* Optional: Blinking cursor at end (subtle "live code" effect) */ @keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .copy-prompt-content::before { content: ''; position: absolute; right: 1.5rem; top: 1.75rem; width: 2px; height: 1rem; background: #4ec9b0; animation: cursor-blink 1.2s infinite; opacity: 0.6; } /* Remove cursor on mobile (less relevant) */ @media (max-width: 640px) { .copy-prompt-content::before { display: none; } } /* ----------------------------------------------------------------------------- Responsive Design ----------------------------------------------------------------------------- */ @media (max-width: 640px) { .copy-prompt-header { flex-direction: column; align-items: flex-start; } .copy-prompt-instructions { padding: 1rem 1.25rem; font-size: 0.9rem; } .copy-prompt-btn { width: 100%; justify-content: center; } .copy-prompt-window-header { padding: 0.6rem 0.75rem; } .copy-prompt-window-controls span { width: 10px; height: 10px; } .copy-prompt-window-title { font-size: 0.7rem; } .copy-prompt-content { font-size: 0.85rem; padding: 1.25rem 1rem; min-height: 150px; } .copy-prompt-footer { padding: 0.75rem 1rem; } .copy-prompt-footer .copy-prompt-btn { width: 100%; } } /* ----------------------------------------------------------------------------- Accessibility ----------------------------------------------------------------------------- */ .copy-prompt-btn:focus { outline: 3px solid #10b981; outline-offset: 2px; } /* High contrast mode support */ @media (prefers-contrast: high) { .copy-prompt-container { border-width: 3px; } .copy-prompt-btn { font-weight: 700; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .copy-prompt-container, .copy-prompt-btn { transition: none; transform: none; } .copy-prompt-container:hover { transform: none; } .copy-prompt-btn:hover { transform: none; } } /* ============================================================================= TOOL 2: COPY-PASTE CARD COMPONENT (Dark Terminal Style) ============================================================================= */ /* Purpose: Code-style copy-paste cards with terminal aesthetic Psychology: Developer tool recognition + One-click action Color: Dark terminal theme (VS Code inspired) Classes: .it-* (Interactive Tool prefix) Use cases: Prompts, code snippets, commands, configs */ /* ----------------------------------------------------------------------------- Container - Main Wrapper ----------------------------------------------------------------------------- */ .it-card { background-color: rgba(36, 40, 50, 0.5); border-radius: 8px; color: inherit; font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; overflow: hidden; padding: 0; margin: 2.5rem auto; width: 85%; transition: box-shadow 0.3s ease, transform 0.2s ease; } /* Color Variant 1: Emerald Green (Primary - "Proven/Action") */ .it-card-green { border: 10px solid #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); } .it-card-green:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25); transform: translateY(-2px); } .it-card-green .it-header { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); } .it-card-green .it-title { color: #065f46; } .it-card-green .it-copy-btn { color: #10b981; } .it-card-green .it-copy-btn:hover { color: #059669; } /* Color Variant 2: Amber/Gold (Special - "Opportunity/Value") */ .it-card-amber { border: 10px solid #f59e0b; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); } .it-card-amber:hover { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25); transform: translateY(-2px); } .it-card-amber .it-header { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); } .it-card-amber .it-title { color: #92400e; } .it-card-amber .it-copy-btn { color: #f59e0b; } .it-card-amber .it-copy-btn:hover { color: #d97706; } /* Color Variant 3: Cyan/Blue (Professional - "Tool/Utility") */ .it-card-cyan { border: 10px solid #06b6d4; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15); } .it-card-cyan:hover { box-shadow: 0 8px 24px rgba(6, 182, 212, 0.25); transform: translateY(-2px); } .it-card-cyan .it-header { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%); } .it-card-cyan .it-title { color: #164e63; } .it-card-cyan .it-copy-btn { color: #06b6d4; } .it-card-cyan .it-copy-btn:hover { color: #0891b2; } /* ----------------------------------------------------------------------------- Header - Title with Copy Button ----------------------------------------------------------------------------- */ .it-header { align-items: center; display: flex; height: auto; min-height: 44px; justify-content: space-between; padding: 8px 12px 8px 20px; } .it-title { font-size: 18px; font-weight: 600; line-height: 26px; margin: 0; letter-spacing: 0.2px; } /* ----------------------------------------------------------------------------- Copy Button - Action Trigger ----------------------------------------------------------------------------- */ .it-copy-btn { background-color: rgba(255, 255, 255, 0.95); background-image: none; border: 1.5px solid #d3e0f5; cursor: pointer; font-family: inherit; font-size: inherit; line-height: inherit; outline: none; padding: 3px; margin: 0; transition: all 0.2s ease; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .it-copy-btn:hover { transform: scale(1.05); background-color: rgba(255, 255, 255, 1); border-color: #10b981; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15); } .it-copy-btn:active { transform: scale(0.95); } /* Success state */ .it-copy-btn.copied { color: #10b981 !important; } /* SVG icon styling */ .it-copy-btn svg { display: block; width: 22px; height: 22px; } /* ----------------------------------------------------------------------------- Content - Code Display Area ----------------------------------------------------------------------------- */ .it-content { background: rgba(36, 40, 50, 0.5); overflow-x: auto; padding: 12px 16px; font-size: 14px; line-height: 22px; border-top: 3px solid #d3e0f5; } .it-content pre { margin: 0; padding: 1rem; /* Space for scrollbar */ white-space: pre-wrap; word-wrap: break-word; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace; max-height: 200px; /* Fixed height for ~90-100 words */ overflow-y: auto; /* Enable vertical scrolling */ } /* Custom scrollbar styling for better UX */ .it-content pre::-webkit-scrollbar { width: 6px; } .it-content pre::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } .it-content pre::-webkit-scrollbar-thumb { background: #9ca3af; /* Lighter gray - default (more visible) */ border-radius: 3px; } .it-content pre::-webkit-scrollbar-thumb:hover { background: #10b981; /* Green on hover - action indicator */ } /* Cyan card scrollbar styling */ .it-card-cyan .it-content pre::-webkit-scrollbar-thumb { background: #67e8f9; /* Lighter cyan - default (more visible) */ } .it-card-cyan .it-content pre::-webkit-scrollbar-thumb:hover { background: #06b6d4; /* Darker cyan on hover - action indicator */ } /* Amber card scrollbar styling */ .it-card-amber .it-content pre::-webkit-scrollbar-thumb { background: #fcd34d; /* Lighter amber - default (more visible) */ } .it-card-amber .it-content pre::-webkit-scrollbar-thumb:hover { background: #f59e0b; /* Darker amber on hover - action indicator */ } .it-content code { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } /* ----------------------------------------------------------------------------- Syntax Highlighting Classes ----------------------------------------------------------------------------- */ .it-comment { color: #9aa0a6; font-style: italic; } .it-string { color: #81c995; } .it-tag { color: #c58af9; } /* ----------------------------------------------------------------------------- Responsive Design ----------------------------------------------------------------------------- */ @media (max-width: 640px) { .it-card { font-size: 14px; width: 95%; border-width: 6px; } .it-header { padding: 8px 8px 8px 16px; } .it-title { font-size: 16px; } .it-content { padding: 10px 12px; font-size: 13px; } .it-copy-btn svg { width: 18px; height: 18px; } } /* ----------------------------------------------------------------------------- Accessibility ----------------------------------------------------------------------------- */ .it-copy-btn:focus { outline: 2px solid #a8c7fa; outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .it-copy-btn { transition: none; transform: none; } .it-copy-btn:hover, .it-copy-btn:active { transform: none; } } /* ============================================================================= STAT BREAK INFOGRAPHICS - Section Dividers ============================================================================= */ /* Purpose: Value-added visual breaks between card sections Psychology: Pattern interrupt + data validation + progress marker Design: 3 different layouts for variety while maintaining cohesion */ .it-stat-break { margin: 4rem auto; width: 85%; text-align: center; } .it-stat-break svg { width: 100%; height: auto; max-width: 600px; } /* Mobile responsive */ @media (max-width: 640px) { .it-stat-break { margin: 3rem auto; width: 95%; } .it-stat-break svg { max-width: 100%; } }