297 lines
6.7 KiB
CSS
297 lines
6.7 KiB
CSS
|
: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);
|
||
|
}
|