/* --------------------------------------------------------------------- Design tokens (kept identical to inline Tailwind config on every page): - Primary / accent ............ #3366ff - Background .................. #0a0a0a - Surface low ................. #161616 - Outline variant ............. #2a2a2a - Fonts ....................... Space Grotesk (headline/label), Inter (body) - Border radius ............... 0 (sharp corners — design system rule) ===================================================================== */ /* --------------------------------------------------------------------- 1. Material Symbols — base icon defaults ------------------------------------------------------------------ */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Listing / blog pages prefer 20px icons by default */ .icon-20 .material-symbols-outlined, body.listing .material-symbols-outlined { font-size: 20px; } /* --------------------------------------------------------------------- 2. Custom scrollbar (WebKit) ------------------------------------------------------------------ */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #3366ff; } /* --------------------------------------------------------------------- 3. Page background — dot-grid + navy radial gradient (Required on every page per CLAUDE.md) ------------------------------------------------------------------ */ body { background-color: #0a0a0a; background-image: radial-gradient(rgba(41, 55, 97, 0.15) 1px, transparent 0), radial-gradient(circle at 50% 50%, #1a1b26 0%, #0a0a0a 100%); background-size: 32px 32px, 100% 100%; background-attachment: fixed; } /* --------------------------------------------------------------------- 4. Vignette overlay — softens page edges (Place

as first child of ) ------------------------------------------------------------------ */ .bg-vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(10, 10, 10, 0.8) 100%); z-index: -1; } /* --------------------------------------------------------------------- 5. Hero matrix grid (used on index.html hero section) ------------------------------------------------------------------ */ .matrix-grid { background-image: linear-gradient(rgba(51, 102, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 102, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; } /* --------------------------------------------------------------------- 6. Smooth scroll & anchor offset (blog / writeup pages with TOC) ------------------------------------------------------------------ */ html { scroll-behavior: smooth; } section[id] { scroll-margin-top: 100px; } /* --------------------------------------------------------------------- 7. CTF page — filter dropdown selects ------------------------------------------------------------------ */ .filter-select { appearance: none; -webkit-appearance: none; background-color: #121212; color: #e2e2e2; border: 1px solid #2a2a2a; font-family: 'Space Grotesk', sans-serif; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 8px 36px 8px 14px; cursor: pointer; outline: none; border-radius: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233366ff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s; min-width: 140px; } .filter-select:focus, .filter-select:hover { border-color: #3366ff; color: #3366ff; } .filter-select option { background-color: #121212; color: #e2e2e2; font-size: 11px; } /* --------------------------------------------------------------------- 8. CTF page — machine card transitions ------------------------------------------------------------------ */ [data-machine] { transition: opacity 0.25s ease, transform 0.25s ease; } [data-machine].hidden-card { display: none; } /* --------------------------------------------------------------------- 9. CTF page — CSS background patterns for cards without images ------------------------------------------------------------------ */ .bg-demon-pattern { background-color: #0a0a0a; background-image: linear-gradient(rgba(51, 102, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 102, 255, 0.04) 1px, transparent 1px), radial-gradient(circle at 70% 30%, rgba(51, 102, 255, 0.08) 0%, transparent 60%); background-size: 40px 40px, 40px 40px, 100% 100%; } .bg-blinders-pattern { background-color: #0a0a0a; background-image: radial-gradient(rgba(51, 102, 255, 0.12) 1px, transparent 0), radial-gradient(circle at 30% 70%, rgba(51, 102, 255, 0.07) 0%, transparent 55%); background-size: 24px 24px, 100% 100%; } .bg-incoming-pattern { background-color: #0a0a0a; background-image: repeating-linear-gradient( 45deg, rgba(51, 102, 255, 0.03) 0px, rgba(51, 102, 255, 0.03) 1px, transparent 1px, transparent 20px ); } /* --------------------------------------------------------------------- 10. Code & terminal blocks (writeup pages) ------------------------------------------------------------------ */ pre { overflow-x: auto; white-space: pre-wrap; word-break: break-all; } code { font-family: 'Courier New', monospace; } /* Inline syntax-highlight helpers */ .code-keyword { color: #3366ff; } .code-string { color: #a0c4ff; } .code-comment { color: #555; } .code-value { color: #e2e2e2; } /* --------------------------------------------------------------------- 11. Clickable CTF cards (cursor hint) ------------------------------------------------------------------ */ [data-machine][data-clickable="true"] { cursor: pointer; }