garywelz/programming_framework

1/* Reset and base styles */2* {3    margin: 0;4    padding: 0;5    box-sizing: border-box;6}7 8body {9    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;10    line-height: 1.6;11    color: #333;12    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);13    min-height: 100vh;14}15 16.container {17    max-width: 1200px;18    margin: 0 auto;19    padding: 2rem;20}21 22/* Header */23header {24    text-align: center;25    margin-bottom: 3rem;26    color: white;27}28 29header h1 {30    font-size: 3rem;31    font-weight: 700;32    margin-bottom: 1rem;33    text-shadow: 0 2px 4px rgba(0,0,0,0.3);34}35 36header p {37    font-size: 1.2rem;38    opacity: 0.9;39    max-width: 600px;40    margin: 0 auto;41}42 43/* Tabs */44.tabs {45    display: flex;46    justify-content: center;47    margin-bottom: 2rem;48    background: rgba(255, 255, 255, 0.1);49    border-radius: 12px;50    padding: 0.5rem;51    backdrop-filter: blur(10px);52}53 54.tab-btn {55    background: none;56    border: none;57    color: white;58    padding: 0.75rem 1.5rem;59    margin: 0 0.25rem;60    border-radius: 8px;61    cursor: pointer;62    font-size: 1rem;63    font-weight: 500;64    transition: all 0.3s ease;65}66 67.tab-btn:hover {68    background: rgba(255, 255, 255, 0.2);69}70 71.tab-btn.active {72    background: white;73    color: #667eea;74    box-shadow: 0 4px 12px rgba(0,0,0,0.15);75}76 77/* Tab content */78.tab-content {79    display: none;80    animation: fadeIn 0.5s ease-in;81}82 83.tab-content.active {84    display: block;85}86 87@keyframes fadeIn {88    from { opacity: 0; transform: translateY(20px); }89    to { opacity: 1; transform: translateY(0); }90}91 92/* Cards */93.card {94    background: white;95    border-radius: 16px;96    padding: 2rem;97    box-shadow: 0 10px 30px rgba(0,0,0,0.1);98    margin-bottom: 2rem;99}100 101.card h2 {102    color: #667eea;103    font-size: 2rem;104    margin-bottom: 1rem;105    font-weight: 600;106}107 108.card h3 {109    color: #764ba2;110    font-size: 1.3rem;111    margin: 1.5rem 0 0.5rem 0;112    font-weight: 600;113}114 115.card p {116    color: #666;117    font-size: 1rem;118    margin-bottom: 1rem;119}120 121/* Features grid */122.features {123    display: grid;124    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));125    gap: 1.5rem;126    margin-top: 2rem;127}128 129.feature {130    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);131    color: white;132    padding: 1.5rem;133    border-radius: 12px;134    text-align: center;135}136 137.feature h3 {138    color: white;139    margin-bottom: 0.5rem;140}141 142.feature p {143    color: rgba(255, 255, 255, 0.9);144    font-size: 0.9rem;145}146 147/* Methodology steps */148.methodology-step {149    background: #f8f9fa;150    padding: 1.5rem;151    border-radius: 12px;152    margin-bottom: 1.5rem;153    border-left: 4px solid #667eea;154}155 156.methodology-step h3 {157    color: #667eea;158    margin-bottom: 0.5rem;159}160 161.methodology-step ul {162    margin-left: 1.5rem;163    margin-top: 0.5rem;164}165 166.methodology-step li {167    color: #666;168    margin-bottom: 0.25rem;169}170 171/* Examples */172.example {173    background: #f8f9fa;174    padding: 1.5rem;175    border-radius: 12px;176    margin-bottom: 2rem;177    border: 1px solid #e9ecef;178}179 180.example h3 {181    color: #667eea;182    margin-bottom: 1rem;183}184 185.framework-application {186    background: white;187    padding: 1rem;188    border-radius: 8px;189    margin-bottom: 1rem;190    border: 1px solid #dee2e6;191}192 193.framework-application h4 {194    color: #764ba2;195    margin-bottom: 0.5rem;196}197 198.framework-application ol {199    margin-left: 1.5rem;200}201 202.framework-application li {203    color: #666;204    margin-bottom: 0.25rem;205}206 207.code-example {208    background: #2d3748;209    border-radius: 8px;210    overflow: hidden;211}212 213.code-example h4 {214    background: #4a5568;215    color: white;216    padding: 0.75rem 1rem;217    margin: 0;218    font-size: 0.9rem;219}220 221.code-example pre {222    margin: 0;223    padding: 1rem;224    overflow-x: auto;225}226 227.code-example code {228    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;229    font-size: 0.9rem;230    line-height: 1.5;231}232 233/* Batch Status Section */234.batch-status {235    margin: 3rem 0;236}237 238.status-grid {239    display: grid;240    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));241    gap: 1.5rem;242    margin-top: 1.5rem;243}244 245.status-card {246    background: white;247    border-radius: 12px;248    padding: 1.5rem;249    border: 2px solid #e9ecef;250    transition: all 0.3s ease;251}252 253.status-card.complete {254    border-color: #51cf66;255    background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);256}257 258.status-card.in-progress {259    border-color: #ffd43b;260    background: linear-gradient(135deg, #fffef8 0%, #fef9e8 100%);261}262 263.status-card.external {264    border-color: #74c0fc;265    background: linear-gradient(135deg, #f8fbff 0%, #e8f4ff 100%);266}267 268.status-card h3 {269    margin: 0 0 1rem 0;270    color: #333;271    font-size: 1.2rem;272}273 274.status-card p {275    margin: 0.5rem 0;276    color: #666;277    line-height: 1.5;278}279 280.status-card p strong {281    color: #333;282}283 284/* Resources grid */285.resources-grid {286    display: grid;287    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));288    gap: 1.5rem;289}290 291.resource {292    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);293    padding: 1.5rem;294    border-radius: 12px;295    border: 1px solid #e9ecef;296}297 298.resource h3 {299    color: #667eea;300    margin-bottom: 1rem;301    text-align: center;302}303 304.resource ul {305    list-style: none;306}307 308.resource li {309    color: #666;310    padding: 0.5rem 0;311    border-bottom: 1px solid rgba(102, 102, 102, 0.1);312}313 314.resource li:last-child {315    border-bottom: none;316}317 318.resource a {319    color: #667eea;320    text-decoration: none;321    transition: color 0.3s ease;322}323 324.resource a:hover {325    color: #764ba2;326    text-decoration: underline;327}328 329/* Responsive design */330@media (max-width: 768px) {331    .container {332        padding: 1rem;333    }334    335    header h1 {336        font-size: 2rem;337    }338    339    .tabs {340        flex-direction: column;341    }342    343    .tab-btn {344        margin: 0.25rem 0;345    }346    347    .features {348        grid-template-columns: 1fr;349    }350    351    .resources-grid {352        grid-template-columns: 1fr;353    }354    355    .card {356        padding: 1.5rem;357    }358}359 360/* Prism.js theme overrides */361pre[class*="language-"] {362    background: #2d3748 !important;363    border-radius: 8px !important;364}365 366code[class*="language-"] {367    color: #e2e8f0 !important;368}369 370.token.keyword {371    color: #ff6b6b !important;372}373 374.token.string {375    color: #51cf66 !important;376}377 378.token.comment {379    color: #868e96 !important;380}381 382.token.function {383    color: #74c0fc !important;384}385