/* Software & Tools page - styles layered on top of assets/cv/style.css */ .tool-card { display: flex; flex-direction: column; height: 100%; background-color: #ffffff; border: 1px solid #e0e0e0; padding: 28px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .tool-card:hover { border-color: #96694e; transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } .tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: #f7f2ee; color: #96694e; font-size: 1.25rem; margin-bottom: 20px; flex-shrink: 0; } .tool-role { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #96694e; margin-bottom: 8px; } .tool-meta { margin-top: auto; padding-top: 20px; border-top: 1px solid #f0ece8; font-size: 0.8125rem; color: #666666; font-weight: 500; } /* Flagship block */ .suite-panel { background-color: #ffffff; border: 1px solid #e0e0e0; border-top: 3px solid #96694e; padding: 40px; } .suite-badge { display: inline-block; background-color: #96694e; color: #ffffff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; } .challenge-box { background-color: #faf7f4; border-inline-start: 3px solid #96694e; padding: 24px 28px; } /* Stack list */ .stack-group dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #333333; margin-bottom: 10px; } .stack-group dd { margin: 0 0 28px 0; color: #666666; line-height: 1.7; } .stack-group dd:last-child { margin-bottom: 0; } .stat-box { border: 1px solid #e0e0e0; padding: 24px; background-color: #ffffff; } /* Scroll reveal. Content is visible by DEFAULT. It is only hidden once the inline head script has confirmed the browser can reveal it again (IntersectionObserver present, motion not reduced) by setting .reveal-ready on . If scripting fails at any point the page still renders - never hide content behind JS that may not run. */ .reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-ready .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-ready .reveal { opacity: 1; transform: none; transition: none; } .tool-card:hover { transform: none; } } @media (max-width: 640px) { .suite-panel { padding: 24px; } .tool-card { padding: 22px; } .challenge-box { padding: 20px; } }