.td-content{max-width:1200px;margin:0 auto;padding:2rem 1rem;line-height:1.7;color:#2d3748}.td-content h1,.td-content h2,.td-content h3,.td-content h4,.td-content h5,.td-content h6{margin-top:2rem;margin-bottom:1rem;font-weight:600;line-height:1.3;color:#1a202c}.td-content h1{font-size:2.25rem}.td-content h2{font-size:1.875rem}.td-content h3{font-size:1.5rem}.td-content h4{font-size:1.25rem}.td-content p{margin-bottom:1.5rem;font-size:1.1rem;line-height:1.8;color:#2d3748}.td-content a{color:#3182ce;text-decoration:none;transition:color .2s ease}.td-content a:hover{color:#2c5282;text-decoration:underline}.td-content pre{background-color:#1e1e1e;border-radius:.5rem;padding:1.25rem;margin:1.5rem 0;overflow-x:auto;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,6%)}.td-content code{font-family:sfmono-regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace;font-size:.9em;color:#e2e8f0;background-color:rgba(226,232,240,.1);padding:.2em .4em;border-radius:.25rem}.td-content pre code{color:#e2e8f0;background-color:transparent;padding:0;border-radius:0;font-size:.9em;line-height:1.6}.td-content table{width:100%;margin:1.5rem 0;border-collapse:collapse;border-radius:.5rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,6%)}.td-content th,.td-content td{padding:1rem;border:1px solid #e2e8f0;text-align:left}.td-content th{background-color:#f7fafc;font-weight:600;color:#2d3748}.td-content tr:nth-child(even){background-color:#f8fafc}.td-content img{max-width:100%;height:auto;border-radius:.5rem;margin:2rem 0;display:block;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,6%)}.td-content blockquote{border-left:4px solid #4299e1;padding:1rem 1.5rem;margin:1.5rem 0;background-color:#f8fafc;color:#4a5568;font-style:italic;border-radius:0 .375rem .375rem 0}.td-content ul,.td-content ol{margin:1.5rem 0;padding-left:2rem}.td-content li{margin-bottom:.5rem;line-height:1.7}@media(max-width:768px){.td-content{padding:1rem .5rem}.td-content h1{font-size:1.875rem}.td-content h2{font-size:1.5rem}.td-content h3{font-size:1.25rem}.td-content pre{border-radius:0;margin-left:-1rem;margin-right:-1rem;padding:1rem}}.category-card{all:unset;transition:all .3s ease;border:1px solid rgba(0,0,0,5%) !important;border-radius:.75rem !important;overflow:hidden !important;background:#fff !important;height:auto !important;display:block !important;text-decoration:none !important;color:inherit !important;float:none !important;position:static !important;width:100% !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important}.category-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,4%);border-color:rgba(13,110,253,.2)}.category-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:rgba(13,110,253,.1);color:#0d6efd;border-radius:50%;font-size:1.25rem}.category-icon-lg{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background-color:rgba(13,110,253,.1);color:#0d6efd;border-radius:1rem;font-size:1.75rem}.category-page .breadcrumb{background-color:transparent;padding:.5rem 0;margin-bottom:1.5rem}.category-page .breadcrumb-item a{color:#6c757d;text-decoration:none;transition:color .2s}.category-page .breadcrumb-item a:hover{color:#0d6efd}.category-page .breadcrumb-item.active{color:#495057;font-weight:500}.post-card{border:1px solid rgba(0,0,0,5%);border-radius:.75rem;transition:all .3s ease;background:#fff;overflow:hidden}.post-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,8%);border-color:rgba(13,110,253,.2)}.post-meta{font-size:.85rem;color:#6c757d}.post-meta a{color:#6c757d;text-decoration:none;transition:color .2s}.post-meta a:hover{color:#0d6efd}@media(max-width:767.98px){.category-page .display-4{font-size:2rem}.category-icon-lg{width:48px;height:48px;font-size:1.5rem}.post-meta{flex-direction:column;align-items:flex-start}.post-meta>*:not(:last-child){margin-bottom:.5rem}}.badge{font-weight:500;padding:.35em .65em;border-radius:.5rem}.card{transition:all .3s ease;border:1px solid rgba(0,0,0,5%);border-radius:.75rem;background:#fff;margin-bottom:1.5rem;height:auto;overflow:hidden}.card-body{padding:1.25rem;height:auto;overflow:visible}.categories-list .card,.category-term .card{display:flex;flex-direction:column}.categories-list .card-body,.category-term .card-body{display:flex;flex-direction:column;flex-grow:1;padding:1.5rem}.categories-list .card-body>*:last-child,.category-term .card-body>*:last-child{margin-bottom:0}.card-title{color:#2c3e50;font-weight:600;margin-bottom:.75rem}.card-text{color:#6c757d;margin-bottom:1rem}.fa-folder{color:#ffc107;margin-right:.5rem}.categories-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important;gap:1.5rem !important;padding:1rem 0 !important;width:100% !important;margin:0 !important}.categories-grid .row,.categories-grid .col,.categories-grid [class*=col-]{display:block !important;width:100% !important;flex:none !important;max-width:none !important;padding:0 !important;margin:0 !important}.category-card h3{margin:0 0 .5rem;padding:1.5rem 1.5rem .5rem;font-size:1.25rem}.category-card p{margin:0 0 1.5rem;padding:0 1.5rem 1.5rem;color:#6c757d}.categories-grid .card,.categories-grid .category-card{display:block !important;flex:none !important;.categories-grid .card-body, .category-term .card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.5rem; } .categories-list .card-body > *:last-child, .category-term .card-body > *:last-child { margin-bottom: 0; } .card-title { color: #2c3e50; font-weight: 600; margin-bottom: 0.75rem; } .card-text { color: #6c757d; margin-bottom: 1rem; } .fa-folder { color: #ffc107; margin-right: 0.5rem; } .categories-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 1.5rem !important; padding: 1rem 0 !important; width: 100% !important; margin: 0 !important; } .categories-grid .row, .categories-grid .col, .categories-grid [class*='col-'] { display: block !important; width: 100% !important; flex: none !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } .category-card h3 { margin: 0 0 0.5rem 0; padding: 1.5rem 1.5rem 0.5rem; font-size: 1.25rem; } .category-card p { margin: 0 0 1.5rem 0; padding: 0 1.5rem 1.5rem; color: #6c757d; } .categories-grid .card, .categories-grid .category-card { display: block !important; flex: none !important; width: 100%; } .categories-grid .card > *, .category-card > * { display: block !important; flex: none !important; } .categories-grid .card, .categories-grid .category-card, .categories-grid .card > *, .category-card > * { flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; } .articles-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .article-card { background: white; border-radius: 12px; padding: 1.5rem; border: 1px solid #e9ecef; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 1rem; } .article-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #667eea; } .article-content { display: flex; flex-direction: column; flex-grow: 1; } .article-title { margin-bottom: 0.75rem; } .article-description { flex-grow: 1; } .article-tags { margin-top: auto; padding-top: 1rem; } @media (max-width: 768px) { .articles-grid { grid-template-columns: 1fr; } } .docs-hero { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 4rem 0; } .docs-hero h1 { color: #2c3e50; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 1.5rem; } .docs-hero p.lead { color: #4a5568; font-size: 1.25rem; max-width: 700px; margin-left: auto; margin-right: auto; } .card { transition: all 0.3s ease; border-radius: 0.75rem; overflow: hidden; height: 100%; border: 1px solid rgba(0, 0, 0, 0.05); background: #fff; margin-bottom: 1.5rem; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05); } .card.h-100 { display: flex; flex-direction: column; } .card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .hover-shadow { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-shadow:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; } .icon-wrapper { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.75rem; margin-right: 1rem; } .icon-wrapper i { font-size: 1.5rem; } .card h3 { color: #2d3748; font-weight: 600; margin-bottom: 1rem; } .card p.text-muted { color: #718096 !important; margin-bottom: 1.5rem; line-height: 1.6; } .list-unstyled { margin-bottom: 1.5rem; padding-left: 0; } .list-unstyled li { display: flex; align-items: center; margin-bottom: 0.5rem; color: #4a5568; font-size: 0.95rem; } .list-unstyled i { margin-right: 0.5rem; } .btn { font-weight: 500; padding: 0.5rem 1.25rem; border-radius: 0.5rem; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; } .btn-outline-primary { border-width: 2px; font-weight: 500; color: #3b82f6; border-color: #3b82f6; } .btn-outline-primary:hover { background-color: #3b82f6; color: white; } .btn i { transition: transform 0.2s ease; } .btn:hover i { transform: translateX(3px); } @media (max-width: 767.98px) { .docs-hero { padding: 2.5rem 0; } .docs-hero h1 { font-size: 2rem; } .card { margin-bottom: 1.5rem; } .icon-wrapper { width: 48px; height: 48px; } .icon-wrapper i { font-size: 1.25rem; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; } .card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; } .row.g-4 > [class*='col-'] { margin-bottom: 1.5rem; } .card { display: flex; flex-direction: column; height: 100%; } .card-body { flex: 1; } .mt-auto { margin-top: auto !important; } .mb-4 { margin-bottom: 1.5rem !important; } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bg-gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .docs-section-hero { border-radius: 12px; margin-bottom: 2rem; } .docs-single { font-size: 1.1rem; line-height: 1.7; } .docs-content pre { border-radius: 8px; border: 1px solid #e9ecef; background-color: #f8f9fa; padding: 1rem; margin: 1.5rem 0; } .docs-content code { background-color: #f1f3f4; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } .docs-content table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .docs-content table th { background-color: #f8f9fa; font-weight: 600; padding: 12px 16px; border-bottom: 2px solid #dee2e6; } .docs-content table td { padding: 12px 16px; border-bottom: 1px solid #dee2e6; } .docs-content table tr:hover { background-color: #f8f9fa; } .alert { border-radius: 8px; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 1.5rem; } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #6c757d; } .docs-content h2 { margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e9ecef; } .docs-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; color: #495057; } .docs-content ul li { margin-bottom: 0.5rem; } .docs-content blockquote { border-left: 4px solid #007bff; padding-left: 1rem; margin: 1.5rem 0; background-color: #f8f9fa; padding: 1rem 1rem 1rem 2rem; border-radius: 0 8px 8px 0; } .card .card-body .table-of-contents { font-size: 0.9rem; } .card .card-body .table-of-contents ul { list-style: none; padding-left: 0; } .card .card-body .table-of-contents ul ul { padding-left: 1rem; margin-top: 0.25rem; } .card .card-body .table-of-contents a { color: #6c757d; text-decoration: none; display: block; padding: 0.25rem 0; border-radius: 4px; transition: all 0.2s ease; } .card .card-body .table-of-contents a:hover { color: #007bff; background-color: #f8f9fa; padding-left: 0.5rem; } @media (max-width: 768px) { .docs-section-hero .display-5 { font-size: 1.75rem; } .docs-section-hero .lead { font-size: 1rem; } .docs-content { font-size: 1rem; } .sticky-top { position: relative !important; top: auto !important; } } @media print { .docs-section-hero, .alert, .btn, .breadcrumb, .sticky-top { display: none !important; } } .series-list-container { padding: 2rem 0; } .series-header { text-align: center; margin-bottom: 3rem; } .series-header h1 { font-size: 3rem; font-weight: 700; color: #2c3e50; } .series-header .series-description { font-size: 1.25rem; color: #4a5568; max-width: 700px; margin: 0 auto; } .series-toc { background: #fff; border: 1px solid #dee2e6; border-radius: 0.75rem; padding: 2rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); } .series-toc h2 { font-size: 1.75rem; font-weight: 600; color: #2c3e50; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #e9ecef; } .series-toc .list-group-item { border: none; padding: 1.5rem 0; display: flex; align-items: flex-start; transition: background-color 0.2s ease; border-bottom: 1px solid #e9ecef; } .series-toc .list-group-item:last-child { border-bottom: none; } .series-toc .list-group-item:hover { background-color: #f8f9fa; } .series-toc .part-number { font-size: 1.25rem; font-weight: 700; color: #0d6efd; margin-right: 1.5rem; min-width: 40px; text-align: center; } .series-toc .part-info a { font-size: 1.2rem; font-weight: 600; color: #2c3e50; text-decoration: none; transition: color 0.2s ease; } .series-toc .part-info a:hover { color: #0d6efd; } .series-toc .part-info p { font-size: 1rem; color: #6c757d; margin-bottom: 0; margin-top: 0.25rem; } .series-post-container { padding: 2rem 0; } .series-post-header { margin-bottom: 2rem; border-bottom: 1px solid #e9ecef; padding-bottom: 2rem; } .series-post-header .series-title { font-size: 1rem; font-weight: 600; color: #0d6efd; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .series-post-header .series-title a { text-decoration: none; color: #0d6efd; transition: color 0.2s ease; } .series-post-header .series-title a:hover { color: #0a58ca; } .series-post-header h1 { font-size: 2.75rem; font-weight: 700; color: #2c3e50; margin-top: 0.5rem; line-height: 1.2; } .series-nav { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.75rem; padding: 2rem; margin: 3rem 0; } .series-nav h4 { font-size: 1.25rem; font-weight: 600; color: #2c3e50; margin-bottom: 1.5rem; text-align: center; } .series-nav .nav-links { display: flex; justify-content: space-between; gap: 1.5rem; } .series-nav .nav-link { flex: 1; padding: 1.25rem; background: white; border: 1px solid #dee2e6; border-radius: 0.5rem; text-decoration: none; color: #2c3e50; transition: all 0.2s ease; display: flex; flex-direction: column; justify-content: space-between; } .series-nav .nav-link:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); border-color: #0d6efd; } .series-nav .nav-link .direction { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; } .series-nav .nav-link .title { font-weight: 600; margin-top: 0.5rem; font-size: 1.1rem; } .series-nav .nav-link.prev { text-align: left; } .series-nav .nav-link.next { text-align: right; } :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --secondary-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); --text-dark: #2c3e50; --text-muted: #6c757d; --bg-light: #f8f9fa; --border-color: #e9ecef; --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.05); --card-hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); --transition-speed: 0.3s; --sidebar-width: 300px; } .concepts-hero { background: var(--primary-gradient); color: white; padding: 6rem 0; margin-bottom: 4rem; position: relative; overflow: hidden; } .concepts-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="rgba(255,255,255,0.05)"/></svg>'); opacity: 0.3; } .hero-content { text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .hero-title { font-size: 4rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .hero-subtitle { font-size: 1.35rem; opacity: 0.95; margin-bottom: 0; line-height: 1.6; font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto; } .concepts-content { padding-bottom: 6rem; } .concept-section { margin-bottom: 5rem; } .section-header { display: flex; align-items: center; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--border-color); } .section-icon { width: 70px; height: 70px; background: var(--primary-gradient); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 2rem; flex-shrink: 0; box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2); } .section-icon i { font-size: 2rem; color: white; } .section-info { flex: 1; } .section-title { font-size: 2.25rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-dark); letter-spacing: -0.01em; } .section-description { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 0; max-width: 700px; } .series-container { background: white; border-radius: 24px; padding: 2.5rem; margin-bottom: 3rem; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease; } .series-container:hover { box-shadow: var(--card-hover-shadow); } .series-header { margin-bottom: 2.5rem; position: relative; } .series-badge { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .series-badge.polars { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: white; } .series-badge.pandas { background: linear-gradient(135deg, #4834d4, #686de0); color: white; } .series-badge.sql { background: linear-gradient(135deg, #00d2d3, #54a0ff); color: white; } .series-badge.azure { background: linear-gradient(135deg, #0078d4, #106ebe); color: white; } .series-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-dark); } .series-description { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0; max-width: 800px; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; } .article-card { background: var(--bg-light); border-radius: 16px; padding: 1.75rem; border: 1px solid transparent; transition: all var(--transition-speed) ease; display: flex; align-items: flex-start; gap: 1.25rem; height: 100%; } .article-card:hover { background: white; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); border-color: #667eea; } .article-number { width: 45px; height: 45px; background: white; color: #667eea; border: 2px solid #667eea; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0; transition: all var(--transition-speed) ease; } .article-card:hover .article-number { background: #667eea; color: white; } .article-content { flex: 1; } .article-title { margin-bottom: 0.75rem; line-height: 1.4; } .article-title a { color: var(--text-dark); text-decoration: none; font-size: 1.15rem; font-weight: 700; transition: color var(--transition-speed) ease; } .article-title a:hover { color: #667eea; } .article-description { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.25rem; } .article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .tags-label { color: var(--text-muted); font-weight: 700; font-size: 0.9rem; margin-right: 0.5rem; } .tag { background: #f1f3f5; color: #212529 !important; padding: 0.35rem 0.85rem; border-radius: 8px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; transition: all 0.2s ease; } .tag:hover { background: white; border-color: #667eea; color: #667eea; } .coming-soon { background: #fff8e1; border-radius: 12px; padding: 1.5rem 2rem; border-left: 5px solid #ffc107; display: flex; flex-direction: column; gap: 1rem; } .coming-soon h5 { color: #856404; font-weight: 700; margin-bottom: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .coming-soon h5::before { content: '\f017'; font-family: 'Font Awesome 5 Free'; font-weight: 900; } .coming-soon ul { margin-bottom: 0; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; } .coming-soon li { color: #856404; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; } .coming-soon li::before { content: ''; width: 6px; height: 6px; background: #ffc107; border-radius: 50%; } .mastery-section { background: var(--secondary-gradient); border-radius: 24px; padding: 4rem 2rem; text-align: center; margin-top: 5rem; position: relative; } .mastery-title { font-size: 2.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 3rem; } .mastery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; } .mastery-item { background: white; border-radius: 20px; padding: 2.5rem 2rem; border: 1px solid transparent; transition: all var(--transition-speed) ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .mastery-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border-color: #667eea; } .mastery-icon { width: 80px; height: 80px; background: var(--primary-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); } .mastery-icon i { font-size: 2rem; color: white; } .mastery-item h3 { font-size: 1.35rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; } .mastery-item p { color: var(--text-muted); line-height: 1.7; margin-bottom: 0; font-size: 1.05rem; } .concept-article { background: white; border-radius: 24px; padding: 3rem; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); } .article-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid var(--border-color); } .series-badge-small { display: inline-block; } .series-badge-small .badge-text { background: rgba(102, 126, 234, 0.1); color: #667eea; padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .article-title { font-size: 3rem; font-weight: 800; color: var(--text-dark); line-height: 1.2; margin-bottom: 1.5rem; margin-top: 1rem; letter-spacing: -0.02em; } .article-meta { display: flex; align-items: center; gap: 2rem; margin-bottom: 1.5rem; color: var(--text-muted); font-size: 0.95rem; } .meta-item { display: flex; align-items: center; } .article-lead { font-size: 1.35rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0; font-weight: 300; } .article-content { font-size: 1.15rem; line-height: 1.8; color: var(--text-dark); } .article-content h1, .article-content h2, .article-content h3, .article-content h4 { color: var(--text-dark); font-weight: 700; margin-top: 3rem; margin-bottom: 1.25rem; letter-spacing: -0.01em; position: relative; } .article-content h2 { font-size: 2rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border-color); } .article-content h3 { font-size: 1.6rem; } .article-content p { margin-bottom: 1.75rem; } .article-content ul, .article-content ol { margin-bottom: 1.75rem; padding-left: 1.5rem; } .article-content li { margin-bottom: 0.5rem; } .article-content pre { background: #282c34; border-radius: 12px; padding: 1.5rem; overflow-x: auto; margin: 2rem 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); position: relative; } .article-content code { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.9em; } .article-content p code, .article-content li code { background: rgba(102, 126, 234, 0.1); color: #667eea; padding: 0.2rem 0.4rem; border-radius: 4px; } .article-content pre code { background: none; padding: 0; color: #abb2bf; border: none; } .article-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 2.5rem 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); } .article-content th, .article-content td { padding: 1rem 1.5rem; text-align: left; border-bottom: 1px solid var(--border-color); } .article-content th { background: var(--bg-light); font-weight: 700; color: var(--text-dark); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; } .article-content tr:last-child td { border-bottom: none; } .sidebar-widget { background: white; border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); } .widget-title { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; } .toc-content nav ul { list-style: none; padding-left: 0; margin-bottom: 0; } .toc-content nav ul ul { padding-left: 1rem; margin-top: 0.5rem; } .toc-content nav li { margin-bottom: 0.5rem; } .toc-content nav a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; transition: color 0.2s ease; display: block; padding: 0.2rem 0; } .toc-content nav a:hover { color: #667eea; } .series-list { display: flex; flex-direction: column; gap: 0.5rem; } .series-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; text-decoration: none; color: var(--text-muted); transition: all 0.2s ease; } .series-item:hover { background: var(--bg-light); color: var(--text-dark); } .series-item.active { background: rgba(102, 126, 234, 0.1); color: #667eea; font-weight: 600; } .series-number { background: #e9ecef; color: var(--text-muted); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .series-item.active .series-number { background: #667eea; color: white; } .series-link-title { font-size: 0.9rem; line-height: 1.4; } .series-nav-bottom { border-top: 2px solid var(--border-color); padding-top: 2rem; margin-top: 4rem; } .series-nav-bottom h4 { color: var(--text-dark); font-weight: 700; margin-bottom: 1.5rem; } .series-nav-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-light); border-radius: 12px; text-decoration: none !important; color: #212529 !important; transition: all 0.2s ease; border: 1px solid transparent; height: 100%; } .series-nav-card:hover { background: white; border-color: #667eea; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transform: translateY(-2px); } .series-nav-card.active { background: white; border-color: #667eea; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .nav-number { font-size: 1.5rem; font-weight: 800; color: #adb5bd; line-height: 1; transition: color 0.2s ease; } .series-nav-card.active .nav-number, .series-nav-card:hover .nav-number { color: rgba(102, 126, 234, 0.3); } .nav-title { font-weight: 600; font-size: 0.95rem; flex: 1; color: inherit !important; } .current-indicator { color: #667eea !important; } @media (max-width: 992px) { .concepts-sidebar { margin-top: 3rem; } .article-title { font-size: 2.5rem; } } @media (max-width: 768px) { .hero-title { font-size: 2.75rem; } .hero-subtitle { font-size: 1.15rem; } .section-header { flex-direction: column; text-align: center; gap: 1.5rem; } .section-icon { margin-right: 0; } .articles-grid { grid-template-columns: 1fr; } .article-card { flex-direction: column; text-align: center; align-items: center; } .series-container { padding: 1.5rem; } .mastery-section { padding: 3rem 1.5rem; } .coming-soon ul { flex-direction: column; gap: 0.75rem; } .concept-article { padding: 1.5rem; } .article-title { font-size: 2rem; } .article-content { font-size: 1.05rem; } .article-meta { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } @media (max-width: 480px) { .concepts-hero { padding: 4rem 0; } .hero-title { font-size: 2.25rem; } .section-title { font-size: 1.75rem; } .series-title { font-size: 1.5rem; } } .concepts-nav-container { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); padding: 1rem 0; margin-bottom: 3rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } .nav-wrapper { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .main-nav { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .nav-btn { background: white; border: 1px solid var(--border-color); color: var(--text-muted); padding: 0.6rem 1.5rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .nav-btn:hover { background: #f8f9fa; transform: translateY(-2px); color: var(--text-dark); } .nav-btn.active { background: var(--primary-gradient); color: white; border-color: transparent; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .nav-btn i { font-size: 1.1em; } .sub-nav { display: flex; align-items: center; gap: 0.75rem; animation: fadeIn 0.3s ease; } .sub-nav.hidden { display: none; } .sub-nav-divider { width: 1px; height: 20px; background: var(--border-color); margin: 0 0.5rem; display: none; } .sub-nav-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .sub-nav-btn:hover { background: rgba(102, 126, 234, 0.05); color: #667eea; } .sub-nav-btn.active { background: rgba(102, 126, 234, 0.1); color: #667eea; border-color: rgba(102, 126, 234, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .concepts-nav-container { padding: 0.75rem 0; top: 0; } .nav-btn { padding: 0.5rem 1rem; font-size: 0.85rem; } .main-nav { gap: 0.5rem; } } .article-content { font-size: 1.125rem; line-height: 1.8; color: #2c3e50; } .article-content p { margin-bottom: 2rem; } .article-content h2 { margin-top: 3.5rem; margin-bottom: 1.5rem; font-weight: 800; color: #1a202c; } .article-content h3 { margin-top: 2.5rem; font-weight: 700; color: #2d3748; } .table-responsive { overflow-x: auto; margin: 2.5rem 0; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-color); background: white; } .article-content table { margin: 0; border: none; box-shadow: none; min-width: 600px; } .code-block-wrapper { margin: 2.5rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); background: #f8f9fa; border: 1px solid #dee2e6; position: relative; } .code-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; background: #e9ecef; border-bottom: 1px solid #dee2e6; color: #495057; font-family: 'Fira Code', monospace; font-size: 0.85rem; } .code-lang { font-weight: 700; color: #0d6efd; } .copy-btn { background: transparent; border: none; color: #6c757d; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; padding: 0.25rem 0.5rem; border-radius: 4px; } .copy-btn:hover { color: #212529; background: rgba(0, 0, 0, 0.05); } .article-content pre { margin: 0; border-radius: 0; box-shadow: none; padding: 1.5rem; max-height: none; background: transparent !important; color: #24292e !important; } .article-content pre code { color: inherit !important; } .articles-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2.5rem; } .article-list-item { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.5rem; background: white; border: 1px solid var(--border-color); border-radius: 12px; text-decoration: none !important; transition: all 0.2s ease; color: #212529 !important; } .article-list-item:hover { transform: translateX(8px); border-color: #667eea; background: #f8faff; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1); } .article-list-item:hover .article-list-title { color: #667eea; } .article-list-number { font-weight: 800; color: #667eea; font-size: 1rem; min-width: 25px; opacity: 0.6; } .article-list-title { font-weight: 600; font-size: 1.1rem; flex: 1; color: #212529; transition: color 0.2s ease; } .article-list-meta { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; } .article-list-meta i { font-size: 0.8rem; } @media (max-width: 768px) { .article-list-item { padding: 1rem; gap: 1rem; } .article-list-meta { display: none; } } .td-navbar { background-color: #343a40 !important; padding: 0.5rem 0; } .td-navbar .container-fluid { display: flex !important; flex-direction: row !important; align-items: center !important; } .navbar-brand { font-weight: 600; color: white !important; font-size: 1.5rem; } .td-navbar-nav-scroll { display: flex !important; flex-direction: row !important; } .navbar-nav { display: flex !important; flex-direction: row !important; gap: 1rem; } .nav-link { color: rgba(255,255,255,0.8) !important; font-weight: 500; padding: 0.5rem 1rem !important; } .nav-link:hover { color: white !important; } .td-search__input { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; } .td-search__input::placeholder { color: rgba(255,255,255,0.7); } .td-cover-block { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; min-height: 60vh !important; padding: 4rem 0; } .td-cover-block h1 { color: white !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-size: 3rem; font-weight: 700; } .td-cover-block .lead { color: white !important; font-size: 1.25rem; } .btn { margin: 0.5rem !important; } .td-box--dark { background-color: #343a40 !important; color: white; padding: 4rem 0; } .td-box--dark .container { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2rem; } .td-box--dark .col-lg-4 { flex: 0 0 30%; max-width: 30%; padding: 2rem 1rem; text-align: center; } .td-box--dark h4 { color: white; margin: 1rem 0; } .td-box--dark .fa, .td-box--dark .fas, .td-box--dark .fab { color: #007bff; font-size: 3rem; margin-bottom: 1rem; } .td-box--3 { padding: 4rem 0; background: white; } .td-box--3 h1 { margin-bottom: 3rem; color: #343a40; } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; } .category-card { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 2rem 1rem; text-align: center; transition: transform 0.3s, box-shadow 0.3s; } .category-card:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .category-card h3 { color: #007bff; margin-bottom: 1rem; } .category-card .badge { background: #007bff; color: white; } .td-sidebar-toc { display: none !important; } .taxonomy { margin-bottom: 1rem !important; } .taxonomy-terms { display: none !important; } .td-blog .taxonomy-terms-cloud { display: none !important; } .article-meta .taxonomy { display: none !important; } .td-content .taxonomy { margin: 0.5rem 0 !important; } .td-content .taxonomy-terms { display: inline-flex !important; gap: 0.5rem; } .taxonomy-term { background: #e9ecef !important; color: #495057 !important; padding: 0.25rem 0.5rem !important; border-radius: 0.25rem !important; text-decoration: none !important; font-size: 0.875rem !important; cursor: pointer !important; } .taxonomy-term:hover { background: #007bff !important; color: white !important; text-decoration: none !important; } .td-search__input { background: white !important; border: 1px solid #ced4da !important; color: #495057 !important; padding: 0.375rem 0.75rem; } .td-search__input::placeholder { color: #6c757d !important; } .td-sidebar .td-search__input { background: white !important; border: 1px solid #dee2e6 !important; } .td-breadcrumbs { margin-bottom: 1rem; } .breadcrumb { background: transparent; padding: 0.75rem 0; margin-bottom: 0; display: flex; align-items: center; } .breadcrumb-item { display: inline-flex; align-items: center; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: #6c757d; padding: 0 0.5rem; display: inline-flex; align-items: center; } .breadcrumb-item a { color: #007bff; text-decoration: none; } .breadcrumb-item.active { color: #6c757d; } .td-footer { background: #f8f9fa !important; border-top: 1px solid #dee2e6; margin-top: 3rem; padding: 2rem 0; } .td-footer .row { display: flex; align-items: center; justify-content: space-between; } .td-footer__links-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; justify-content: center; } .td-footer__links-item a { color: #6c757d; font-size: 1.25rem; transition: color 0.3s; } .td-footer__links-item a:hover { color: #007bff; } .td-content { padding: 2rem 1rem; } .td-content h1 { font-size: 2.5rem; margin-bottom: 1rem; } .td-content h2 { font-size: 2rem; margin-top: 2rem; margin-bottom: 1rem; } .td-content h3 { font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1rem; } table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; } table th, table td { padding: 0.75rem; border: 1px solid #dee2e6; text-align: left; } table th { background: #f8f9fa; font-weight: 600; } table tbody tr:nth-child(odd) { background: rgba(0,0,0,0.05); } .td-footer { background: #f8f9fa; border-top: 1px solid #dee2e6; margin-top: 3rem; padding: 2rem 0; } @media (max-width: 768px) { .td-navbar .container-fluid { flex-direction: column !important; } .td-navbar-nav-scroll { margin-top: 1rem; } .td-cover-block { min-height: 50vh !important; } .td-cover-block h1 { font-size: 2.5rem; } .td-box--dark .col-lg-4 { flex: 0 0 100%; max-width: 100%; margin-bottom: 2rem; } .td-content { padding: 1rem 0.5rem; } .td-footer .row { flex-direction: column; gap: 1rem; } .categories-grid { grid-template-columns: 1fr; } .td-sidebar-toc { display: none !important; } }}