:root { --primary-color: #800020; /* Deep burgundy */ --secondary-color: #B22222; /* Firebrick red */ --accent-color: #A30000; /* Darker red replacing orange */ --text-color: #f0f2f5; /* Slightly dimmed light text */ --text-muted: #d6a5b3; /* Muted burgundy text */ --background-dark: #0a0c14; /* Much darker background */ --background-card: #161b26; /* Darker card background */ --background-code: #252d3d; /* Darker code background */ --highlight: #0066CC; /* Deeper blue for better contrast with reds */ --card-border: rgba(176, 27, 27, 0.3); /* Red card border */ --card-shadow: rgba(0, 0, 0, 0.7); /* Darker shadow for better contrast */ } body { font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif; color: var(--text-color); margin: 0; padding: 0; background-color: var(--background-dark); font-size: 15px; } .slidev-layout { display: flex; flex-direction: column; height: 100%; padding: 1.75rem; background: linear-gradient(150deg, var(--background-dark), #1c2333, #0f1623); background-size: 300% 300%; color: var(--text-color); overflow: hidden; border-radius: 0; box-shadow: none; animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Different backgrounds for different slides */ .slidev-layout[data-content-file*="intro"] { background: linear-gradient(135deg, #0a0c14, #1e2233, #0f1a2a); } .slidev-layout[data-content-file*="risks-and-vulnerabilities"] { background: linear-gradient(135deg, #140a0c, #291517, #1e0f12); } .slidev-layout[data-content-file*="understanding-llm-vulns"] { background: linear-gradient(135deg, #0c0d14, #1a1e33, #12172a); } .slidev-layout[data-content-file*="red-teaming-methodologies"] { background: linear-gradient(135deg, #0e0a14, #271729, #1e122a); } .slidev-layout[data-content-file*="advanced-att-techniques"] { background: linear-gradient(135deg, #14090c, #2d1319, #26121e); } .slidev-layout[data-content-file*="major-bench-secu"] { background: linear-gradient(135deg, #0a1214, #152329, #0f1a2a); } .slidev-layout[data-content-file*="deepeval-example"] { background: linear-gradient(135deg, #0a0e14, #151c29, #0f162a); } .slidev-layout[data-content-file*="best-practices"] { background: linear-gradient(135deg, #0c140a, #192915, #122a0f); } .slidev-layout[data-content-file*="end"] { background: linear-gradient(135deg, #14130a, #292617, #2a250f); } /* Layout with center class */ .slidev-layout.center { background: radial-gradient(circle at center, #15192b, #0a0c14 70%); } /* Common elements styling */ .slidev-layout h1 { font-size: 2.2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--highlight); line-height: 1.1; letter-spacing: -0.02em; position: relative; padding-bottom: 0.5rem; } .slidev-layout h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 5rem; height: 0.2rem; background: linear-gradient(90deg, var(--accent-color), var(--highlight)); border-radius: 4px; } .slidev-layout h2 { font-size: 1.6rem; font-weight: 600; color: var(--primary-color); margin: 0.8rem 0; } .slidev-layout p { font-size: 1.1rem; line-height: 1.5; opacity: 0.9; } .slidev-layout ul, .slidev-layout ol { padding-left: 1.25rem; margin-top: 0.75rem; } .slidev-layout ul li, .slidev-layout ol li { margin-bottom: 0.6rem; font-size: 1.1rem; position: relative; line-height: 1.4; } .slidev-layout ul li::marker { color: var(--accent-color); } /* Cards and boxes styling */ .card { background: linear-gradient(135deg, rgba(22, 27, 38, 0.9), rgba(37, 34, 45, 0.9)); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; border: 1px solid var(--card-border); transition: all 0.3s ease; box-shadow: 0 4px 12px var(--card-shadow); } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); border-color: rgba(229, 62, 62, 0.5); } .two-column { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.5rem; } .highlight-word { color: var(--highlight); font-weight: 600; } .key-term { color: var(--accent-color); font-weight: 500; } /* Table styling */ .slidev-layout table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1rem 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .slidev-layout table th { background-color: var(--background-card); color: var(--primary-color); font-weight: 600; padding: 0.6rem 1rem; text-align: left; font-size: 0.9rem; border-bottom: 2px solid var(--accent-color); } .slidev-layout table td { padding: 0.5rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.9rem; background-color: rgba(11, 15, 25, 0.9); } .slidev-layout table tr:last-child td { border-bottom: none; } /* Compact table */ .compact-table table td, .compact-table table th { padding: 0.4rem 0.5rem; font-size: 0.85rem; } /* Code blocks */ .slidev-layout pre, .slidev-layout code { border-radius: 6px; font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 0.9rem; } /* Center layout */ .center-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; } /* Better practices list */ .better-list li { background: rgba(12, 16, 29, 0.9); margin: 0.7rem 0; padding: 0.6rem 1rem 0.6rem 0.5rem; border-radius: 6px; border-left: 3px solid var(--accent-color); list-style-position: inside; } .better-list li::marker { color: var(--highlight); } /* Grid layout for benchmarks */ .grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } /* Responsive design adjustments */ @media (max-width: 768px) { .slidev-layout h1 { font-size: 1.8rem; } .slidev-layout h2 { font-size: 1.4rem; } .two-column { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } } /* Hover effect for interactive elements */ .slidev-layout h2:hover, .slidev-layout h3:hover, .slidev-layout a:hover, .slidev-layout button:hover, .slidev-layout .key-term:hover, .slidev-layout .highlight-word:hover, .intro-point:hover, .benchmark-title:hover { transform: scale(1.03); transition: transform 0.2s ease; } /* Make tables more interactive */ .slidev-layout table tr:hover { transform: scale(1.01); z-index: 5; position: relative; } /* Add code highlighting based on theme */ .slidev-layout pre { background-color: #0c1525; border: 1px solid var(--card-border); transition: all 0.3s ease; } .slidev-layout pre:hover { transform: scale(1.02); border-color: var(--highlight); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }