defuse/security-reference-guide

1/* Additional custom styles for enhanced UI */2 3/* Smooth scrolling for anchor links */4html {5    scroll-behavior: smooth;6}7 8/* Custom scrollbar for webkit browsers */9::-webkit-scrollbar {10    width: 8px;11}12 13::-webkit-scrollbar-track {14    background: #1a1a1a;15}16 17::-webkit-scrollbar-thumb {18    background: #f97316;19    border-radius: 4px;20}21 22::-webkit-scrollbar-thumb:hover {23    background: #ea580c;24}25 26/* Code block styling */27pre {28    background: #1a1a1a !important;29    border: 1px solid #374151;30    border-radius: 8px;31    padding: 1rem;32    overflow-x: auto;33    max-height: 400px;34}35 36code {37    font-family: 'Courier New', Courier, monospace;38    font-size: 0.875rem;39    line-height: 1.5;40}41 42/* Enhanced gradient backgrounds */43.gradient-bg {44    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);45}46 47.hero-pattern {48    background-image: radial-gradient(circle at 1px 1px, rgba(249, 115, 22, 0.15) 1px, transparent 0);49    background-size: 25px 25px;50}51 52/* Card hover effects */53.vulnerability-card {54    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);55    border: 1px solid transparent;56}57 58.vulnerability-card:hover {59    border-color: #f97316;60    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 61                0 0 0 1px rgba(249, 115, 22, 0.1);62    transform: translateY(-4px);63}64 65/* Loading animation for images */66img {67    transition: opacity 0.3s ease;68}69 70img:not([src]) {71    opacity: 0;72}73 74/* Mobile optimizations */75@media (max-width: 768px) {76    .vulnerability-card {77        margin-bottom: 1rem;78    }79    80    pre {81        font-size: 0.75rem;82        padding: 0.75rem;83    }84}85 86/* Print styles */87@media print {88    .vulnerability-card {89        break-inside: avoid;90        border: 1px solid #ccc;91        margin-bottom: 1rem;92    }93    94    nav, footer, #back-to-top {95        display: none;96    }97}98 99/* Focus styles for accessibility */100a:focus, button:focus {101    outline: 2px solid #f97316;102    outline-offset: 2px;103}104 105/* Dark mode optimizations */106.dark pre {107    background: #0f172a !important;108    border-color: #334155;109}110 111/* Code syntax highlighting enhancements */112.token.comment {113    color: #6b7280;114}115 116.token.string {117    color: #10b981;118}119 120.token.number {121    color: #f59e0b;122}123 124.token.keyword {125    color: #ef4444;126}127 128.token.operator {129    color: #8b5cf6;130}131 132/* Animation keyframes */133@keyframes fadeInUp {134    from {135        opacity: 0;136        transform: translateY(20px);137    }138    to {139        opacity: 1;140        transform: translateY(0);141    }142}143 144.fade-in-up {145    animation: fadeInUp 0.6s ease-out;146}147 148/* Navigation enhancements */149nav a {150    position: relative;151}152 153nav a::after {154    content: '';155    position: absolute;156    width: 0;157    height: 2px;158    bottom: -2px;159    left: 50%;160    background-color: #f97316;161    transition: all 0.3s ease;162}163 164nav a:hover::after {165    width: 100%;166    left: 0;167}168 169/* Button enhancements */170button, .btn {171    transition: all 0.2s ease;172}173 174button:hover, .btn:hover {175    transform: translateY(-1px);176}177 178button:active, .btn:active {179    transform: translateY(0);180}181 182/* Typography enhancements */183h1, h2, h3, h4, h5, h6 {184    letter-spacing: -0.025em;185}186 187.text-accent-500 {188    text-shadow: 0 0 10px rgba(249, 115, 22, 0.3);189}190 191/* Responsive grid adjustments */192@media (min-width: 1024px) {193    .grid.lg\\:grid-cols-3 {194        grid-template-columns: repeat(3, minmax(0, 1fr));195    }196}197 198/* High contrast mode support */199@media (prefers-contrast: high) {200    .bg-black-800 {201        background-color: #000000;202    }203    204    .border-gray-700 {205        border-color: #ffffff;206    }207}208 209/* Reduced motion support */210@media (prefers-reduced-motion: reduce) {211    *, *::before, *::after {212        animation-duration: 0.01ms !important;213        animation-iteration-count: 1 !important;214        transition-duration: 0.01ms !important;215        scroll-behavior: auto !important;216    }217}