DoubleD31/binary-whisperer-code-matrix
0
1@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');2 3:root {4 --primary-color: #6366f1;5 --secondary-color: #8b5cf6;6 --success-color: #10b981;7 --warning-color: #f59e0b;8 --error-color: #ef4444;9 --bg-primary: #ffffff;10 --bg-secondary: #f3f4f6;11 --bg-tertiary: #e5e7eb;12 --text-primary: #1f2937;13 --text-secondary: #6b7280;14 --border-color: #d1d5db;15 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);16 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);17 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);18 --radius-sm: 0.375rem;19 --radius-md: 0.5rem;20 --radius-lg: 0.75rem;21}22 23.theme-dark {24 --bg-primary: #1f2937;25 --bg-secondary: #111827;26 --bg-tertiary: #374151;27 --text-primary: #f9fafb;28 --text-secondary: #9ca3af;29 --border-color: #4b5563;30}31 32* {33 margin: 0;34 padding: 0;35 box-sizing: border-box;36}37 38body {39 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;40 background: var(--bg-primary);41 color: var(--text-primary);42 line-height: 1.6;43 transition: background-color 0.3s ease, color 0.3s ease;44}45 46.header {47 background: var(--bg-secondary);48 border-bottom: 1px solid var(--border-color);49 position: sticky;50 top: 0;51 z-index: 100;52 backdrop-filter: blur(10px);53 background: rgba(249, 250, 251, 0.95);54}55 56.theme-dark .header {57 background: rgba(17, 24, 39, 0.95);58}59 60.header-content {61 max-width: 1200px;62 margin: 0 auto;63 padding: 1rem 1.5rem;64 display: flex;65 justify-content: space-between;66 align-items: center;67}68 69.brand {70 display: flex;71 align-items: center;72 gap: 0.75rem;73}74 75.logo {76 font-size: 1.75rem;77 animation: bounce 2s infinite;78}79 80.brand h1 {81 font-size: 1.5rem;82 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));83 -webkit-background-clip: text;84 -webkit-text-fill-color: transparent;85 background-clip: text;86}87 88.pocket-badge {89 background: var(--success-color);90 color: white;91 padding: 0.25rem 0.75rem;92 border-radius: var(--radius-md);93 font-size: 0.75rem;94 font-weight: 600;95 text-transform: uppercase;96 letter-spacing: 0.05em;97}98 99.header-nav {100 display: flex;101 align-items: center;102 gap: 1rem;103}104 105.built-with {106 color: var(--text-secondary);107 text-decoration: none;108 font-size: 0.875rem;109 transition: color 0.2s;110}111 112.built-with:hover {113 color: var(--primary-color);114}115 116.theme-btn {117 background: var(--bg-tertiary);118 border: 1px solid var(--border-color);119 border-radius: var(--radius-md);120 padding: 0.5rem;121 cursor: pointer;122 transition: all 0.2s;123}124 125.theme-btn:hover {126 transform: scale(1.05);127 background: var(--primary-color);128 color: white;129}130 131.main-container {132 max-width: 1200px;133 margin: 0 auto;134 padding: 2rem 1.5rem;135}136 137.hero-section {138 text-align: center;139 margin-bottom: 3rem;140}141 142.hero-title {143 font-size: 2.5rem;144 margin-bottom: 1rem;145 min-height: 3rem;146}147 148.typewriter {149 display: inline-block;150 border-right: 3px solid var(--primary-color);151 animation: blink 1s infinite;152}153 154@keyframes blink {155 0%, 50% {156 border-color: var(--primary-color);157 }158 51%, 100% {159 border-color: transparent;160 }161}162 163@keyframes bounce {164 0%, 100% {165 transform: translateY(0);166 }167 50% {168 transform: translateY(-5px);169 }170}171 172.hero-subtitle {173 color: var(--text-secondary);174 font-size: 1.125rem;175 margin-bottom: 2rem;176}177 178.quick-stats {179 display: flex;180 justify-content: center;181 gap: 2rem;182 flex-wrap: wrap;183}184 185.stat-item {186 text-align: center;187 padding: 1rem;188 background: var(--bg-secondary);189 border-radius: var(--radius-lg);190 min-width: 100px;191 transition: transform 0.2s;192}193 194.stat-item:hover {195 transform: translateY(-2px);196}197 198.stat-number {199 display: block;200 font-size: 2rem;201 font-weight: bold;202 color: var(--primary-color);203}204 205.stat-label {206 font-size: 0.875rem;207 color: var(--text-secondary);208}209 210.section-title {211 font-size: 1.875rem;212 text-align: center;213 margin-bottom: 2rem;214 color: var(--text-primary);215}216 217.pathways-grid {218 display: grid;219 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));220 gap: 1.5rem;221 margin-bottom: 3rem;222}223 224.pathway-card {225 background: var(--bg-secondary);226 border: 2px solid var(--border-color);227 border-radius: var(--radius-lg);228 padding: 1.5rem;229 cursor: pointer;230 transition: all 0.3s;231 position: relative;232 overflow: hidden;233}234 235.pathway-card::before {236 content: '';237 position: absolute;238 top: 0;239 left: 0;240 width: 100%;241 height: 4px;242 background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));243 transform: translateX(-100%);244 transition: transform 0.3s;245}246 247.pathway-card:hover::before {248 transform: translateX(0);249}250 251.pathway-card:hover {252 transform: translateY(-4px);253 box-shadow: var(--shadow-lg);254 border-color: var(--primary-color);255}256 257.pathway-icon {258 font-size: 2.5rem;259 display: block;260 margin-bottom: 1rem;261}262 263.pathway-card h4 {264 font-size: 1.25rem;265 margin-bottom: 0.5rem;266 color: var(--text-primary);267}268 269.pathway-card p {270 color: var(--text-secondary);271 font-size: 0.875rem;272 margin-bottom: 1rem;273}274 275.difficulty-badge {276 display: inline-block;277 padding: 0.25rem 0.75rem;278 border-radius: var(--radius-sm);279 font-size: 0.75rem;280 font-weight: 600;281 text-transform: uppercase;282}283 284.difficulty-badge.beginner {285 background: #d1fae5;286 color: #065f46;287}288 289.difficulty-badge.intermediate {290 background: #fed7aa;291 color: #92400e;292}293 294.difficulty-badge.advanced {295 background: #fecaca;296 color: #991b1b;297}298 299.chat-section {300 margin-bottom: 2rem;301}302 303.chat-container {304 background: var(--bg-secondary);305 border-radius: var(--radius-lg);306 border: 1px solid var(--border-color);307 max-width: 800px;308 margin: 0 auto;309 overflow: hidden;310}311 312.chat-header {313 background: var(--primary-color);314 color: white;315 padding: 1rem;316 display: flex;317 justify-content: space-between;318 align-items: center;319}320 321.chat-status {322 display: flex;323 align-items: center;324 gap: 0.5rem;325 font-size: 0.875rem;326}327 328.chat-messages {329 height: 400px;330 overflow-y: auto;331 padding: 1rem;332 background: var(--bg-primary);333}334 335.message {336 display: flex;337 gap: 0.75rem;338 margin-bottom: 1rem;339 animation: slideIn 0.3s ease;340}341 342@keyframes slideIn {343 from {344 opacity: 0;345 transform: translateY(10px);346 }347 to {348 opacity: 1;349 transform: translateY(0);350 }351}352 353.message-avatar {354 width: 40px;355 height: 40px;356 border-radius: 50%;357 display: flex;358 align-items: center;359 justify-content: center;360 font-size: 1.25rem;361 flex-shrink: 0;362}363 364.ai-message .message-avatar {365 background: var(--primary-color);366}367 368.user-message {369 flex-direction: row-reverse;370}371 372.user-message .message-avatar {373 background: var(--secondary-color);374}375 376.message-content {377 background: var(--bg-secondary);378 padding: 0.75rem 1rem;379 border-radius: var(--radius-md);380 max-width: 70%;381}382 383.user-message .message-content {384 background: var(--primary-color);385 color: white;386}387 388.chat-input-container {389 padding: 1rem;390 background: var(--bg-secondary);391 border-top: 1px solid var(--border-color);392}393 394.input-wrapper {395 display: flex;396 gap: 0.5rem;397 margin-bottom: 1rem;398}399 400.chat-input {401 flex: 1;402 padding: 0.75rem;403 border: 1px solid var(--border-color);404 border-radius: var(--radius-md);405 background: var(--bg-primary);406 color: var(--text-primary);407 font-size: 1rem;408 transition: border-color 0.2s;409}410 411.chat-input:focus {412 outline: none;413 border-color: var(--primary-color);414}415 416.send-btn {417 background: var(--primary-color);418 color: white;419 border: none;420 border-radius: var(--radius-md);421 padding: 0.75rem 1.25rem;422 cursor: pointer;423 font-size: 1.25rem;424 transition: all 0.2s;425}426 427.send-btn:hover {428 background: var(--secondary-color);429 transform: scale(1.05);430}431 432.quick-questions {433 display: flex;434 gap: 0.5rem;435 flex-wrap: wrap;436}437 438.quick-btn {439 background: var(--bg-tertiary);440 border: 1px solid var(--border-color);441 border-radius: var(--radius-sm);442 padding: 0.5rem 0.75rem;443 font-size: 0.875rem;444 cursor: pointer;445 transition: all 0.2s;446}447 448.quick-btn:hover {449 background: var(--primary-color);450 color: white;451 border-color: var(--primary-color);452}453 454.code-snippet-section {455 margin-bottom: 2rem;456}457 458.snippet-container {459 background: var(--bg-secondary);460 border-radius: var(--radius-lg);461 border: 1px solid var(--border-color);462 overflow: hidden;463}464 465.snippet-header {466 background: var(--bg-tertiary);467 padding: 0.75rem 1rem;468 display: flex;469 justify-content: space-between;470 align-items: center;471}472 473.copy-btn {474 background: var(--primary-color);475 color: white;476 border: none;477 border-radius: var(--radius-sm);478 padding: 0.25rem 0.75rem;479 cursor: pointer;480 font-size: 0.875rem;481 transition: background 0.2s;482}483 484.copy-btn:hover {485 background: var(--secondary-color);486}487 488.code-block {489 background: #1e293b;490 color: #e2e8f0;491 padding: 1.5rem;492 overflow-x: auto;493 font-family: 'Fira Code', 'Courier New', monospace;494 font-size: 0.875rem;495 line-height: 1.5;496 font-variant-ligatures: common-ligatures;497 -webkit-font-feature-settings: "liga", "calt";498 font-feature-settings: "liga", "calt";499}500 501.footer {502 background: var(--bg-secondary);503 border-top: 1px solid var(--border-color);504 padding: 2rem 0;505 margin-top: 3rem;506}507 508.footer-content {509 max-width: 1200px;510 margin: 0 auto;511 padding: 0 1.5rem;512 text-align: center;513}514 515.footer-links {516 margin-top: 0.5rem;517 color: var(--text-secondary);518 font-size: 0.875rem;519}520 521@media (max-width: 768px) {522 .header-content {523 flex-direction: column;524 gap: 1rem;525 }526 527 .hero-title {528 font-size: 2rem;529 }530 531 .quick-stats {532 gap: 1rem;533 }534 535 .pathways-grid {536 grid-template-columns: 1fr;537 }538 539 .message-content {540 max-width: 85%;541 }542 543 .chat-messages {544 height: 300px;545 }546 547 .quick-questions {548 justify-content: center;549 }550}