diff --git a/static/css/base.css b/static/css/base.css
new file mode 100644
index 0000000..9fc5c54
--- /dev/null
+++ b/static/css/base.css
@@ -0,0 +1,188 @@
+/**
+ * Base Styles - Reset, Typography, Scrollbar, Container
+ */
+
+/* Reset & Base */
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+ font-size: 16px;
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: var(--bg-dark);
+ color: var(--text-primary);
+ line-height: 1.6;
+ overflow-x: hidden;
+ min-height: 100vh;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body.nav-open {
+ overflow: hidden;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+ font-family: 'Raleway', sans-serif;
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ color: var(--text-primary);
+}
+
+h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
+h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
+h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
+h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.875rem; }
+
+p {
+ margin-bottom: var(--space-md);
+ color: var(--text-secondary);
+}
+
+a {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+a:hover {
+ color: var(--primary-light);
+}
+
+strong, b {
+ font-weight: 600;
+}
+
+code {
+ font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+ background: var(--bg-elevated);
+ padding: 0.2em 0.4em;
+ border-radius: var(--radius-xs);
+ font-size: 0.9em;
+ color: var(--primary-light);
+}
+
+pre {
+ background: var(--bg-darker);
+ padding: var(--space-lg);
+ border-radius: var(--radius-md);
+ overflow-x: auto;
+ margin: var(--space-lg) 0;
+}
+
+pre code {
+ background: none;
+ padding: 0;
+}
+
+::selection {
+ background: var(--primary-color);
+ color: var(--text-primary);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--bg-dark);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--primary-color);
+}
+
+/* Container */
+.container {
+ width: 100%;
+ max-width: var(--container-max);
+ margin: 0 auto;
+ padding: 0 var(--container-padding);
+}
+
+/* Utility Classes */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-primary { color: var(--primary-color); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: var(--space-sm); }
+.mt-2 { margin-top: var(--space-md); }
+.mt-3 { margin-top: var(--space-lg); }
+.mt-4 { margin-top: var(--space-xl); }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: var(--space-sm); }
+.mb-2 { margin-bottom: var(--space-md); }
+.mb-3 { margin-bottom: var(--space-lg); }
+.mb-4 { margin-bottom: var(--space-xl); }
+
+.d-none { display: none; }
+.d-block { display: block; }
+.d-flex { display: flex; }
+.d-grid { display: grid; }
+
+.flex-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+/* Print Styles */
+@media print {
+ .navbar, .footer, .back-to-top, .messages-container, .share-buttons, .vote-btn, .comment-form, .nav-toggle {
+ display: none !important;
+ }
+
+ body {
+ background: white;
+ color: black;
+ }
+
+ .bento-card,
+ .article-card,
+ .project-card {
+ background: white;
+ border: 1px solid #ddd;
+ box-shadow: none;
+ }
+
+ a {
+ color: black;
+ text-decoration: underline;
+ }
+}
\ No newline at end of file
diff --git a/static/css/blog.css b/static/css/blog.css
new file mode 100644
index 0000000..62a1a23
--- /dev/null
+++ b/static/css/blog.css
@@ -0,0 +1,1128 @@
+/**
+ * Blog - Grid, Filters, Article Detail, Comments, Gallery
+ */
+
+/* Blog Grid */
+.blog-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+ gap: var(--space-lg);
+}
+
+/* Article Card */
+.article-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ overflow: hidden;
+ transition: var(--transition);
+ display: flex;
+ flex-direction: column;
+}
+
+.article-card:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.article-image {
+ height: 200px;
+ overflow: hidden;
+ background: var(--bg-elevated);
+}
+
+.article-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: var(--transition-slow);
+}
+
+.article-card:hover .article-image img {
+ transform: scale(1.05);
+}
+
+.article-content {
+ padding: var(--space-lg);
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.article-meta {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin-bottom: var(--space-sm);
+ flex-wrap: wrap;
+}
+
+.article-category {
+ font-size: 0.75rem;
+ color: var(--primary-color);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+}
+
+.article-category:hover {
+ color: var(--primary-light);
+}
+
+.article-date {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+}
+
+.article-title {
+ font-size: 1.25rem;
+ margin-bottom: var(--space-sm);
+ line-height: 1.4;
+}
+
+.article-title a {
+ color: var(--text-primary);
+ text-decoration: none;
+}
+
+.article-title a:hover {
+ color: var(--primary-color);
+}
+
+.article-subtitle {
+ font-size: 0.9rem;
+ color: var(--text-muted);
+ font-style: italic;
+ margin-bottom: var(--space-sm);
+}
+
+.article-excerpt {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ line-height: 1.6;
+ flex: 1;
+ margin-bottom: var(--space-md);
+}
+
+.article-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: var(--space-md);
+ border-top: 1px solid var(--border-color);
+ margin-top: auto;
+}
+
+.article-stats {
+ display: flex;
+ gap: var(--space-md);
+}
+
+.article-stats span {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+.article-read-more {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ font-size: 0.85rem;
+ font-weight: 500;
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.article-read-more:hover {
+ color: var(--primary-light);
+}
+
+.article-read-more i {
+ transition: var(--transition);
+}
+
+.article-read-more:hover i {
+ transform: translateX(4px);
+}
+
+/* Blog Filters */
+.blog-filters {
+ margin-bottom: var(--space-2xl);
+}
+
+.search-form {
+ display: flex;
+ gap: var(--space-md);
+ margin-bottom: var(--space-lg);
+}
+
+.search-input-wrapper {
+ flex: 1;
+ position: relative;
+}
+
+.search-input-wrapper i {
+ position: absolute;
+ left: var(--space-md);
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+}
+
+.search-input {
+ width: 100%;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ padding: var(--space-md) var(--space-md) var(--space-md) 2.5rem;
+ color: var(--text-primary);
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+.search-input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px var(--primary-muted);
+}
+
+.search-clear {
+ position: absolute;
+ right: var(--space-md);
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ cursor: pointer;
+}
+
+.search-clear:hover {
+ color: var(--primary-color);
+}
+
+.categories-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+}
+
+.category-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-full);
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+ font-weight: 500;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.category-chip:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.category-chip.active {
+ background: var(--primary-muted);
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.category-chip i {
+ font-size: 0.8rem;
+}
+
+.category-count {
+ background: var(--bg-elevated);
+ padding: 0.1rem 0.4rem;
+ border-radius: var(--radius-full);
+ font-size: 0.75rem;
+}
+
+.category-chip.active .category-count {
+ background: var(--primary-color);
+ color: var(--text-primary);
+}
+
+.search-results-info {
+ padding: var(--space-md);
+ background: var(--bg-card);
+ border-radius: var(--radius-md);
+ margin-bottom: var(--space-lg);
+}
+
+.search-results-info p {
+ margin: 0;
+}
+
+.results-count {
+ color: var(--text-muted);
+}
+
+/* Article Full (Detail Page) */
+.article-full {
+ max-width: 900px;
+ margin: 0 auto;
+ padding-top: 100px;
+}
+
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+ margin-bottom: var(--space-xl);
+ font-size: 0.85rem;
+}
+
+.breadcrumb a {
+ color: var(--text-muted);
+ text-decoration: none;
+}
+
+.breadcrumb a:hover {
+ color: var(--primary-color);
+}
+
+.breadcrumb-separator {
+ color: var(--text-muted);
+ font-size: 0.7rem;
+}
+
+.breadcrumb-current {
+ color: var(--text-secondary);
+}
+
+.article-header {
+ margin-bottom: var(--space-2xl);
+}
+
+.article-category-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ background: var(--primary-muted);
+ border-radius: var(--radius-full);
+ color: var(--primary-color);
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-decoration: none;
+ margin-bottom: var(--space-lg);
+}
+
+.article-full-title {
+ font-size: clamp(2rem, 5vw, 3rem);
+ margin-bottom: var(--space-md);
+ line-height: 1.2;
+}
+
+.article-full-subtitle {
+ font-size: 1.25rem;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-lg);
+}
+
+.article-meta-full {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: var(--space-lg);
+ padding: var(--space-lg);
+ background: var(--bg-card);
+ border-radius: var(--radius-lg);
+}
+
+.article-author {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.author-avatar {
+ width: 48px;
+ height: 48px;
+ background: var(--primary-muted);
+ color: var(--primary-color);
+ border-radius: var(--radius-full);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 1.1rem;
+}
+
+.author-name {
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.article-meta-items {
+ display: flex;
+ gap: var(--space-lg);
+ flex-wrap: wrap;
+}
+
+.meta-item {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ font-size: 0.9rem;
+ color: var(--text-muted);
+}
+
+.article-featured-image {
+ margin-bottom: var(--space-2xl);
+ border-radius: var(--radius-xl);
+ overflow: hidden;
+}
+
+.article-featured-image img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.article-body {
+ font-size: 1.1rem;
+ line-height: 1.8;
+ color: var(--text-secondary);
+}
+
+.article-body p {
+ margin-bottom: var(--space-lg);
+}
+
+.article-body h2,
+.article-body h3,
+.article-body h4 {
+ color: var(--text-primary);
+ margin-top: var(--space-2xl);
+ margin-bottom: var(--space-md);
+}
+
+.article-body ul,
+.article-body ol {
+ margin-bottom: var(--space-lg);
+ padding-left: var(--space-xl);
+}
+
+.article-body li {
+ margin-bottom: var(--space-sm);
+}
+
+.article-body img {
+ max-width: 100%;
+ height: auto;
+ border-radius: var(--radius-md);
+ margin: var(--space-lg) 0;
+}
+
+.article-body blockquote {
+ border-left: 4px solid var(--primary-color);
+ padding-left: var(--space-lg);
+ margin: var(--space-lg) 0;
+ font-style: italic;
+ color: var(--text-muted);
+}
+
+/* Article Footer */
+.article-footer-full {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: var(--space-lg);
+ padding: var(--space-xl) 0;
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+ margin: var(--space-2xl) 0;
+}
+
+.article-reactions {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.reactions-label,
+.share-label {
+ font-size: 0.9rem;
+ color: var(--text-muted);
+}
+
+.reactions-buttons {
+ display: flex;
+ gap: var(--space-sm);
+}
+
+.vote-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ color: var(--text-muted);
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.vote-btn:hover:not(:disabled) {
+ border-color: var(--border-light);
+ color: var(--text-secondary);
+}
+
+.vote-btn.active.like {
+ background: rgba(34, 197, 94, 0.1);
+ border-color: var(--success-color);
+ color: var(--success-color);
+}
+
+.vote-btn.active.dislike {
+ background: rgba(239, 68, 68, 0.1);
+ border-color: var(--error-color);
+ color: var(--error-color);
+}
+
+.vote-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.article-share {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.share-buttons {
+ display: flex;
+ gap: var(--space-sm);
+}
+
+.share-btn {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ color: var(--text-muted);
+ font-size: 1rem;
+ cursor: pointer;
+ transition: var(--transition);
+ text-decoration: none;
+}
+
+.share-btn:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.share-btn.telegram:hover {
+ border-color: #0088cc;
+ color: #0088cc;
+}
+
+.share-btn.vk:hover {
+ border-color: #4a76a8;
+ color: #4a76a8;
+}
+
+.share-btn.twitter:hover {
+ border-color: #1da1f2;
+ color: #1da1f2;
+}
+
+/* Related Articles */
+.related-articles {
+ margin-bottom: var(--space-2xl);
+}
+
+.related-articles h3 {
+ margin-bottom: var(--space-lg);
+}
+
+.related-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: var(--space-md);
+}
+
+.related-card {
+ display: flex;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-lg);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.related-card:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-2px);
+}
+
+.related-image {
+ width: 80px;
+ height: 80px;
+ border-radius: var(--radius-md);
+ object-fit: cover;
+ flex-shrink: 0;
+}
+
+.related-content h4 {
+ font-size: 0.95rem;
+ margin-bottom: var(--space-xs);
+ color: var(--text-primary);
+ line-height: 1.4;
+}
+
+.related-date {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+/* Comments Section */
+.comments-section {
+ margin-top: var(--space-2xl);
+}
+
+.comments-title {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin-bottom: var(--space-xl);
+}
+
+.comments-count {
+ font-weight: 400;
+ color: var(--text-muted);
+}
+
+.comment-form {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-lg);
+ margin-bottom: var(--space-xl);
+}
+
+.comment-form-header {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin-bottom: var(--space-md);
+}
+
+.comment-avatar {
+ width: 40px;
+ height: 40px;
+ background: var(--primary-muted);
+ color: var(--primary-color);
+ border-radius: var(--radius-full);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 0.9rem;
+ flex-shrink: 0;
+}
+
+.comment-author-name {
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.comment-form-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: var(--space-md);
+ flex-wrap: wrap;
+ gap: var(--space-md);
+}
+
+.comment-hint {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+.comment-auth-prompt {
+ padding: var(--space-xl);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ text-align: center;
+ margin-bottom: var(--space-xl);
+}
+
+.comment-auth-prompt p {
+ margin: 0;
+}
+
+.comments-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+}
+
+.comment {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-lg);
+}
+
+.comment-reply {
+ border-left: 3px solid var(--primary-muted);
+}
+
+.comment-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-md);
+}
+
+.comment-author {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.comment-author-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.comment-name {
+ font-weight: 600;
+ color: var(--text-primary);
+ font-size: 0.95rem;
+}
+
+.comment-date {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+.comment-content {
+ color: var(--text-secondary);
+ line-height: 1.7;
+ margin-bottom: var(--space-md);
+}
+
+.comment-content p:last-child {
+ margin-bottom: 0;
+}
+
+.comment-actions {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.reply-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ font-size: 0.85rem;
+ cursor: pointer;
+ transition: var(--transition);
+ padding: 0;
+}
+
+.reply-btn:hover {
+ color: var(--primary-color);
+}
+
+.reply-form-container {
+ margin-top: var(--space-md);
+ padding-top: var(--space-md);
+ border-top: 1px solid var(--border-color);
+}
+
+.reply-form {
+ padding: var(--space-md);
+}
+
+.comment-replies {
+ margin-top: var(--space-md);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+}
+
+.comments-empty {
+ text-align: center;
+ padding: var(--space-2xl);
+ color: var(--text-muted);
+}
+
+.comments-empty i {
+ font-size: 3rem;
+ margin-bottom: var(--space-md);
+ opacity: 0.5;
+}
+
+.comments-disabled {
+ text-align: center;
+ padding: var(--space-2xl);
+ background: var(--bg-card);
+ border-radius: var(--radius-xl);
+ color: var(--text-muted);
+}
+
+.comments-disabled i {
+ font-size: 2rem;
+ margin-bottom: var(--space-md);
+ display: block;
+}
+
+/* Gallery & Attachments */
+.article-gallery,
+.article-files,
+.article-links {
+ margin: var(--space-2xl) 0;
+ padding: var(--space-xl);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+}
+
+.article-gallery h3,
+.article-files h3,
+.article-links h3 {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ margin-bottom: var(--space-lg);
+ font-size: 1.25rem;
+}
+
+.article-gallery h3 i,
+.article-files h3 i,
+.article-links h3 i {
+ color: var(--primary-color);
+}
+
+.gallery-carousel {
+ position: relative;
+ overflow: hidden;
+ border-radius: var(--radius-lg);
+}
+
+.carousel-container {
+ position: relative;
+ width: 100%;
+ min-height: 400px;
+}
+
+.carousel-slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.5s ease;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.carousel-slide.active {
+ opacity: 1;
+ position: relative;
+}
+
+.carousel-slide img {
+ max-width: 100%;
+ max-height: 400px;
+ object-fit: contain;
+ border-radius: var(--radius-md);
+}
+
+.carousel-caption {
+ margin-top: var(--space-md);
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ text-align: center;
+}
+
+.carousel-btn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 48px;
+ height: 48px;
+ background: var(--bg-dark);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-full);
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: var(--transition);
+ z-index: 10;
+}
+
+.carousel-btn:hover {
+ background: var(--primary-color);
+ border-color: var(--primary-color);
+}
+
+.carousel-prev {
+ left: var(--space-md);
+}
+
+.carousel-next {
+ right: var(--space-md);
+}
+
+.carousel-dots {
+ display: flex;
+ justify-content: center;
+ gap: var(--space-sm);
+ margin-top: var(--space-md);
+}
+
+.carousel-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: var(--radius-full);
+ background: var(--border-color);
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.carousel-dot.active,
+.carousel-dot:hover {
+ background: var(--primary-color);
+}
+
+.gallery-collage {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: var(--space-md);
+}
+
+.collage-item {
+ position: relative;
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.collage-item:hover {
+ transform: scale(1.02);
+ box-shadow: var(--shadow-lg);
+}
+
+.collage-item img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+.collage-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: var(--space-sm);
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+ color: var(--text-primary);
+ font-size: 0.8rem;
+ margin: 0;
+}
+
+.lightbox {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.95);
+ z-index: var(--z-modal);
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: var(--space-xl);
+}
+
+.lightbox-close {
+ position: absolute;
+ top: var(--space-lg);
+ right: var(--space-xl);
+ font-size: 2rem;
+ color: var(--text-primary);
+ cursor: pointer;
+}
+
+#lightbox-img {
+ max-width: 90%;
+ max-height: 80vh;
+ object-fit: contain;
+ border-radius: var(--radius-md);
+}
+
+#lightbox-caption {
+ color: var(--text-secondary);
+ margin-top: var(--space-md);
+ text-align: center;
+}
+
+.files-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+}
+
+.file-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ background: var(--bg-elevated);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.file-item:hover {
+ border-color: var(--primary-color);
+ transform: translateX(4px);
+}
+
+.file-icon {
+ width: 48px;
+ height: 48px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+ font-size: 1.25rem;
+ flex-shrink: 0;
+}
+
+.file-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.file-name {
+ color: var(--text-primary);
+ font-weight: 600;
+}
+
+.file-desc {
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+}
+
+.file-meta {
+ color: var(--text-muted);
+ font-size: 0.75rem;
+}
+
+.file-download {
+ color: var(--text-muted);
+ font-size: 1.25rem;
+}
+
+.file-item:hover .file-download {
+ color: var(--primary-color);
+}
+
+.links-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: var(--space-md);
+}
+
+.link-card {
+ display: flex;
+ flex-direction: column;
+ background: var(--bg-elevated);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.link-card:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
+}
+
+.link-image {
+ height: 150px;
+ overflow: hidden;
+}
+
+.link-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.link-content {
+ padding: var(--space-md);
+}
+
+.link-title {
+ color: var(--text-primary);
+ font-size: 1rem;
+ margin-bottom: var(--space-xs);
+ line-height: 1.4;
+}
+
+.link-description {
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+ margin-bottom: var(--space-sm);
+ line-height: 1.5;
+}
+
+.link-domain {
+ color: var(--text-muted);
+ font-size: 0.75rem;
+ display: flex;
+ align-items: center;
+ gap: var(--space-xs);
+}
\ No newline at end of file
diff --git a/static/css/components.css b/static/css/components.css
new file mode 100644
index 0000000..518359e
--- /dev/null
+++ b/static/css/components.css
@@ -0,0 +1,477 @@
+/**
+ * Reusable Components - Buttons, Forms, Logo, Messages, Pagination, Badges
+ */
+
+/* Logo */
+.logo {
+ display: inline-flex;
+ align-items: center;
+ gap: 0;
+ font-family: 'Raleway', sans-serif;
+ font-weight: 700;
+ font-size: 1.5rem;
+ letter-spacing: -0.02em;
+ text-decoration: none;
+}
+
+.logo img,
+.footer-logo img {
+ display: block;
+ max-width: 130px;
+ height: auto;
+ filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border-radius: var(--radius-sm);
+}
+
+.logo:hover img {
+ filter: drop-shadow(0 4px 16px rgba(230, 57, 70, 0.4))
+ drop-shadow(0 0 20px rgba(230, 57, 70, 0.2));
+ transform: translateY(-2px) scale(1.02);
+}
+
+.footer-logo img {
+ opacity: 0.9;
+}
+
+.footer-logo:hover img {
+ opacity: 1;
+ filter: drop-shadow(0 4px 12px rgba(230, 57, 70, 0.3));
+ transform: translateY(-1px);
+}
+
+/* Buttons */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+ padding: 0.75rem 1.5rem;
+ font-family: 'Inter', sans-serif;
+ font-weight: 600;
+ font-size: 0.9rem;
+ line-height: 1;
+ border-radius: var(--radius-md);
+ border: none;
+ cursor: pointer;
+ transition: var(--transition);
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+.btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.btn-primary {
+ background: var(--gradient-primary);
+ color: var(--text-primary);
+ box-shadow: 0 4px 15px var(--primary-glow);
+}
+
+.btn-primary:hover:not(:disabled) {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px var(--primary-glow);
+ color: var(--text-primary);
+}
+
+.btn-outline {
+ background: transparent;
+ border: 2px solid var(--border-light);
+ color: var(--text-primary);
+}
+
+.btn-outline:hover:not(:disabled) {
+ border-color: var(--primary-color);
+ background: var(--primary-muted);
+ color: var(--text-primary);
+}
+
+.btn-ghost {
+ background: var(--bg-elevated);
+ color: var(--text-secondary);
+ border: 1px solid var(--border-color);
+}
+
+.btn-ghost:hover:not(:disabled) {
+ background: var(--bg-card-hover);
+ color: var(--text-primary);
+ border-color: var(--border-light);
+}
+
+.btn-sm {
+ padding: 0.5rem 1rem;
+ font-size: 0.8rem;
+}
+
+.btn-lg {
+ padding: 1rem 2rem;
+ font-size: 1rem;
+}
+
+.btn-full {
+ width: 100%;
+}
+
+/* Forms */
+.form-group {
+ margin-bottom: var(--space-lg);
+}
+
+.form-label {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-sm);
+}
+
+.form-label i {
+ color: var(--primary-color);
+ font-size: 0.85rem;
+}
+
+.form-control {
+ width: 100%;
+ background: var(--bg-input);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ padding: 0.875rem 1rem;
+ color: var(--text-primary);
+ font-family: inherit;
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+.form-control:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px var(--primary-muted);
+}
+
+.form-control::placeholder {
+ color: var(--text-muted);
+}
+
+textarea.form-control {
+ min-height: 120px;
+ resize: vertical;
+}
+
+.form-hint {
+ display: block;
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ margin-top: var(--space-xs);
+}
+
+.form-error {
+ display: block;
+ font-size: 0.8rem;
+ color: var(--error-color);
+ margin-top: var(--space-xs);
+}
+
+.form-checkbox {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.form-checkbox input[type="checkbox"] {
+ width: 18px;
+ height: 18px;
+ accent-color: var(--primary-color);
+}
+
+.form-checkbox label {
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ cursor: pointer;
+}
+
+.captcha-group {
+ display: flex;
+ justify-content: center;
+}
+
+.smart-captcha-wrapper {
+ display: flex;
+ justify-content: center;
+ margin: var(--space-md) 0;
+}
+
+.smart-captcha {
+ border-radius: var(--radius-md);
+ overflow: hidden;
+}
+
+.smart-captcha iframe {
+ border-radius: var(--radius-md) !important;
+}
+
+/* Messages / Notifications */
+.messages-container {
+ position: fixed;
+ top: 100px;
+ right: var(--space-lg);
+ z-index: var(--z-tooltip);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+ max-width: 400px;
+}
+
+.message {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-md) var(--space-lg);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-lg);
+ animation: slideIn 0.3s ease;
+}
+
+.message.hiding {
+ animation: slideOut 0.3s ease forwards;
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideOut {
+ from {
+ opacity: 1;
+ transform: translateX(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+}
+
+.message i {
+ font-size: 1.25rem;
+ flex-shrink: 0;
+}
+
+.message span {
+ flex: 1;
+ font-size: 0.9rem;
+}
+
+.message-close {
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ font-size: 1.25rem;
+ cursor: pointer;
+ padding: 0;
+ line-height: 1;
+}
+
+.message-close:hover {
+ color: var(--text-primary);
+}
+
+.message-success {
+ border-color: var(--success-color);
+}
+
+.message-success i {
+ color: var(--success-color);
+}
+
+.message-error {
+ border-color: var(--error-color);
+}
+
+.message-error i {
+ color: var(--error-color);
+}
+
+.message-warning {
+ border-color: var(--warning-color);
+}
+
+.message-warning i {
+ color: var(--warning-color);
+}
+
+.message-info {
+ border-color: var(--info-color);
+}
+
+.message-info i {
+ color: var(--info-color);
+}
+
+/* Pagination */
+.pagination-wrapper {
+ margin-top: var(--space-2xl);
+}
+
+.pagination {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+}
+
+.pagination-btn,
+.pagination-num {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 40px;
+ height: 40px;
+ padding: 0 var(--space-sm);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.pagination-btn:hover,
+.pagination-num:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.pagination-num.active {
+ background: var(--primary-muted);
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+ font-weight: 600;
+}
+
+.pagination-dots {
+ color: var(--text-muted);
+}
+
+.pagination-numbers {
+ display: flex;
+ gap: var(--space-sm);
+}
+
+/* Badges & Tags */
+.count-badge {
+ background: var(--primary-muted);
+ color: var(--primary-color);
+ padding: 0.2rem 0.6rem;
+ border-radius: var(--radius-full);
+ font-size: 0.8rem;
+ font-weight: 600;
+ margin-left: var(--space-sm);
+}
+
+.tech-badge,
+.skill-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ background: var(--bg-elevated);
+ padding: 0.3rem 0.6rem;
+ border-radius: var(--radius-sm);
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ border: 1px solid var(--border-color);
+ transition: var(--transition);
+}
+
+.tech-badge:hover,
+.skill-tag:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.tech-badge i,
+.skill-tag i {
+ color: var(--primary-color);
+ font-size: 0.85rem;
+}
+
+.lang-badge {
+ background: rgba(59, 130, 246, 0.15);
+ border-color: rgba(59, 130, 246, 0.3);
+}
+
+.lang-badge:hover {
+ background: rgba(59, 130, 246, 0.15);
+ border-color: rgba(59, 130, 246, 0.3);
+ color: #ffffff;
+}
+
+.lang-badge i {
+ color: var(--info-color);
+}
+
+/* Back to Top Button */
+.back-to-top {
+ position: fixed;
+ bottom: var(--space-xl);
+ right: var(--space-xl);
+ width: 48px;
+ height: 48px;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ color: var(--text-secondary);
+ font-size: 1rem;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transition: var(--transition);
+ z-index: var(--z-sticky);
+}
+
+.back-to-top.visible {
+ opacity: 1;
+ visibility: visible;
+}
+
+.back-to-top:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+ transform: translateY(-4px);
+}
+
+/* Empty State */
+.empty-state {
+ text-align: center;
+ padding: var(--space-3xl);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+}
+
+.empty-state i {
+ font-size: 4rem;
+ color: var(--text-muted);
+ opacity: 0.5;
+ margin-bottom: var(--space-lg);
+}
+
+.empty-state h3 {
+ margin-bottom: var(--space-sm);
+}
+
+.empty-state p {
+ margin-bottom: var(--space-lg);
+}
\ No newline at end of file
diff --git a/static/css/layout.css b/static/css/layout.css
new file mode 100644
index 0000000..e8d2e63
--- /dev/null
+++ b/static/css/layout.css
@@ -0,0 +1,608 @@
+/**
+ * Layout Components - Navigation, Bento Grid, Sections, Headers, Footer
+ */
+
+/* Navigation */
+.navbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: var(--z-fixed);
+ background: rgba(13, 13, 13, 0.8);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-bottom: 1px solid var(--border-color);
+ padding: var(--space-md) 0;
+ transition: var(--transition);
+}
+
+.navbar.scrolled {
+ background: rgba(13, 13, 13, 0.95);
+ padding: var(--space-sm) 0;
+ box-shadow: var(--shadow-md);
+}
+
+.navbar.hidden {
+ transform: translateY(-100%);
+}
+
+.navbar > .container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-lg);
+}
+
+.nav-menu {
+ display: flex;
+ align-items: center;
+ gap: var(--space-xs);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.nav-link {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ color: var(--text-secondary);
+ padding: var(--space-sm) var(--space-md);
+ border-radius: var(--radius-sm);
+ font-weight: 500;
+ font-size: 0.9rem;
+ transition: var(--transition);
+ text-decoration: none;
+}
+
+.nav-link i {
+ font-size: 0.85rem;
+ opacity: 0.7;
+}
+
+.nav-link:hover {
+ color: var(--text-primary);
+ background: var(--primary-muted);
+}
+
+.nav-link.active {
+ color: var(--primary-color);
+ background: var(--primary-muted);
+}
+
+.nav-auth {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.nav-user-info {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.nav-user-avatar {
+ width: 32px;
+ height: 32px;
+ background: var(--primary-muted);
+ color: var(--primary-color);
+ border-radius: var(--radius-full);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 0.875rem;
+}
+
+.nav-user-name {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ font-weight: 500;
+}
+
+.nav-toggle {
+ display: none;
+ flex-direction: column;
+ gap: 5px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 5px;
+ z-index: var(--z-fixed);
+}
+
+.nav-toggle span {
+ width: 24px;
+ height: 2px;
+ background: var(--text-primary);
+ transition: var(--transition);
+ transform-origin: center;
+}
+
+.nav-toggle.active span:nth-child(1) {
+ transform: rotate(45deg) translate(5px, 5px);
+}
+
+.nav-toggle.active span:nth-child(2) {
+ opacity: 0;
+}
+
+.nav-toggle.active span:nth-child(3) {
+ transform: rotate(-45deg) translate(5px, -5px);
+}
+
+/* Bento Grid Layout */
+.bento-grid {
+ display: grid;
+ gap: var(--space-lg);
+ padding: var(--space-lg) 0;
+}
+
+.bento-hero {
+ grid-template-columns: repeat(12, 1fr);
+ grid-auto-rows: minmax(100px, auto);
+ padding-top: 100px;
+ min-height: calc(100vh - 100px);
+}
+
+.bento-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-xl);
+ transition: var(--transition);
+ position: relative;
+ overflow: hidden;
+}
+
+.bento-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--primary-muted), transparent);
+ opacity: 0;
+ transition: var(--transition);
+}
+
+.bento-card:hover {
+ border-color: var(--border-light);
+ transform: translateY(-2px);
+}
+
+.bento-card:hover::before {
+ opacity: 1;
+}
+
+.bento-card-title {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ font-size: 1rem;
+ color: var(--text-muted);
+ margin-bottom: var(--space-lg);
+}
+
+.bento-card-title i {
+ color: var(--primary-color);
+}
+
+/* Profile Card */
+.bento-profile {
+ grid-column: span 8;
+ display: flex;
+ align-items: center;
+ gap: var(--space-2xl);
+ background: var(--gradient-card);
+ padding: var(--space-2xl);
+}
+
+.profile-photo {
+ flex-shrink: 0;
+}
+
+.profile-photo img {
+ width: 200px;
+ height: 200px;
+ border-radius: var(--radius-xl);
+ object-fit: cover;
+ border: 3px solid var(--border-color);
+ transition: var(--transition);
+}
+
+.bento-profile:hover .profile-photo img {
+ border-color: var(--primary-color);
+ box-shadow: var(--shadow-glow);
+}
+
+.profile-info {
+ flex: 1;
+}
+
+.profile-info h1 {
+ margin-bottom: var(--space-sm);
+ background: var(--gradient-text);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.profile-title {
+ font-size: 1.25rem;
+ color: var(--primary-color);
+ font-weight: 600;
+ margin-bottom: var(--space-md);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.profile-title i {
+ font-size: 1rem;
+}
+
+.profile-description {
+ color: var(--text-secondary);
+ font-size: 1rem;
+ line-height: 1.8;
+ margin-bottom: var(--space-lg);
+ max-width: 550px;
+}
+
+.profile-buttons {
+ display: flex;
+ gap: var(--space-md);
+ flex-wrap: wrap;
+}
+
+/* Quick Info Cards */
+.bento-quick {
+ grid-column: span 4;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-lg);
+}
+
+.quick-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-lg);
+ padding: var(--space-lg);
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ transition: var(--transition);
+ flex: 1;
+}
+
+.quick-card:hover {
+ border-color: var(--primary-color);
+ background: var(--bg-card-hover);
+}
+
+.quick-icon {
+ width: 50px;
+ height: 50px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+ font-size: 1.25rem;
+ flex-shrink: 0;
+}
+
+.quick-content h4 {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ font-weight: 500;
+ margin-bottom: var(--space-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.quick-content p {
+ font-size: 1rem;
+ color: var(--text-primary);
+ font-weight: 600;
+ margin: 0;
+}
+
+/* Social Icons Inline */
+.social-icons-inline {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin-top: var(--space-xs);
+}
+
+.social-icon-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text-secondary);
+ font-size: 1.25rem;
+ transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
+ text-decoration: none;
+}
+
+.social-icon-link:hover {
+ color: var(--primary-color);
+ transform: scale(1.15);
+ text-shadow: 0 0 15px var(--primary-color);
+}
+
+.social-icon-link:hover .fa-telegram {
+ color: #0088cc;
+ text-shadow: 0 0 15px rgba(0, 136, 204, 0.6);
+}
+
+.social-icon-link:hover .fa-github {
+ color: #fff;
+ text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+}
+
+.social-icon-link:hover .fa-vk {
+ color: #4a76a8;
+ text-shadow: 0 0 15px rgba(74, 118, 168, 0.6);
+}
+
+.social-icon-link:hover .fa-linkedin {
+ color: #0077b5;
+ text-shadow: 0 0 15px rgba(0, 119, 181, 0.6);
+}
+
+/* Skills Card */
+.bento-skills,
+.skills-full {
+ grid-column: span 8;
+}
+
+.skills-header {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin-bottom: var(--space-lg);
+}
+
+.skills-header h3 {
+ margin: 0;
+ font-size: 1.25rem;
+}
+
+.icon-box {
+ width: 44px;
+ height: 44px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+ font-size: 1.1rem;
+}
+
+.skills-categories {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: var(--space-lg);
+}
+
+.skill-category {
+ background: var(--bg-elevated);
+ padding: var(--space-md);
+ border-radius: var(--radius-md);
+ border: 1px solid var(--border-color);
+}
+
+.skill-category-title {
+ font-size: 0.7rem;
+ color: var(--primary-color);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ margin-bottom: var(--space-md);
+ font-weight: 600;
+}
+
+.skill-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+}
+
+/* Sections */
+.section {
+ padding: var(--space-3xl) 0;
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-2xl);
+ flex-wrap: wrap;
+ gap: var(--space-md);
+}
+
+.section-title {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin: 0;
+}
+
+.section-icon {
+ width: 48px;
+ height: 48px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+ font-size: 1.25rem;
+}
+
+.section-subtitle {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ font-size: 1.25rem;
+ color: var(--text-primary);
+ margin-bottom: var(--space-xl);
+}
+
+.section-subtitle i {
+ color: var(--primary-color);
+}
+
+.section-divider {
+ height: 1px;
+ background: linear-gradient(90deg, var(--primary-color), var(--border-color), transparent);
+ margin: var(--space-2xl) 0;
+}
+
+/* Page Header */
+.page-header {
+ text-align: center;
+ padding: calc(100px + var(--space-2xl)) 0 var(--space-2xl);
+}
+
+.page-title {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin-bottom: var(--space-md);
+}
+
+.page-icon {
+ width: 56px;
+ height: 56px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+ font-size: 1.5rem;
+}
+
+.page-subtitle {
+ font-size: 1.1rem;
+ color: var(--text-secondary);
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+/* Footer */
+.footer-minimal {
+ background: var(--bg-darker);
+ border-top: 1px solid var(--border-color);
+ padding: var(--space-xl) 0;
+ margin-top: var(--space-3xl);
+}
+
+.footer-minimal-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: var(--space-lg);
+}
+
+.footer-logo {
+ display: inline-flex;
+ align-items: center;
+ font-family: 'Raleway', sans-serif;
+ font-weight: 700;
+ font-size: 1.25rem;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.footer-social-icons {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.footer-social-icons a {
+ color: var(--text-secondary);
+ font-size: 1.125rem;
+ transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
+ text-decoration: none;
+}
+
+.footer-social-icons a:hover {
+ color: var(--primary-color);
+ transform: translateY(-2px);
+ text-shadow: 0 0 12px var(--primary-color);
+}
+
+.footer-copyright-minimal {
+ color: var(--text-muted);
+ font-size: 0.85rem;
+ margin: 0;
+}
+
+/* CTA Section */
+.cta-section {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-3xl);
+ margin: var(--space-3xl) 0;
+ position: relative;
+ overflow: hidden;
+}
+
+.cta-section::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: var(--gradient-glow);
+ pointer-events: none;
+}
+
+.cta-content {
+ position: relative;
+ text-align: center;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.cta-icon {
+ width: 80px;
+ height: 80px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-xl);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ color: var(--primary-color);
+ margin: 0 auto var(--space-xl);
+}
+
+.cta-content h2 {
+ margin-bottom: var(--space-md);
+}
+
+.cta-content p {
+ margin-bottom: var(--space-xl);
+}
+
+.cta-buttons {
+ display: flex;
+ gap: var(--space-md);
+ justify-content: center;
+ flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/static/css/media.css b/static/css/media.css
new file mode 100644
index 0000000..69544b0
--- /dev/null
+++ b/static/css/media.css
@@ -0,0 +1,387 @@
+/**
+ * Responsive Media Queries - All Adaptive Styles
+ */
+
+/* Container adjustments */
+@media (max-width: 768px) {
+ .container {
+ padding: 0 var(--space-md);
+ }
+}
+
+/* Navigation - Tablets & Mobile */
+@media (max-width: 992px) {
+ .nav-toggle {
+ display: flex;
+ }
+
+ .nav-menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: var(--bg-dark);
+ flex-direction: column;
+ justify-content: center;
+ padding: var(--space-2xl);
+ gap: var(--space-sm);
+ transform: translateX(100%);
+ transition: var(--transition);
+ z-index: var(--z-modal);
+ }
+
+ .nav-menu.active {
+ transform: translateX(0);
+ }
+
+ .nav-link {
+ width: 100%;
+ padding: var(--space-md);
+ font-size: 1.1rem;
+ justify-content: center;
+ }
+
+ .nav-auth {
+ position: fixed;
+ bottom: var(--space-2xl);
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: var(--z-modal);
+ opacity: 0;
+ pointer-events: none;
+ transition: var(--transition);
+ }
+
+ .nav-menu.active ~ .nav-auth,
+ body.nav-open .nav-auth {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .nav-user-name,
+ .btn-text {
+ display: none;
+ }
+}
+
+/* Bento Grid - Large Screens */
+@media (max-width: 1200px) {
+ .bento-profile {
+ grid-column: span 12;
+ }
+
+ .bento-quick {
+ grid-column: span 12;
+ flex-direction: row;
+ }
+
+ .bento-socials {
+ grid-column: span 6;
+ }
+
+ .bento-skills,
+ .skills-full {
+ grid-column: span 6;
+ }
+
+ .project-card.featured {
+ grid-column: span 12;
+ }
+
+ .project-card.regular {
+ grid-column: span 6;
+ }
+
+ .project-card.small {
+ grid-column: span 4;
+ }
+
+ .about-bio {
+ grid-column: span 12;
+ }
+
+ .about-stats {
+ grid-column: span 12;
+ }
+
+ .timeline-card {
+ grid-column: span 12;
+ }
+
+ .languages-card {
+ grid-column: span 6;
+ }
+
+ .footer-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+
+/* Tablets */
+@media (max-width: 992px) {
+ .bento-profile {
+ flex-direction: column;
+ text-align: center;
+ padding: var(--space-xl);
+ }
+
+ .profile-photo img {
+ width: 160px;
+ height: 160px;
+ }
+
+ .profile-buttons {
+ justify-content: center;
+ }
+
+ .bento-quick {
+ flex-wrap: wrap;
+ }
+
+ .quick-card {
+ flex: 1 1 calc(33.333% - var(--space-lg));
+ min-width: 150px;
+ }
+
+ .bento-socials,
+ .bento-skills,
+ .skills-full {
+ grid-column: span 12;
+ }
+
+ .project-card.featured {
+ grid-template-columns: 1fr;
+ }
+
+ .project-card.featured .project-image {
+ min-height: 200px;
+ }
+
+ .project-card.small {
+ grid-column: span 6;
+ }
+
+ .contact-bento {
+ grid-template-columns: 1fr;
+ }
+
+ .about-bento > .bento-card {
+ grid-column: span 12 !important;
+ }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+ :root {
+ --container-padding: 1rem;
+ }
+
+ .bento-hero {
+ padding-top: 80px;
+ }
+
+ .page-header {
+ padding-top: calc(80px + var(--space-xl));
+ }
+
+ .article-full {
+ padding-top: 80px;
+ }
+
+ .project-card.regular,
+ .project-card.small {
+ grid-column: span 12;
+ }
+
+ .github-cta {
+ grid-column: span 12;
+ }
+
+ .blog-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .achievements-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .achievement-card {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .article-meta-full {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .article-footer-full {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .footer-grid {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .footer-brand p {
+ max-width: none;
+ }
+
+ .footer-socials {
+ justify-content: center;
+ }
+
+ .footer-bottom {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .filters-wrapper {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .filter-group {
+ width: 100%;
+ }
+
+ .filter-buttons {
+ flex-wrap: wrap;
+ }
+
+ .filter-select {
+ width: 100%;
+ }
+
+ .search-form {
+ flex-direction: column;
+ }
+
+ .cta-section {
+ padding: var(--space-xl);
+ }
+
+ .cta-buttons {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .cta-buttons .btn {
+ width: 100%;
+ }
+
+ .messages-container {
+ right: var(--space-md);
+ left: var(--space-md);
+ max-width: none;
+ }
+
+ .back-to-top {
+ bottom: var(--space-md);
+ right: var(--space-md);
+ width: 44px;
+ height: 44px;
+ }
+
+ .github-cta-card {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .footer-minimal-content {
+ flex-direction: column;
+ text-align: center;
+ gap: var(--space-md);
+ }
+}
+
+/* Small Mobile */
+@media (max-width: 576px) {
+ .quick-card {
+ flex: 1 1 100%;
+ }
+
+ .socials-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .stats-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .skills-categories {
+ grid-template-columns: 1fr;
+ }
+
+ .profile-buttons {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .profile-buttons .btn {
+ width: 100%;
+ }
+
+ .about-bio-header {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .about-bio-actions {
+ flex-direction: column;
+ }
+
+ .about-bio-actions .btn {
+ width: 100%;
+ }
+
+ .share-buttons {
+ flex-wrap: wrap;
+ }
+
+ .related-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .pagination-numbers {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .error-code {
+ font-size: 5rem;
+ }
+
+ .social-icon-link {
+ font-size: 1.5rem;
+ padding: var(--space-xs);
+ }
+
+ .social-icons-inline {
+ gap: var(--space-lg);
+ }
+
+ .form-row {
+ grid-template-columns: 1fr;
+ }
+
+ .carousel-container {
+ min-height: 250px;
+ }
+
+ .carousel-slide img {
+ max-height: 250px;
+ }
+
+ .gallery-collage {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .links-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file
diff --git a/static/css/pages.css b/static/css/pages.css
new file mode 100644
index 0000000..b2b7761
--- /dev/null
+++ b/static/css/pages.css
@@ -0,0 +1,697 @@
+/**
+ * Specific Pages - About, Contacts, Achievements, Auth, Error Pages
+ */
+
+/* About Page */
+.about-bento {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: var(--space-lg);
+ padding-bottom: var(--space-2xl);
+}
+
+.about-bio {
+ grid-column: span 8;
+}
+
+.about-stats {
+ grid-column: span 4;
+}
+
+.about-bio-header {
+ display: flex;
+ align-items: center;
+ gap: var(--space-xl);
+ margin-bottom: var(--space-xl);
+}
+
+.about-photo img {
+ width: 150px;
+ height: 150px;
+ border-radius: var(--radius-xl);
+ object-fit: cover;
+ border: 3px solid var(--border-color);
+}
+
+.about-bio-info h2 {
+ margin-bottom: var(--space-xs);
+}
+
+.about-title {
+ color: var(--primary-color);
+ font-weight: 600;
+ margin-bottom: var(--space-sm);
+}
+
+.about-location {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ color: var(--text-muted);
+ font-size: 0.9rem;
+}
+
+.about-bio-text {
+ margin-bottom: var(--space-xl);
+ color: var(--text-secondary);
+ line-height: 1.8;
+}
+
+.about-bio-actions {
+ display: flex;
+ gap: var(--space-md);
+ flex-wrap: wrap;
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-md);
+}
+
+.stat-item {
+ text-align: center;
+ padding: var(--space-lg);
+ background: var(--bg-elevated);
+ border-radius: var(--radius-md);
+}
+
+.stat-value {
+ display: block;
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--primary-color);
+ font-family: 'Raleway', sans-serif;
+}
+
+.stat-label {
+ display: block;
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ margin-top: var(--space-xs);
+}
+
+/* Timeline */
+.timeline-card {
+ grid-column: span 6;
+}
+
+.timeline {
+ position: relative;
+ padding-left: var(--space-xl);
+}
+
+.timeline::before {
+ content: '';
+ position: absolute;
+ left: 5px;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background: var(--border-color);
+}
+
+.timeline-item {
+ position: relative;
+ padding-bottom: var(--space-xl);
+}
+
+.timeline-item:last-child {
+ padding-bottom: 0;
+}
+
+.timeline-marker {
+ position: absolute;
+ left: calc(-1 * var(--space-xl) + 1px);
+ top: 0;
+ width: 12px;
+ height: 12px;
+ background: var(--primary-color);
+ border-radius: var(--radius-full);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.timeline-marker i {
+ font-size: 0.5rem;
+ color: var(--text-primary);
+}
+
+.timeline-content {
+ background: var(--bg-elevated);
+ padding: var(--space-lg);
+ border-radius: var(--radius-md);
+ border: 1px solid var(--border-color);
+}
+
+.timeline-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+ margin-bottom: var(--space-sm);
+}
+
+.timeline-date {
+ font-size: 0.8rem;
+ color: var(--primary-color);
+ font-weight: 600;
+}
+
+.timeline-duration {
+ font-size: 0.75rem;
+ color: var(--text-muted);
+ background: var(--bg-card);
+ padding: 0.2rem 0.5rem;
+ border-radius: var(--radius-sm);
+}
+
+.timeline-title {
+ font-size: 1.1rem;
+ margin-bottom: var(--space-xs);
+}
+
+.timeline-subtitle {
+ font-size: 0.9rem;
+ color: var(--text-muted);
+ margin-bottom: var(--space-md);
+}
+
+.timeline-description {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin-bottom: var(--space-md);
+ line-height: 1.6;
+}
+
+.timeline-list {
+ list-style: none;
+ margin: 0 0 var(--space-md) 0;
+ padding: 0;
+}
+
+.timeline-list li {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-sm);
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-sm);
+}
+
+.timeline-list li i {
+ color: var(--primary-color);
+ margin-top: 0.2em;
+ flex-shrink: 0;
+ font-size: 0.7rem;
+}
+
+.timeline-tech {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+}
+
+.timeline-certificate {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ margin-top: var(--space-md);
+ padding-top: var(--space-md);
+ border-top: 1px solid var(--border-color);
+}
+
+.timeline-certificate i {
+ color: var(--warning-color);
+}
+
+.education-type {
+ font-size: 0.7rem;
+ padding: 0.2rem 0.5rem;
+ border-radius: var(--radius-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 600;
+}
+
+.education-type-university {
+ background: rgba(59, 130, 246, 0.15);
+ color: var(--info-color);
+}
+
+.education-type-course {
+ background: rgba(34, 197, 94, 0.15);
+ color: var(--success-color);
+}
+
+/* Skills Full Grid */
+.skills-full {
+ grid-column: span 12;
+}
+
+.skills-full-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--space-lg);
+}
+
+.skill-category-card {
+ background: var(--bg-elevated);
+ padding: var(--space-lg);
+ border-radius: var(--radius-md);
+ border: 1px solid var(--border-color);
+}
+
+.skill-category-card .skill-category-title {
+ margin-bottom: var(--space-md);
+}
+
+/* Soft Skills & Interests */
+.soft-skills-list,
+.interests-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+}
+
+.soft-skill-item,
+.interest-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-sm);
+ background: var(--bg-elevated);
+ border-radius: var(--radius-sm);
+}
+
+.soft-skill-item i,
+.interest-item i {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--primary-muted);
+ color: var(--primary-color);
+ border-radius: var(--radius-sm);
+ font-size: 0.9rem;
+ flex-shrink: 0;
+}
+
+.soft-skill-item span,
+.interest-item span {
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+}
+
+/* Languages */
+.languages-card {
+ grid-column: span 4;
+}
+
+.languages-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+}
+
+.language-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-md);
+ background: var(--bg-elevated);
+ border-radius: var(--radius-md);
+}
+
+.language-name {
+ font-weight: 600;
+ color: var(--text-primary);
+}
+
+.language-level {
+ font-size: 0.85rem;
+ color: var(--text-muted);
+}
+
+/* Achievements Page */
+.achievements-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: var(--space-lg);
+}
+
+.achievement-card {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-lg);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-xl);
+ text-decoration: none;
+ transition: var(--transition);
+ position: relative;
+}
+
+.achievement-card:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.achievement-icon {
+ width: 64px;
+ height: 64px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.75rem;
+ color: var(--primary-color);
+ flex-shrink: 0;
+}
+
+.achievement-content {
+ flex: 1;
+}
+
+.achievement-title {
+ font-size: 1.1rem;
+ color: var(--text-primary);
+ margin-bottom: var(--space-sm);
+ line-height: 1.4;
+}
+
+.achievement-subtitle {
+ font-size: 0.9rem;
+ color: var(--primary-color);
+ font-weight: 500;
+ margin-bottom: var(--space-sm);
+}
+
+.achievement-excerpt {
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-md);
+ line-height: 1.6;
+}
+
+.achievement-date {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-xs);
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+/* Contacts Page */
+.contact-bento {
+ display: grid;
+ grid-template-columns: 7fr 5fr;
+ gap: var(--space-lg);
+ padding-bottom: var(--space-2xl);
+}
+
+.contact-form-card {
+ padding: var(--space-2xl);
+}
+
+.contact-form .form-control {
+ background: var(--bg-elevated);
+}
+
+.form-row {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-lg);
+}
+
+.contact-info-card {
+ padding: var(--space-2xl);
+}
+
+.contact-methods {
+ margin-bottom: var(--space-xl);
+}
+
+.contact-method {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: var(--space-md);
+ background: var(--bg-elevated);
+ border-radius: var(--radius-md);
+ margin-bottom: var(--space-md);
+ transition: var(--transition);
+ border: 1px solid transparent;
+}
+
+.contact-method:hover {
+ border-color: var(--primary-color);
+}
+
+.contact-method-icon {
+ width: 48px;
+ height: 48px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--primary-color);
+ font-size: 1.25rem;
+ flex-shrink: 0;
+}
+
+.contact-method-icon.telegram {
+ background: rgba(0, 136, 204, 0.15);
+ color: #0088cc;
+}
+
+.contact-method-info {
+ flex: 1;
+}
+
+.contact-method-info h4 {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ font-weight: 500;
+ margin-bottom: var(--space-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.contact-method-info p,
+.contact-method-info a {
+ color: var(--text-primary);
+ font-weight: 500;
+ margin: 0;
+}
+
+.contact-method-info a {
+ text-decoration: none;
+}
+
+.contact-method-info a:hover {
+ color: var(--primary-color);
+}
+
+.contact-copy-btn {
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-sm);
+ color: var(--text-muted);
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.contact-copy-btn:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.contact-copy-btn.copied {
+ background: var(--primary-muted);
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.contact-social {
+ margin-bottom: var(--space-xl);
+}
+
+.contact-social h4,
+.contact-resume h4 {
+ font-size: 0.9rem;
+ margin-bottom: var(--space-md);
+}
+
+.contact-social-links {
+ display: flex;
+ gap: var(--space-sm);
+}
+
+.contact-social-link {
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-elevated);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ color: var(--text-secondary);
+ font-size: 1.25rem;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.contact-social-link:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+ transform: translateY(-2px);
+}
+
+.contact-social-link.telegram:hover {
+ border-color: #0088cc;
+ color: #0088cc;
+}
+
+.contact-social-link.github:hover {
+ border-color: #fff;
+ color: #fff;
+}
+
+.contact-social-link.vk:hover {
+ border-color: #4a76a8;
+ color: #4a76a8;
+}
+
+.contact-social-link.linkedin:hover {
+ border-color: #0077b5;
+ color: #0077b5;
+}
+
+.contact-resume p {
+ font-size: 0.9rem;
+ margin-bottom: var(--space-md);
+}
+
+/* Auth Pages */
+.auth-container {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xl);
+ padding-top: 100px;
+}
+
+.auth-card {
+ width: 100%;
+ max-width: 440px;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-2xl);
+}
+
+.auth-header {
+ text-align: center;
+ margin-bottom: var(--space-xl);
+}
+
+.auth-header .logo {
+ margin-bottom: var(--space-lg);
+ justify-content: center;
+}
+
+.auth-title {
+ font-size: 1.5rem;
+ margin-bottom: var(--space-sm);
+}
+
+.auth-subtitle {
+ color: var(--text-muted);
+ font-size: 0.9rem;
+ margin: 0;
+}
+
+.auth-error {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-md);
+ background: rgba(239, 68, 68, 0.1);
+ border: 1px solid var(--error-color);
+ border-radius: var(--radius-md);
+ color: var(--error-color);
+ font-size: 0.9rem;
+ margin-bottom: var(--space-lg);
+}
+
+.auth-footer {
+ text-align: center;
+ margin-top: var(--space-xl);
+ padding-top: var(--space-xl);
+ border-top: 1px solid var(--border-color);
+}
+
+.auth-footer p {
+ margin: 0;
+ color: var(--text-muted);
+}
+
+/* Error Pages */
+.error-container {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xl);
+}
+
+.error-card {
+ text-align: center;
+ max-width: 500px;
+}
+
+.error-code {
+ font-size: 8rem;
+ font-weight: 800;
+ font-family: 'Raleway', sans-serif;
+ background: var(--gradient-primary);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 1;
+ margin-bottom: var(--space-lg);
+}
+
+.error-title {
+ font-size: 1.75rem;
+ margin-bottom: var(--space-md);
+}
+
+.error-description {
+ color: var(--text-secondary);
+ margin-bottom: var(--space-xl);
+}
+
+.error-actions {
+ display: flex;
+ gap: var(--space-md);
+ justify-content: center;
+ flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/static/css/projects.css b/static/css/projects.css
new file mode 100644
index 0000000..a2083f9
--- /dev/null
+++ b/static/css/projects.css
@@ -0,0 +1,398 @@
+/**
+ * Projects Page - Grid, Cards, Filters, GitHub CTA
+ */
+
+/* Projects Grid */
+.projects-bento {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: var(--space-lg);
+}
+
+.projects-section {
+ margin-bottom: var(--space-2xl);
+}
+
+.projects-section + .projects-section {
+ margin-top: var(--space-3xl);
+ padding-top: var(--space-2xl);
+ border-top: 1px solid var(--border-color);
+}
+
+/* Project Card */
+.project-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ overflow: hidden;
+ transition: var(--transition);
+ position: relative;
+}
+
+.project-card:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.project-card.featured {
+ grid-column: span 8;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
+
+.project-card.featured .project-image {
+ height: 100%;
+ min-height: 320px;
+}
+
+.project-card.regular {
+ grid-column: span 4;
+}
+
+.project-card.small {
+ grid-column: span 3;
+}
+
+.project-image {
+ position: relative;
+ height: 200px;
+ overflow: hidden;
+ background: var(--bg-elevated);
+}
+
+.project-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: var(--transition-slow);
+}
+
+.project-card:hover .project-image img {
+ transform: scale(1.05);
+}
+
+.project-image-placeholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
+}
+
+.project-image-placeholder i {
+ font-size: 3rem;
+ color: var(--border-light);
+}
+
+.project-logo {
+ position: absolute;
+ top: var(--space-md);
+ left: var(--space-md);
+ width: 48px;
+ height: 48px;
+ background: var(--bg-dark);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--border-color);
+}
+
+.project-logo i {
+ font-size: 1.25rem;
+ color: var(--primary-color);
+}
+
+.project-logo-small {
+ width: 56px;
+ height: 56px;
+ background: var(--primary-muted);
+ border-radius: var(--radius-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: var(--space-md);
+}
+
+.project-logo-small i {
+ font-size: 1.5rem;
+ color: var(--primary-color);
+}
+
+.project-status {
+ position: absolute;
+ top: var(--space-md);
+ right: var(--space-md);
+ padding: 0.3rem 0.7rem;
+ border-radius: var(--radius-full);
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.project-status.primary {
+ background: var(--primary-muted);
+ color: var(--primary-color);
+}
+
+.project-status.success,
+.project-status.completed {
+ background: rgba(34, 197, 94, 0.2);
+ color: var(--success-color);
+}
+
+.project-status.warning {
+ background: rgba(245, 158, 11, 0.2);
+ color: var(--warning-color);
+}
+
+.project-status.info {
+ background: rgba(59, 130, 246, 0.2);
+ color: var(--info-color);
+}
+
+.project-status.beta {
+ background: var(--primary-muted);
+ color: var(--primary-color);
+}
+
+.project-status.secondary {
+ background: var(--bg-elevated);
+ color: var(--text-secondary);
+}
+
+.project-content {
+ padding: var(--space-lg);
+}
+
+.project-card.small .project-content {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: 200px;
+}
+
+.project-title {
+ font-size: 1.25rem;
+ margin-bottom: var(--space-sm);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ flex-wrap: wrap;
+}
+
+.project-card.small .project-title {
+ font-size: 1rem;
+ justify-content: center;
+}
+
+.project-users {
+ font-size: 0.8rem;
+ color: var(--primary-color);
+ font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+.project-description {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin-bottom: var(--space-md);
+ line-height: 1.6;
+}
+
+.project-features {
+ list-style: none;
+ margin: 0 0 var(--space-md) 0;
+ padding: 0;
+}
+
+.project-features li {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-sm);
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-sm);
+}
+
+.project-features li i {
+ color: var(--primary-color);
+ margin-top: 0.2em;
+ flex-shrink: 0;
+}
+
+.project-tech {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-sm);
+ margin-bottom: var(--space-md);
+}
+
+.project-card.small .project-tech {
+ justify-content: center;
+ margin-bottom: 0;
+}
+
+.project-links {
+ display: flex;
+ gap: var(--space-sm);
+ flex-wrap: wrap;
+}
+
+.project-link {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+ padding: var(--space-sm) var(--space-md);
+ background: var(--bg-elevated);
+ border-radius: var(--radius-sm);
+ transition: var(--transition);
+ text-decoration: none;
+}
+
+.project-link:hover {
+ color: var(--primary-color);
+ background: var(--primary-muted);
+}
+
+/* Filters */
+.filters-section {
+ margin-bottom: var(--space-2xl);
+}
+
+.filters-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-xl);
+ align-items: center;
+}
+
+.filter-group {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+}
+
+.filter-label {
+ font-size: 0.9rem;
+ color: var(--text-muted);
+ font-weight: 500;
+}
+
+.filter-buttons {
+ display: flex;
+ gap: var(--space-sm);
+}
+
+.filter-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+ font-weight: 500;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.filter-btn:hover {
+ border-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.filter-btn.active {
+ background: var(--primary-color);
+ border-color: var(--primary-color);
+ color: var(--text-primary);
+}
+
+.filter-select {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ padding: var(--space-sm) var(--space-md);
+ color: var(--text-primary);
+ font-size: 0.85rem;
+ cursor: pointer;
+ min-width: 180px;
+}
+
+.filter-select:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+/* GitHub CTA */
+.github-cta {
+ grid-column: span 3;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 200px;
+}
+
+.github-cta-content {
+ text-align: center;
+}
+
+.github-cta-content i {
+ font-size: 3rem;
+ color: var(--text-muted);
+ margin-bottom: var(--space-md);
+}
+
+.github-cta-content p {
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-md);
+}
+
+.github-cta-section {
+ margin-top: var(--space-2xl);
+}
+
+.github-cta-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-xl);
+ padding: var(--space-2xl);
+ display: flex;
+ align-items: center;
+ gap: var(--space-xl);
+ transition: var(--transition);
+}
+
+.github-cta-card:hover {
+ border-color: var(--primary-color);
+}
+
+.github-cta-card > i {
+ font-size: 3rem;
+ color: var(--text-muted);
+}
+
+.github-cta-text {
+ flex: 1;
+}
+
+.github-cta-text h3 {
+ margin-bottom: var(--space-sm);
+}
+
+.github-cta-text p {
+ margin: 0;
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
deleted file mode 100644
index bb160c3..0000000
--- a/static/css/style.css
+++ /dev/null
@@ -1,4441 +0,0 @@
-/**
- * deev.space - Main Stylesheet
- * @author Егор Деев
- * @version 2.0
- */
-
-/* ===== Google Fonts Import ===== */
-@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
-
-/* ===== CSS Variables ===== */
-:root {
- /* Primary Colors - Red Theme */
- --primary-color: #e63946;
- --primary-light: #ff6b6b;
- --primary-dark: #c1121f;
- --primary-muted: rgba(230, 57, 70, 0.15);
- --primary-glow: rgba(230, 57, 70, 0.3);
-
- /* Background Colors */
- --bg-dark: #0d0d0d;
- --bg-darker: #080808;
- --bg-card: #141414;
- --bg-card-hover: #1a1a1a;
- --bg-elevated: #1e1e1e;
- --bg-input: #1a1a1a;
-
- /* Text Colors */
- --text-primary: #ffffff;
- --text-secondary: #b0b0b0;
- --text-muted: #666666;
- --text-dark: #0d0d0d;
-
- /* Border Colors */
- --border-color: #2a2a2a;
- --border-light: #3a3a3a;
- --border-focus: var(--primary-color);
-
- /* Status Colors */
- --success-color: #22c55e;
- --warning-color: #f59e0b;
- --error-color: #ef4444;
- --info-color: #3b82f6;
-
- /* Gradients */
- --gradient-primary: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
- --gradient-card: linear-gradient(145deg, #1a1a1a 0%, #141414 100%);
- --gradient-glow: radial-gradient(ellipse at center, rgba(230, 57, 70, 0.15) 0%, transparent 70%);
- --gradient-text: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
-
- /* Shadows */
- --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
- --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
- --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
- --shadow-glow: 0 0 40px rgba(230, 57, 70, 0.2);
- --shadow-glow-strong: 0 0 60px rgba(230, 57, 70, 0.3);
-
- /* Border Radius */
- --radius-xs: 4px;
- --radius-sm: 8px;
- --radius-md: 12px;
- --radius-lg: 16px;
- --radius-xl: 24px;
- --radius-full: 9999px;
-
- /* Transitions */
- --transition-fast: all 0.15s ease;
- --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-
- /* Z-Index */
- --z-dropdown: 100;
- --z-sticky: 200;
- --z-fixed: 300;
- --z-modal: 400;
- --z-tooltip: 500;
-
- /* Spacing */
- --space-xs: 0.25rem;
- --space-sm: 0.5rem;
- --space-md: 1rem;
- --space-lg: 1.5rem;
- --space-xl: 2rem;
- --space-2xl: 3rem;
- --space-3xl: 4rem;
-
- /* Container */
- --container-max: 1400px;
- --container-padding: 2rem;
-}
-
-/* ===== Reset & Base ===== */
-*, *::before, *::after {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-html {
- scroll-behavior: smooth;
- font-size: 16px;
- -webkit-text-size-adjust: 100%;
-}
-
-body {
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- background-color: var(--bg-dark);
- color: var(--text-primary);
- line-height: 1.6;
- overflow-x: hidden;
- min-height: 100vh;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-body.nav-open {
- overflow: hidden;
-}
-
-/* ===== Typography ===== */
-h1, h2, h3, h4, h5, h6 {
- font-family: 'Raleway', sans-serif;
- font-weight: 700;
- line-height: 1.2;
- letter-spacing: -0.02em;
- color: var(--text-primary);
-}
-
-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
-h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
-h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
-h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); }
-h5 { font-size: 1rem; }
-h6 { font-size: 0.875rem; }
-
-p {
- margin-bottom: var(--space-md);
- color: var(--text-secondary);
-}
-
-a {
- color: var(--primary-color);
- text-decoration: none;
- transition: var(--transition);
-}
-
-a:hover {
- color: var(--primary-light);
-}
-
-strong, b {
- font-weight: 600;
-}
-
-code {
- font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
- background: var(--bg-elevated);
- padding: 0.2em 0.4em;
- border-radius: var(--radius-xs);
- font-size: 0.9em;
- color: var(--primary-light);
-}
-
-pre {
- background: var(--bg-darker);
- padding: var(--space-lg);
- border-radius: var(--radius-md);
- overflow-x: auto;
- margin: var(--space-lg) 0;
-}
-
-pre code {
- background: none;
- padding: 0;
-}
-
-::selection {
- background: var(--primary-color);
- color: var(--text-primary);
-}
-
-/* ===== Scrollbar ===== */
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-::-webkit-scrollbar-track {
- background: var(--bg-dark);
-}
-
-::-webkit-scrollbar-thumb {
- background: var(--border-color);
- border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: var(--primary-color);
-}
-
-/* ===== Container ===== */
-.container {
- width: 100%;
- max-width: var(--container-max);
- margin: 0 auto;
- padding: 0 var(--container-padding);
-}
-
-@media (max-width: 768px) {
- .container {
- padding: 0 var(--space-md);
- }
-}
-
-/* ===== Logo ===== */
-.logo {
- display: inline-flex;
- align-items: center;
- gap: 0;
- font-family: 'Raleway', sans-serif;
- font-weight: 700;
- font-size: 1.5rem;
- letter-spacing: -0.02em;
- text-decoration: none;
-}
-
-.logo-deev,
-.logo-space {
- color: var(--text-primary);
- transition: var(--transition);
-}
-
-.logo-dot {
- width: 8px;
- height: 8px;
- background-color: var(--primary-color);
- margin: 0 2px;
- flex-shrink: 0;
- transition: var(--transition);
-}
-
-.logo:hover .logo-dot {
- transform: scale(1.3);
- box-shadow: 0 0 15px var(--primary-color);
-}
-
-.logo:hover .logo-deev,
-.logo:hover .logo-space {
- color: var(--text-primary);
-}
-
-/* ===== Navigation ===== */
-.navbar {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: var(--z-fixed);
- background: rgba(13, 13, 13, 0.8);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border-bottom: 1px solid var(--border-color);
- padding: var(--space-md) 0;
- transition: var(--transition);
-}
-
-.navbar.scrolled {
- background: rgba(13, 13, 13, 0.95);
- padding: var(--space-sm) 0;
- box-shadow: var(--shadow-md);
-}
-
-.navbar.hidden {
- transform: translateY(-100%);
-}
-
-.navbar > .container {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--space-lg);
-}
-
-.nav-menu {
- display: flex;
- align-items: center;
- gap: var(--space-xs);
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.nav-link {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- color: var(--text-secondary);
- padding: var(--space-sm) var(--space-md);
- border-radius: var(--radius-sm);
- font-weight: 500;
- font-size: 0.9rem;
- transition: var(--transition);
- text-decoration: none;
-}
-
-.nav-link i {
- font-size: 0.85rem;
- opacity: 0.7;
-}
-
-.nav-link:hover {
- color: var(--text-primary);
- background: var(--primary-muted);
-}
-
-.nav-link.active {
- color: var(--primary-color);
- background: var(--primary-muted);
-}
-
-.nav-auth {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.nav-user-info {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
-}
-
-.nav-user-avatar {
- width: 32px;
- height: 32px;
- background: var(--primary-muted);
- color: var(--primary-color);
- border-radius: var(--radius-full);
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 600;
- font-size: 0.875rem;
-}
-
-.nav-user-name {
- color: var(--text-secondary);
- font-size: 0.9rem;
- font-weight: 500;
-}
-
-/* Mobile Navigation Toggle */
-.nav-toggle {
- display: none;
- flex-direction: column;
- gap: 5px;
- background: none;
- border: none;
- cursor: pointer;
- padding: 5px;
- z-index: var(--z-fixed);
-}
-
-.nav-toggle span {
- width: 24px;
- height: 2px;
- background: var(--text-primary);
- transition: var(--transition);
- transform-origin: center;
-}
-
-.nav-toggle.active span:nth-child(1) {
- transform: rotate(45deg) translate(5px, 5px);
-}
-
-.nav-toggle.active span:nth-child(2) {
- opacity: 0;
-}
-
-.nav-toggle.active span:nth-child(3) {
- transform: rotate(-45deg) translate(5px, -5px);
-}
-
-@media (max-width: 992px) {
- .nav-toggle {
- display: flex;
- }
-
- .nav-menu {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: var(--bg-dark);
- flex-direction: column;
- justify-content: center;
- padding: var(--space-2xl);
- gap: var(--space-sm);
- transform: translateX(100%);
- transition: var(--transition);
- z-index: var(--z-modal);
- }
-
- .nav-menu.active {
- transform: translateX(0);
- }
-
- .nav-link {
- width: 100%;
- padding: var(--space-md);
- font-size: 1.1rem;
- justify-content: center;
- }
-
- .nav-auth {
- position: fixed;
- bottom: var(--space-2xl);
- left: 50%;
- transform: translateX(-50%);
- z-index: var(--z-modal);
- opacity: 0;
- pointer-events: none;
- transition: var(--transition);
- }
-
- .nav-menu.active ~ .nav-auth,
- body.nav-open .nav-auth {
- opacity: 1;
- pointer-events: auto;
- }
-
- .nav-user-name,
- .btn-text {
- display: none;
- }
-}
-
-/* ===== Buttons ===== */
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--space-sm);
- padding: 0.75rem 1.5rem;
- font-family: 'Inter', sans-serif;
- font-weight: 600;
- font-size: 0.9rem;
- line-height: 1;
- border-radius: var(--radius-md);
- border: none;
- cursor: pointer;
- transition: var(--transition);
- text-decoration: none;
- white-space: nowrap;
-}
-
-.btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.btn-primary {
- background: var(--gradient-primary);
- color: var(--text-primary);
- box-shadow: 0 4px 15px var(--primary-glow);
-}
-
-.btn-primary:hover:not(:disabled) {
- transform: translateY(-2px);
- box-shadow: 0 8px 25px var(--primary-glow);
- color: var(--text-primary);
-}
-
-.btn-outline {
- background: transparent;
- border: 2px solid var(--border-light);
- color: var(--text-primary);
-}
-
-.btn-outline:hover:not(:disabled) {
- border-color: var(--primary-color);
- background: var(--primary-muted);
- color: var(--text-primary);
-}
-
-.btn-ghost {
- background: var(--bg-elevated);
- color: var(--text-secondary);
- border: 1px solid var(--border-color);
-}
-
-.btn-ghost:hover:not(:disabled) {
- background: var(--bg-card-hover);
- color: var(--text-primary);
- border-color: var(--border-light);
-}
-
-.btn-sm {
- padding: 0.5rem 1rem;
- font-size: 0.8rem;
-}
-
-.btn-lg {
- padding: 1rem 2rem;
- font-size: 1rem;
-}
-
-.btn-full {
- width: 100%;
-}
-
-/* ===== Forms ===== */
-.form-group {
- margin-bottom: var(--space-lg);
-}
-
-.form-row {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: var(--space-lg);
-}
-
-@media (max-width: 576px) {
- .form-row {
- grid-template-columns: 1fr;
- }
-}
-
-.form-label {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- font-size: 0.9rem;
- font-weight: 500;
- color: var(--text-secondary);
- margin-bottom: var(--space-sm);
-}
-
-.form-label i {
- color: var(--primary-color);
- font-size: 0.85rem;
-}
-
-.form-control {
- width: 100%;
- background: var(--bg-input);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- padding: 0.875rem 1rem;
- color: var(--text-primary);
- font-family: inherit;
- font-size: 1rem;
- transition: var(--transition);
-}
-
-.form-control:focus {
- outline: none;
- border-color: var(--primary-color);
- box-shadow: 0 0 0 3px var(--primary-muted);
-}
-
-.form-control::placeholder {
- color: var(--text-muted);
-}
-
-textarea.form-control {
- min-height: 120px;
- resize: vertical;
-}
-
-.form-hint {
- display: block;
- font-size: 0.8rem;
- color: var(--text-muted);
- margin-top: var(--space-xs);
-}
-
-.form-error {
- display: block;
- font-size: 0.8rem;
- color: var(--error-color);
- margin-top: var(--space-xs);
-}
-
-.form-checkbox {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
-}
-
-.form-checkbox input[type="checkbox"] {
- width: 18px;
- height: 18px;
- accent-color: var(--primary-color);
-}
-
-.form-checkbox label {
- font-size: 0.9rem;
- color: var(--text-secondary);
- cursor: pointer;
-}
-
-.captcha-group {
- display: flex;
- justify-content: center;
-}
-
-/* ===== Bento Grid Layout ===== */
-.bento-grid {
- display: grid;
- gap: var(--space-lg);
- padding: var(--space-lg) 0;
-}
-
-.bento-hero {
- grid-template-columns: repeat(12, 1fr);
- grid-auto-rows: minmax(100px, auto);
- padding-top: 100px;
- min-height: calc(100vh - 100px);
-}
-
-.bento-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-xl);
- transition: var(--transition);
- position: relative;
- overflow: hidden;
-}
-
-.bento-card::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 1px;
- background: linear-gradient(90deg, transparent, var(--primary-muted), transparent);
- opacity: 0;
- transition: var(--transition);
-}
-
-.bento-card:hover {
- border-color: var(--border-light);
- transform: translateY(-2px);
-}
-
-.bento-card:hover::before {
- opacity: 1;
-}
-
-.bento-card-title {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- font-size: 1rem;
- color: var(--text-muted);
- margin-bottom: var(--space-lg);
-}
-
-.bento-card-title i {
- color: var(--primary-color);
-}
-
-/* Profile Card */
-.bento-profile {
- grid-column: span 8;
- display: flex;
- align-items: center;
- gap: var(--space-2xl);
- background: var(--gradient-card);
- padding: var(--space-2xl);
-}
-
-.profile-photo {
- flex-shrink: 0;
-}
-
-.profile-photo img {
- width: 200px;
- height: 200px;
- border-radius: var(--radius-xl);
- object-fit: cover;
- border: 3px solid var(--border-color);
- transition: var(--transition);
-}
-
-.bento-profile:hover .profile-photo img {
- border-color: var(--primary-color);
- box-shadow: var(--shadow-glow);
-}
-
-.profile-info {
- flex: 1;
-}
-
-.profile-info h1 {
- margin-bottom: var(--space-sm);
- background: var(--gradient-text);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
-}
-
-.profile-title {
- font-size: 1.25rem;
- color: var(--primary-color);
- font-weight: 600;
- margin-bottom: var(--space-md);
- display: flex;
- align-items: center;
- gap: var(--space-sm);
-}
-
-.profile-title i {
- font-size: 1rem;
-}
-
-.profile-description {
- color: var(--text-secondary);
- font-size: 1rem;
- line-height: 1.8;
- margin-bottom: var(--space-lg);
- max-width: 550px;
-}
-
-.profile-buttons {
- display: flex;
- gap: var(--space-md);
- flex-wrap: wrap;
-}
-
-/* Quick Info Cards */
-.bento-quick {
- grid-column: span 4;
- display: flex;
- flex-direction: column;
- gap: var(--space-lg);
-}
-
-.quick-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-lg);
- padding: var(--space-lg);
- display: flex;
- align-items: center;
- gap: var(--space-md);
- transition: var(--transition);
- flex: 1;
-}
-
-.quick-card:hover {
- border-color: var(--primary-color);
- background: var(--bg-card-hover);
-}
-
-.quick-icon {
- width: 50px;
- height: 50px;
- background: var(--primary-muted);
- border-radius: var(--radius-md);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-color);
- font-size: 1.25rem;
- flex-shrink: 0;
-}
-
-.quick-content h4 {
- font-size: 0.8rem;
- color: var(--text-muted);
- font-weight: 500;
- margin-bottom: var(--space-xs);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.quick-content p {
- font-size: 1rem;
- color: var(--text-primary);
- font-weight: 600;
- margin: 0;
-}
-
-/* Social Links Card */
-.bento-socials {
- grid-column: span 4;
-}
-
-.socials-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: var(--space-md);
-}
-
-.social-link {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- padding: var(--space-md);
- background: var(--bg-elevated);
- border-radius: var(--radius-md);
- color: var(--text-secondary);
- transition: var(--transition);
- border: 1px solid transparent;
- text-decoration: none;
-}
-
-.social-link:hover {
- background: var(--primary-muted);
- color: var(--primary-color);
- border-color: var(--primary-color);
- transform: translateY(-2px);
-}
-
-.social-link i {
- font-size: 1.25rem;
-}
-
-.social-link span {
- font-weight: 500;
- font-size: 0.9rem;
-}
-
-/* Skills Card */
-.bento-skills {
- grid-column: span 8;
-}
-
-.skills-header {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- margin-bottom: var(--space-lg);
-}
-
-.skills-header h3 {
- margin: 0;
- font-size: 1.25rem;
-}
-
-.icon-box {
- width: 44px;
- height: 44px;
- background: var(--primary-muted);
- border-radius: var(--radius-md);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-color);
- font-size: 1.1rem;
-}
-
-.skills-categories {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
- gap: var(--space-lg);
-}
-
-.skill-category {
- background: var(--bg-elevated);
- padding: var(--space-md);
- border-radius: var(--radius-md);
- border: 1px solid var(--border-color);
-}
-
-.skill-category-title {
- font-size: 0.7rem;
- color: var(--primary-color);
- text-transform: uppercase;
- letter-spacing: 1px;
- margin-bottom: var(--space-md);
- font-weight: 600;
-}
-
-.skill-tags {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-sm);
-}
-
-.skill-tag {
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
- background: var(--bg-card);
- padding: 0.35rem 0.65rem;
- border-radius: var(--radius-sm);
- font-size: 0.8rem;
- color: var(--text-secondary);
- border: 1px solid var(--border-color);
- transition: var(--transition);
-}
-
-.skill-tag:hover {
- border-color: var(--primary-color);
- color: var(--text-primary);
-}
-
-.skill-tag i {
- font-size: 0.9rem;
- color: var(--primary-color);
-}
-
-/* ===== Sections ===== */
-.section {
- padding: var(--space-3xl) 0;
-}
-
-.section-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: var(--space-2xl);
- flex-wrap: wrap;
- gap: var(--space-md);
-}
-
-.section-title {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- margin: 0;
-}
-
-.section-icon {
- width: 48px;
- height: 48px;
- background: var(--primary-muted);
- border-radius: var(--radius-md);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-color);
- font-size: 1.25rem;
-}
-
-.section-subtitle {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- font-size: 1.25rem;
- color: var(--text-secondary);
- margin-bottom: var(--space-xl);
-}
-
-.section-subtitle i {
- color: var(--primary-color);
-}
-
-.count-badge {
- background: var(--primary-muted);
- color: var(--primary-color);
- padding: 0.2rem 0.6rem;
- border-radius: var(--radius-full);
- font-size: 0.8rem;
- font-weight: 600;
- margin-left: var(--space-sm);
-}
-
-.section-divider {
- height: 1px;
- background: linear-gradient(90deg, var(--primary-color), var(--border-color), transparent);
- margin: var(--space-2xl) 0;
-}
-
-/* ===== Page Header ===== */
-.page-header {
- text-align: center;
- padding: calc(100px + var(--space-2xl)) 0 var(--space-2xl);
-}
-
-.page-title {
- display: inline-flex;
- align-items: center;
- gap: var(--space-md);
- margin-bottom: var(--space-md);
-}
-
-.page-icon {
- width: 56px;
- height: 56px;
- background: var(--primary-muted);
- border-radius: var(--radius-lg);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-color);
- font-size: 1.5rem;
-}
-
-.page-subtitle {
- font-size: 1.1rem;
- color: var(--text-secondary);
- max-width: 600px;
- margin: 0 auto;
-}
-
-/* ===== Projects Grid ===== */
-.projects-bento {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- gap: var(--space-lg);
-}
-
-.project-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- overflow: hidden;
- transition: var(--transition);
- position: relative;
-}
-
-.project-card:hover {
- border-color: var(--primary-color);
- transform: translateY(-4px);
- box-shadow: var(--shadow-lg);
-}
-
-/* Featured Project */
-.project-card.featured {
- grid-column: span 8;
- display: grid;
- grid-template-columns: 1fr 1fr;
-}
-
-.project-card.featured .project-image {
- height: 100%;
- min-height: 320px;
-}
-
-/* Regular Project */
-.project-card.regular {
- grid-column: span 4;
-}
-
-/* Small Project */
-.project-card.small {
- grid-column: span 3;
-}
-
-.project-image {
- position: relative;
- height: 200px;
- overflow: hidden;
- background: var(--bg-elevated);
-}
-
-.project-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: var(--transition-slow);
-}
-
-.project-card:hover .project-image img {
- transform: scale(1.05);
-}
-
-.project-image-placeholder {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
-}
-
-.project-image-placeholder i {
- font-size: 3rem;
- color: var(--border-light);
-}
-
-.project-logo {
- position: absolute;
- top: var(--space-md);
- left: var(--space-md);
- width: 48px;
- height: 48px;
- background: var(--bg-dark);
- border-radius: var(--radius-md);
- display: flex;
- align-items: center;
- justify-content: center;
- border: 1px solid var(--border-color);
-}
-
-.project-logo i {
- font-size: 1.25rem;
- color: var(--primary-color);
-}
-
-.project-logo-small {
- width: 56px;
- height: 56px;
- background: var(--primary-muted);
- border-radius: var(--radius-lg);
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: var(--space-md);
-}
-
-.project-logo-small i {
- font-size: 1.5rem;
- color: var(--primary-color);
-}
-
-.project-status {
- position: absolute;
- top: var(--space-md);
- right: var(--space-md);
- padding: 0.3rem 0.7rem;
- border-radius: var(--radius-full);
- font-size: 0.7rem;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.project-status.completed {
- background: rgba(34, 197, 94, 0.2);
- color: var(--success-color);
-}
-
-.project-status.beta {
- background: var(--primary-muted);
- color: var(--primary-color);
-}
-
-.project-content {
- padding: var(--space-lg);
-}
-
-.project-card.small .project-content {
- text-align: center;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- min-height: 200px;
-}
-
-.project-title {
- font-size: 1.25rem;
- margin-bottom: var(--space-sm);
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- flex-wrap: wrap;
-}
-
-.project-card.small .project-title {
- font-size: 1rem;
- justify-content: center;
-}
-
-.project-users {
- font-size: 0.8rem;
- color: var(--primary-color);
- font-weight: 500;
- display: inline-flex;
- align-items: center;
- gap: 0.25rem;
-}
-
-.project-description {
- color: var(--text-secondary);
- font-size: 0.9rem;
- margin-bottom: var(--space-md);
- line-height: 1.6;
-}
-
-.project-features {
- list-style: none;
- margin: 0 0 var(--space-md) 0;
- padding: 0;
-}
-
-.project-features li {
- display: flex;
- align-items: flex-start;
- gap: var(--space-sm);
- font-size: 0.85rem;
- color: var(--text-secondary);
- margin-bottom: var(--space-sm);
-}
-
-.project-features li i {
- color: var(--primary-color);
- margin-top: 0.2em;
- flex-shrink: 0;
-}
-
-.project-tech {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-sm);
- margin-bottom: var(--space-md);
-}
-
-.project-card.small .project-tech {
- justify-content: center;
- margin-bottom: 0;
-}
-
-.tech-badge {
- display: inline-flex;
- align-items: center;
- gap: 0.35rem;
- background: var(--bg-elevated);
- padding: 0.3rem 0.6rem;
- border-radius: var(--radius-sm);
- font-size: 0.75rem;
- color: var(--text-secondary);
- border: 1px solid var(--border-color);
- transition: var(--transition);
-}
-
-.tech-badge:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.tech-badge i {
- color: var(--primary-color);
- font-size: 0.85rem;
-}
-
-.project-links {
- display: flex;
- gap: var(--space-sm);
- flex-wrap: wrap;
-}
-
-.project-link {
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
- color: var(--text-secondary);
- font-size: 0.85rem;
- padding: var(--space-sm) var(--space-md);
- background: var(--bg-elevated);
- border-radius: var(--radius-sm);
- transition: var(--transition);
- text-decoration: none;
-}
-
-.project-link:hover {
- color: var(--primary-color);
- background: var(--primary-muted);
-}
-
-/* GitHub CTA */
-.github-cta {
- grid-column: span 3;
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 200px;
-}
-
-.github-cta-content {
- text-align: center;
-}
-
-.github-cta-content i {
- font-size: 3rem;
- color: var(--text-muted);
- margin-bottom: var(--space-md);
-}
-
-.github-cta-content p {
- font-size: 0.9rem;
- color: var(--text-secondary);
- margin-bottom: var(--space-md);
-}
-
-.github-cta-section {
- margin-top: var(--space-2xl);
-}
-
-.github-cta-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-2xl);
- display: flex;
- align-items: center;
- gap: var(--space-xl);
- transition: var(--transition);
-}
-
-.github-cta-card:hover {
- border-color: var(--primary-color);
-}
-
-.github-cta-card > i {
- font-size: 3rem;
- color: var(--text-muted);
-}
-
-.github-cta-text {
- flex: 1;
-}
-
-.github-cta-text h3 {
- margin-bottom: var(--space-sm);
-}
-
-.github-cta-text p {
- margin: 0;
-}
-
-/* ===== Blog Grid ===== */
-.blog-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
- gap: var(--space-lg);
-}
-
-.article-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- overflow: hidden;
- transition: var(--transition);
- display: flex;
- flex-direction: column;
-}
-
-.article-card:hover {
- border-color: var(--primary-color);
- transform: translateY(-4px);
- box-shadow: var(--shadow-lg);
-}
-
-.article-image {
- height: 200px;
- overflow: hidden;
- background: var(--bg-elevated);
-}
-
-.article-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: var(--transition-slow);
-}
-
-.article-card:hover .article-image img {
- transform: scale(1.05);
-}
-
-.article-content {
- padding: var(--space-lg);
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-.article-meta {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- margin-bottom: var(--space-sm);
- flex-wrap: wrap;
-}
-
-.article-category {
- font-size: 0.75rem;
- color: var(--primary-color);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
-}
-
-.article-category:hover {
- color: var(--primary-light);
-}
-
-.article-date {
- font-size: 0.8rem;
- color: var(--text-muted);
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
-}
-
-.article-title {
- font-size: 1.25rem;
- margin-bottom: var(--space-sm);
- line-height: 1.4;
-}
-
-.article-title a {
- color: var(--text-primary);
- text-decoration: none;
-}
-
-.article-title a:hover {
- color: var(--primary-color);
-}
-
-.article-subtitle {
- font-size: 0.9rem;
- color: var(--text-muted);
- font-style: italic;
- margin-bottom: var(--space-sm);
-}
-
-.article-excerpt {
- color: var(--text-secondary);
- font-size: 0.9rem;
- line-height: 1.6;
- flex: 1;
- margin-bottom: var(--space-md);
-}
-
-.article-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-top: var(--space-md);
- border-top: 1px solid var(--border-color);
- margin-top: auto;
-}
-
-.article-stats {
- display: flex;
- gap: var(--space-md);
-}
-
-.article-stats span {
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-.article-read-more {
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
- font-size: 0.85rem;
- font-weight: 500;
- color: var(--primary-color);
- text-decoration: none;
-}
-
-.article-read-more:hover {
- color: var(--primary-light);
-}
-
-.article-read-more i {
- transition: var(--transition);
-}
-
-.article-read-more:hover i {
- transform: translateX(4px);
-}
-
-/* ===== Blog Filters ===== */
-.blog-filters {
- margin-bottom: var(--space-2xl);
-}
-
-.search-form {
- display: flex;
- gap: var(--space-md);
- margin-bottom: var(--space-lg);
-}
-
-.search-input-wrapper {
- flex: 1;
- position: relative;
-}
-
-.search-input-wrapper i {
- position: absolute;
- left: var(--space-md);
- top: 50%;
- transform: translateY(-50%);
- color: var(--text-muted);
-}
-
-.search-input {
- width: 100%;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- padding: var(--space-md) var(--space-md) var(--space-md) 2.5rem;
- color: var(--text-primary);
- font-size: 1rem;
- transition: var(--transition);
-}
-
-.search-input:focus {
- outline: none;
- border-color: var(--primary-color);
- box-shadow: 0 0 0 3px var(--primary-muted);
-}
-
-.search-clear {
- position: absolute;
- right: var(--space-md);
- top: 50%;
- transform: translateY(-50%);
- color: var(--text-muted);
- cursor: pointer;
-}
-
-.search-clear:hover {
- color: var(--primary-color);
-}
-
-.categories-list {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-sm);
-}
-
-.category-chip {
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
- padding: var(--space-sm) var(--space-md);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-full);
- color: var(--text-secondary);
- font-size: 0.85rem;
- font-weight: 500;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.category-chip:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.category-chip.active {
- background: var(--primary-muted);
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.category-chip i {
- font-size: 0.8rem;
-}
-
-.category-count {
- background: var(--bg-elevated);
- padding: 0.1rem 0.4rem;
- border-radius: var(--radius-full);
- font-size: 0.75rem;
-}
-
-.category-chip.active .category-count {
- background: var(--primary-color);
- color: var(--text-primary);
-}
-
-.search-results-info {
- padding: var(--space-md);
- background: var(--bg-card);
- border-radius: var(--radius-md);
- margin-bottom: var(--space-lg);
-}
-
-.search-results-info p {
- margin: 0;
-}
-
-.results-count {
- color: var(--text-muted);
-}
-
-/* ===== Filters Section ===== */
-.filters-section {
- margin-bottom: var(--space-2xl);
-}
-
-.filters-wrapper {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-xl);
- align-items: center;
-}
-
-.filter-group {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.filter-label {
- font-size: 0.9rem;
- color: var(--text-muted);
- font-weight: 500;
-}
-
-.filter-buttons {
- display: flex;
- gap: var(--space-sm);
-}
-
-.filter-btn {
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
- padding: var(--space-sm) var(--space-md);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-secondary);
- font-size: 0.85rem;
- font-weight: 500;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.filter-btn:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.filter-btn.active {
- background: var(--primary-muted);
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.filter-select {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- padding: var(--space-sm) var(--space-md);
- color: var(--text-primary);
- font-size: 0.85rem;
- cursor: pointer;
- min-width: 180px;
-}
-
-.filter-select:focus {
- outline: none;
- border-color: var(--primary-color);
-}
-
-/* ===== Article Full (Detail Page) ===== */
-.article-full {
- max-width: 900px;
- margin: 0 auto;
- padding-top: 100px;
-}
-
-.breadcrumb {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- gap: var(--space-sm);
- margin-bottom: var(--space-xl);
- font-size: 0.85rem;
-}
-
-.breadcrumb a {
- color: var(--text-muted);
- text-decoration: none;
-}
-
-.breadcrumb a:hover {
- color: var(--primary-color);
-}
-
-.breadcrumb-separator {
- color: var(--text-muted);
- font-size: 0.7rem;
-}
-
-.breadcrumb-current {
- color: var(--text-secondary);
-}
-
-.article-header {
- margin-bottom: var(--space-2xl);
-}
-
-.article-category-badge {
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
- padding: var(--space-sm) var(--space-md);
- background: var(--primary-muted);
- border-radius: var(--radius-full);
- color: var(--primary-color);
- font-size: 0.8rem;
- font-weight: 600;
- text-decoration: none;
- margin-bottom: var(--space-lg);
-}
-
-.article-full-title {
- font-size: clamp(2rem, 5vw, 3rem);
- margin-bottom: var(--space-md);
- line-height: 1.2;
-}
-
-.article-full-subtitle {
- font-size: 1.25rem;
- color: var(--text-secondary);
- margin-bottom: var(--space-lg);
-}
-
-.article-meta-full {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: var(--space-lg);
- padding: var(--space-lg);
- background: var(--bg-card);
- border-radius: var(--radius-lg);
-}
-
-.article-author {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.author-avatar {
- width: 48px;
- height: 48px;
- background: var(--primary-muted);
- color: var(--primary-color);
- border-radius: var(--radius-full);
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 600;
- font-size: 1.1rem;
-}
-
-.author-name {
- font-weight: 600;
- color: var(--text-primary);
-}
-
-.article-meta-items {
- display: flex;
- gap: var(--space-lg);
- flex-wrap: wrap;
-}
-
-.meta-item {
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
- font-size: 0.9rem;
- color: var(--text-muted);
-}
-
-.article-featured-image {
- margin-bottom: var(--space-2xl);
- border-radius: var(--radius-xl);
- overflow: hidden;
-}
-
-.article-featured-image img {
- width: 100%;
- height: auto;
- display: block;
-}
-
-.article-body {
- font-size: 1.1rem;
- line-height: 1.8;
- color: var(--text-secondary);
-}
-
-.article-body p {
- margin-bottom: var(--space-lg);
-}
-
-.article-body h2,
-.article-body h3,
-.article-body h4 {
- color: var(--text-primary);
- margin-top: var(--space-2xl);
- margin-bottom: var(--space-md);
-}
-
-.article-body ul,
-.article-body ol {
- margin-bottom: var(--space-lg);
- padding-left: var(--space-xl);
-}
-
-.article-body li {
- margin-bottom: var(--space-sm);
-}
-
-.article-body img {
- max-width: 100%;
- height: auto;
- border-radius: var(--radius-md);
- margin: var(--space-lg) 0;
-}
-
-.article-body blockquote {
- border-left: 4px solid var(--primary-color);
- padding-left: var(--space-lg);
- margin: var(--space-lg) 0;
- font-style: italic;
- color: var(--text-muted);
-}
-
-.article-footer-full {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: var(--space-lg);
- padding: var(--space-xl) 0;
- border-top: 1px solid var(--border-color);
- border-bottom: 1px solid var(--border-color);
- margin: var(--space-2xl) 0;
-}
-
-.article-reactions {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.reactions-label,
-.share-label {
- font-size: 0.9rem;
- color: var(--text-muted);
-}
-
-.reactions-buttons {
- display: flex;
- gap: var(--space-sm);
-}
-
-.vote-btn {
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
- padding: var(--space-sm) var(--space-md);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-muted);
- font-size: 0.9rem;
- cursor: pointer;
- transition: var(--transition);
-}
-
-.vote-btn:hover:not(:disabled) {
- border-color: var(--border-light);
- color: var(--text-secondary);
-}
-
-.vote-btn.active.like {
- background: rgba(34, 197, 94, 0.1);
- border-color: var(--success-color);
- color: var(--success-color);
-}
-
-.vote-btn.active.dislike {
- background: rgba(239, 68, 68, 0.1);
- border-color: var(--error-color);
- color: var(--error-color);
-}
-
-.vote-btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.article-share {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.share-buttons {
- display: flex;
- gap: var(--space-sm);
-}
-
-.share-btn {
- width: 40px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-muted);
- font-size: 1rem;
- cursor: pointer;
- transition: var(--transition);
- text-decoration: none;
-}
-
-.share-btn:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.share-btn.telegram:hover {
- border-color: #0088cc;
- color: #0088cc;
-}
-
-.share-btn.vk:hover {
- border-color: #4a76a8;
- color: #4a76a8;
-}
-
-.share-btn.twitter:hover {
- border-color: #1da1f2;
- color: #1da1f2;
-}
-
-/* Related Articles */
-.related-articles {
- margin-bottom: var(--space-2xl);
-}
-
-.related-articles h3 {
- margin-bottom: var(--space-lg);
-}
-
-.related-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: var(--space-md);
-}
-
-.related-card {
- display: flex;
- gap: var(--space-md);
- padding: var(--space-md);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-lg);
- text-decoration: none;
- transition: var(--transition);
-}
-
-.related-card:hover {
- border-color: var(--primary-color);
- transform: translateY(-2px);
-}
-
-.related-image {
- width: 80px;
- height: 80px;
- border-radius: var(--radius-md);
- object-fit: cover;
- flex-shrink: 0;
-}
-
-.related-content h4 {
- font-size: 0.95rem;
- margin-bottom: var(--space-xs);
- color: var(--text-primary);
- line-height: 1.4;
-}
-
-.related-date {
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-/* ===== Comments ===== */
-.comments-section {
- margin-top: var(--space-2xl);
-}
-
-.comments-title {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- margin-bottom: var(--space-xl);
-}
-
-.comments-count {
- font-weight: 400;
- color: var(--text-muted);
-}
-
-.comment-form {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-lg);
- margin-bottom: var(--space-xl);
-}
-
-.comment-form-header {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- margin-bottom: var(--space-md);
-}
-
-.comment-avatar {
- width: 40px;
- height: 40px;
- background: var(--primary-muted);
- color: var(--primary-color);
- border-radius: var(--radius-full);
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 600;
- font-size: 0.9rem;
- flex-shrink: 0;
-}
-
-.comment-author-name {
- font-weight: 600;
- color: var(--text-primary);
-}
-
-.comment-form-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: var(--space-md);
- flex-wrap: wrap;
- gap: var(--space-md);
-}
-
-.comment-hint {
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-.comment-auth-prompt {
- padding: var(--space-xl);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- text-align: center;
- margin-bottom: var(--space-xl);
-}
-
-.comment-auth-prompt p {
- margin: 0;
-}
-
-.comments-list {
- display: flex;
- flex-direction: column;
- gap: var(--space-md);
-}
-
-.comment {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-lg);
-}
-
-.comment-reply {
- border-left: 3px solid var(--primary-muted);
-}
-
-.comment-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: var(--space-md);
-}
-
-.comment-author {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.comment-author-info {
- display: flex;
- flex-direction: column;
-}
-
-.comment-name {
- font-weight: 600;
- color: var(--text-primary);
- font-size: 0.95rem;
-}
-
-.comment-date {
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-.comment-content {
- color: var(--text-secondary);
- line-height: 1.7;
- margin-bottom: var(--space-md);
-}
-
-.comment-content p:last-child {
- margin-bottom: 0;
-}
-
-.comment-actions {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.reply-btn {
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
- background: none;
- border: none;
- color: var(--text-muted);
- font-size: 0.85rem;
- cursor: pointer;
- transition: var(--transition);
- padding: 0;
-}
-
-.reply-btn:hover {
- color: var(--primary-color);
-}
-
-.reply-form-container {
- margin-top: var(--space-md);
- padding-top: var(--space-md);
- border-top: 1px solid var(--border-color);
-}
-
-.reply-form {
- padding: var(--space-md);
-}
-
-.comment-replies {
- margin-top: var(--space-md);
- display: flex;
- flex-direction: column;
- gap: var(--space-md);
-}
-
-.comments-empty {
- text-align: center;
- padding: var(--space-2xl);
- color: var(--text-muted);
-}
-
-.comments-empty i {
- font-size: 3rem;
- margin-bottom: var(--space-md);
- opacity: 0.5;
-}
-
-/* ===== Achievements ===== */
-.achievements-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
- gap: var(--space-lg);
-}
-
-.achievement-card {
- display: flex;
- align-items: flex-start;
- gap: var(--space-lg);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-xl);
- text-decoration: none;
- transition: var(--transition);
- position: relative;
-}
-
-.achievement-card:hover {
- border-color: var(--primary-color);
- transform: translateY(-4px);
- box-shadow: var(--shadow-lg);
-}
-
-.achievement-icon {
- width: 64px;
- height: 64px;
- background: var(--primary-muted);
- border-radius: var(--radius-lg);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.75rem;
- color: var(--primary-color);
- flex-shrink: 0;
-}
-
-.achievement-content {
- flex: 1;
-}
-
-.achievement-title {
- font-size: 1.1rem;
- color: var(--text-primary);
- margin-bottom: var(--space-sm);
- line-height: 1.4;
-}
-
-.achievement-subtitle {
- font-size: 0.9rem;
- color: var(--primary-color);
- font-weight: 500;
- margin-bottom: var(--space-sm);
-}
-
-.achievement-excerpt {
- font-size: 0.9rem;
- color: var(--text-secondary);
- margin-bottom: var(--space-md);
- line-height: 1.6;
-}
-
-.achievement-date {
- display: inline-flex;
- align-items: center;
- gap: var(--space-xs);
- font-size: 0.8rem;
- color: var(--text-muted);
-}
-
-.achievement-arrow {
- position: absolute;
- right: var(--space-xl);
- top: 50%;
- transform: translateY(-50%);
- color: var(--text-muted);
- transition: var(--transition);
-}
-
-.achievement-card:hover .achievement-arrow {
- color: var(--primary-color);
- transform: translateY(-50%) translateX(4px);
-}
-
-/* ===== Contacts ===== */
-.contact-bento {
- display: grid;
- grid-template-columns: 7fr 5fr;
- gap: var(--space-lg);
- padding-bottom: var(--space-2xl);
-}
-
-.contact-form-card {
- padding: var(--space-2xl);
-}
-
-.contact-form .form-control {
- background: var(--bg-elevated);
-}
-
-.contact-info-card {
- padding: var(--space-2xl);
-}
-
-.contact-methods {
- margin-bottom: var(--space-xl);
-}
-
-.contact-method {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: var(--space-md);
- background: var(--bg-elevated);
- border-radius: var(--radius-md);
- margin-bottom: var(--space-md);
- transition: var(--transition);
- border: 1px solid transparent;
-}
-
-.contact-method:hover {
- border-color: var(--primary-color);
-}
-
-.contact-method-icon {
- width: 48px;
- height: 48px;
- background: var(--primary-muted);
- border-radius: var(--radius-md);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-color);
- font-size: 1.25rem;
- flex-shrink: 0;
-}
-
-.contact-method-icon.telegram {
- background: rgba(0, 136, 204, 0.15);
- color: #0088cc;
-}
-
-.contact-method-info {
- flex: 1;
-}
-
-.contact-method-info h4 {
- font-size: 0.8rem;
- color: var(--text-muted);
- font-weight: 500;
- margin-bottom: var(--space-xs);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.contact-method-info p,
-.contact-method-info a {
- color: var(--text-primary);
- font-weight: 500;
- margin: 0;
-}
-
-.contact-method-info a {
- text-decoration: none;
-}
-
-.contact-method-info a:hover {
- color: var(--primary-color);
-}
-
-.contact-copy-btn {
- width: 36px;
- height: 36px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-sm);
- color: var(--text-muted);
- cursor: pointer;
- transition: var(--transition);
-}
-
-.contact-copy-btn:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.contact-copy-btn.copied {
- background: var(--primary-muted);
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.contact-social {
- margin-bottom: var(--space-xl);
-}
-
-.contact-social h4,
-.contact-resume h4 {
- font-size: 0.9rem;
- margin-bottom: var(--space-md);
-}
-
-.contact-social-links {
- display: flex;
- gap: var(--space-sm);
-}
-
-.contact-social-link {
- width: 48px;
- height: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-elevated);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-secondary);
- font-size: 1.25rem;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.contact-social-link:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
- transform: translateY(-2px);
-}
-
-.contact-social-link.telegram:hover {
- border-color: #0088cc;
- color: #0088cc;
-}
-
-.contact-social-link.github:hover {
- border-color: #fff;
- color: #fff;
-}
-
-.contact-social-link.vk:hover {
- border-color: #4a76a8;
- color: #4a76a8;
-}
-
-.contact-social-link.linkedin:hover {
- border-color: #0077b5;
- color: #0077b5;
-}
-
-.contact-resume p {
- font-size: 0.9rem;
- margin-bottom: var(--space-md);
-}
-
-/* ===== About Page ===== */
-.about-bento {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- gap: var(--space-lg);
- padding-bottom: var(--space-2xl);
-}
-
-.about-bio {
- grid-column: span 8;
-}
-
-.about-stats {
- grid-column: span 4;
-}
-
-.about-bio-header {
- display: flex;
- align-items: center;
- gap: var(--space-xl);
- margin-bottom: var(--space-xl);
-}
-
-.about-photo img {
- width: 150px;
- height: 150px;
- border-radius: var(--radius-xl);
- object-fit: cover;
- border: 3px solid var(--border-color);
-}
-
-.about-bio-info h2 {
- margin-bottom: var(--space-xs);
-}
-
-.about-title {
- color: var(--primary-color);
- font-weight: 600;
- margin-bottom: var(--space-sm);
-}
-
-.about-location {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- color: var(--text-muted);
- font-size: 0.9rem;
-}
-
-.about-bio-text {
- margin-bottom: var(--space-xl);
- color: var(--text-secondary);
- line-height: 1.8;
-}
-
-.about-bio-actions {
- display: flex;
- gap: var(--space-md);
- flex-wrap: wrap;
-}
-
-.stats-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: var(--space-md);
-}
-
-.stat-item {
- text-align: center;
- padding: var(--space-lg);
- background: var(--bg-elevated);
- border-radius: var(--radius-md);
-}
-
-.stat-value {
- display: block;
- font-size: 2rem;
- font-weight: 700;
- color: var(--primary-color);
- font-family: 'Raleway', sans-serif;
-}
-
-.stat-label {
- display: block;
- font-size: 0.8rem;
- color: var(--text-muted);
- margin-top: var(--space-xs);
-}
-
-/* Timeline */
-.timeline-card {
- grid-column: span 6;
-}
-
-.timeline {
- position: relative;
- padding-left: var(--space-xl);
-}
-
-.timeline::before {
- content: '';
- position: absolute;
- left: 5px;
- top: 0;
- bottom: 0;
- width: 2px;
- background: var(--border-color);
-}
-
-.timeline-item {
- position: relative;
- padding-bottom: var(--space-xl);
-}
-
-.timeline-item:last-child {
- padding-bottom: 0;
-}
-
-.timeline-marker {
- position: absolute;
- left: calc(-1 * var(--space-xl) + 1px);
- top: 0;
- width: 12px;
- height: 12px;
- background: var(--primary-color);
- border-radius: var(--radius-full);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.timeline-marker i {
- font-size: 0.5rem;
- color: var(--text-primary);
-}
-
-.timeline-content {
- background: var(--bg-elevated);
- padding: var(--space-lg);
- border-radius: var(--radius-md);
- border: 1px solid var(--border-color);
-}
-
-.timeline-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: var(--space-sm);
- margin-bottom: var(--space-sm);
-}
-
-.timeline-date {
- font-size: 0.8rem;
- color: var(--primary-color);
- font-weight: 600;
-}
-
-.timeline-duration {
- font-size: 0.75rem;
- color: var(--text-muted);
- background: var(--bg-card);
- padding: 0.2rem 0.5rem;
- border-radius: var(--radius-sm);
-}
-
-.timeline-title {
- font-size: 1.1rem;
- margin-bottom: var(--space-xs);
-}
-
-.timeline-subtitle {
- font-size: 0.9rem;
- color: var(--text-muted);
- margin-bottom: var(--space-md);
-}
-
-.timeline-description {
- color: var(--text-secondary);
- font-size: 0.9rem;
- margin-bottom: var(--space-md);
- line-height: 1.6;
-}
-
-.timeline-list {
- list-style: none;
- margin: 0 0 var(--space-md) 0;
- padding: 0;
-}
-
-.timeline-list li {
- display: flex;
- align-items: flex-start;
- gap: var(--space-sm);
- font-size: 0.85rem;
- color: var(--text-secondary);
- margin-bottom: var(--space-sm);
-}
-
-.timeline-list li i {
- color: var(--primary-color);
- margin-top: 0.2em;
- flex-shrink: 0;
- font-size: 0.7rem;
-}
-
-.timeline-tech {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-sm);
-}
-
-.timeline-certificate {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- font-size: 0.8rem;
- color: var(--text-muted);
- margin-top: var(--space-md);
- padding-top: var(--space-md);
- border-top: 1px solid var(--border-color);
-}
-
-.timeline-certificate i {
- color: var(--warning-color);
-}
-
-.education-type {
- font-size: 0.7rem;
- padding: 0.2rem 0.5rem;
- border-radius: var(--radius-sm);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- font-weight: 600;
-}
-
-.education-type-university {
- background: rgba(59, 130, 246, 0.15);
- color: var(--info-color);
-}
-
-.education-type-course {
- background: rgba(34, 197, 94, 0.15);
- color: var(--success-color);
-}
-
-/* Skills Full */
-.skills-full {
- grid-column: span 12;
-}
-
-.skills-full-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: var(--space-lg);
-}
-
-.skill-category-card {
- background: var(--bg-elevated);
- padding: var(--space-lg);
- border-radius: var(--radius-md);
- border: 1px solid var(--border-color);
-}
-
-.skill-category-card .skill-category-title {
- margin-bottom: var(--space-md);
-}
-
-/* Soft Skills & Interests */
-.soft-skills-list,
-.interests-list {
- display: flex;
- flex-direction: column;
- gap: var(--space-sm);
-}
-
-.soft-skill-item,
-.interest-item {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: var(--space-sm);
- background: var(--bg-elevated);
- border-radius: var(--radius-sm);
-}
-
-.soft-skill-item i,
-.interest-item i {
- width: 32px;
- height: 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--primary-muted);
- color: var(--primary-color);
- border-radius: var(--radius-sm);
- font-size: 0.9rem;
- flex-shrink: 0;
-}
-
-.soft-skill-item span,
-.interest-item span {
- font-size: 0.9rem;
- color: var(--text-secondary);
-}
-
-/* Languages */
-.languages-card {
- grid-column: span 4;
-}
-
-.languages-list {
- display: flex;
- flex-direction: column;
- gap: var(--space-md);
-}
-
-.language-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: var(--space-md);
- background: var(--bg-elevated);
- border-radius: var(--radius-md);
-}
-
-.language-name {
- font-weight: 600;
- color: var(--text-primary);
-}
-
-.language-level {
- font-size: 0.85rem;
- color: var(--text-muted);
-}
-
-/* ===== Auth Pages ===== */
-.auth-container {
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--space-xl);
- padding-top: 100px;
-}
-
-.auth-card {
- width: 100%;
- max-width: 440px;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-2xl);
-}
-
-.auth-header {
- text-align: center;
- margin-bottom: var(--space-xl);
-}
-
-.auth-header .logo {
- margin-bottom: var(--space-lg);
- justify-content: center;
-}
-
-.auth-title {
- font-size: 1.5rem;
- margin-bottom: var(--space-sm);
-}
-
-.auth-subtitle {
- color: var(--text-muted);
- font-size: 0.9rem;
- margin: 0;
-}
-
-.auth-error {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- padding: var(--space-md);
- background: rgba(239, 68, 68, 0.1);
- border: 1px solid var(--error-color);
- border-radius: var(--radius-md);
- color: var(--error-color);
- font-size: 0.9rem;
- margin-bottom: var(--space-lg);
-}
-
-.auth-footer {
- text-align: center;
- margin-top: var(--space-xl);
- padding-top: var(--space-xl);
- border-top: 1px solid var(--border-color);
-}
-
-.auth-footer p {
- margin: 0;
- color: var(--text-muted);
-}
-
-/* ===== Minimal Footer (Корректировка 2) ===== */
-.footer-minimal {
- background: var(--bg-darker);
- border-top: 1px solid var(--border-color);
- padding: var(--space-xl) 0;
- margin-top: var(--space-3xl);
-}
-
-.footer-minimal-content {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: var(--space-lg);
-}
-
-.footer-logo {
- display: inline-flex;
- align-items: center;
- font-family: 'Raleway', sans-serif;
- font-weight: 700;
- font-size: 1.25rem;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.footer-logo .logo-deev,
-.footer-logo .logo-space {
- color: var(--text-primary);
-}
-
-.footer-logo .logo-dot {
- width: 6px;
- height: 6px;
- background-color: var(--primary-color);
- border-radius: 50%;
- margin: 0 2px;
- display: inline-block;
- transition: var(--transition);
-}
-
-.footer-logo:hover .logo-dot {
- transform: scale(1.4);
- box-shadow: 0 0 10px var(--primary-color);
-}
-
-.footer-social-icons {
- display: flex;
- align-items: center;
- gap: var(--space-md);
-}
-
-.footer-social-icons a {
- color: var(--text-secondary);
- font-size: 1.125rem;
- transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
- text-decoration: none;
-}
-
-.footer-social-icons a:hover {
- color: var(--primary-color);
- transform: translateY(-2px);
- text-shadow: 0 0 12px var(--primary-color);
-}
-
-.footer-copyright-minimal {
- color: var(--text-muted);
- font-size: 0.85rem;
- margin: 0;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
- .footer-minimal-content {
- flex-direction: column;
- text-align: center;
- gap: var(--space-md);
- }
-}
-
-/* ===== Projects Section Spacing (Корректировка 3) ===== */
-.projects-section {
- margin-bottom: var(--space-2xl);
-}
-
-.projects-section + .projects-section {
- margin-top: var(--space-3xl);
- padding-top: var(--space-2xl);
- border-top: 1px solid var(--border-color);
-}
-
-.section-subtitle {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- font-size: 1.25rem;
- color: var(--text-primary);
- margin-bottom: var(--space-xl);
-}
-
-.section-subtitle i {
- color: var(--primary-color);
-}
-
-.count-badge {
- background: var(--primary-muted);
- color: var(--primary-color);
- font-size: 0.75rem;
- font-weight: 600;
- padding: 0.25rem 0.5rem;
- border-radius: var(--radius-full);
- margin-left: var(--space-sm);
-}
-
-/* Плавная анимация при фильтрации */
-.project-card {
- transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.project-card.hidden {
- opacity: 0;
- transform: scale(0.95);
- pointer-events: none;
- position: absolute;
-}
-
-/* Активный фильтр */
-.filter-btn.active {
- background: var(--primary-color);
- color: var(--text-primary);
- border-color: var(--primary-color);
-}
-
-/* ===== SmartCaptcha Styles (Корректировка 4) ===== */
-.smart-captcha-wrapper {
- display: flex;
- justify-content: center;
- margin: var(--space-md) 0;
-}
-
-.smart-captcha {
- border-radius: var(--radius-md);
- overflow: hidden;
-}
-
-.smart-captcha iframe {
- border-radius: var(--radius-md) !important;
-}
-
-/* ===== Social Icons Inline (Корректировка 5) ===== */
-.social-icons-inline {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- margin-top: var(--space-xs);
-}
-
-.social-icon-link {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: var(--text-secondary);
- font-size: 1.25rem;
- transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
- text-decoration: none;
-}
-
-.social-icon-link:hover {
- color: var(--primary-color);
- transform: scale(1.15);
- text-shadow: 0 0 15px var(--primary-color);
-}
-
-/* Специфичные цвета при наведении */
-.social-icon-link:hover .fa-telegram {
- color: #0088cc;
- text-shadow: 0 0 15px rgba(0, 136, 204, 0.6);
-}
-
-.social-icon-link:hover .fa-github {
- color: #fff;
- text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
-}
-
-.social-icon-link:hover .fa-vk {
- color: #4a76a8;
- text-shadow: 0 0 15px rgba(74, 118, 168, 0.6);
-}
-
-.social-icon-link:hover .fa-linkedin {
- color: #0077b5;
- text-shadow: 0 0 15px rgba(0, 119, 181, 0.6);
-}
-
-/* ===== Error Pages ===== */
-.error-container {
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--space-xl);
-}
-
-.error-card {
- text-align: center;
- max-width: 500px;
-}
-
-.error-code {
- font-size: 8rem;
- font-weight: 800;
- font-family: 'Raleway', sans-serif;
- background: var(--gradient-primary);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- line-height: 1;
- margin-bottom: var(--space-lg);
-}
-
-.error-title {
- font-size: 1.75rem;
- margin-bottom: var(--space-md);
-}
-
-.error-description {
- color: var(--text-secondary);
- margin-bottom: var(--space-xl);
-}
-
-.error-actions {
- display: flex;
- gap: var(--space-md);
- justify-content: center;
- flex-wrap: wrap;
-}
-
-/* ===== Empty State ===== */
-.empty-state {
- text-align: center;
- padding: var(--space-3xl);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
-}
-
-.empty-state i {
- font-size: 4rem;
- color: var(--text-muted);
- opacity: 0.5;
- margin-bottom: var(--space-lg);
-}
-
-.empty-state h3 {
- margin-bottom: var(--space-sm);
-}
-
-.empty-state p {
- margin-bottom: var(--space-lg);
-}
-
-/* ===== CTA Section ===== */
-.cta-section {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
- padding: var(--space-3xl);
- margin: var(--space-3xl) 0;
- position: relative;
- overflow: hidden;
-}
-
-.cta-section::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: var(--gradient-glow);
- pointer-events: none;
-}
-
-.cta-content {
- position: relative;
- text-align: center;
- max-width: 600px;
- margin: 0 auto;
-}
-
-.cta-icon {
- width: 80px;
- height: 80px;
- background: var(--primary-muted);
- border-radius: var(--radius-xl);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 2rem;
- color: var(--primary-color);
- margin: 0 auto var(--space-xl);
-}
-
-.cta-content h2 {
- margin-bottom: var(--space-md);
-}
-
-.cta-content p {
- margin-bottom: var(--space-xl);
-}
-
-.cta-buttons {
- display: flex;
- gap: var(--space-md);
- justify-content: center;
- flex-wrap: wrap;
-}
-
-/* ===== Pagination ===== */
-.pagination-wrapper {
- margin-top: var(--space-2xl);
-}
-
-.pagination {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--space-sm);
-}
-
-.pagination-btn,
-.pagination-num {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 40px;
- height: 40px;
- padding: 0 var(--space-sm);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-secondary);
- font-size: 0.9rem;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.pagination-btn:hover,
-.pagination-num:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.pagination-num.active {
- background: var(--primary-muted);
- border-color: var(--primary-color);
- color: var(--primary-color);
- font-weight: 600;
-}
-
-.pagination-dots {
- color: var(--text-muted);
-}
-
-.pagination-numbers {
- display: flex;
- gap: var(--space-sm);
-}
-
-/* ===== Messages / Notifications ===== */
-.messages-container {
- position: fixed;
- top: 100px;
- right: var(--space-lg);
- z-index: var(--z-tooltip);
- display: flex;
- flex-direction: column;
- gap: var(--space-sm);
- max-width: 400px;
-}
-
-.message {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: var(--space-md) var(--space-lg);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- box-shadow: var(--shadow-lg);
- animation: slideIn 0.3s ease;
-}
-
-.message.hiding {
- animation: slideOut 0.3s ease forwards;
-}
-
-@keyframes slideIn {
- from {
- opacity: 0;
- transform: translateX(100%);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
-@keyframes slideOut {
- from {
- opacity: 1;
- transform: translateX(0);
- }
- to {
- opacity: 0;
- transform: translateX(100%);
- }
-}
-
-.message i {
- font-size: 1.25rem;
- flex-shrink: 0;
-}
-
-.message span {
- flex: 1;
- font-size: 0.9rem;
-}
-
-.message-close {
- background: none;
- border: none;
- color: var(--text-muted);
- font-size: 1.25rem;
- cursor: pointer;
- padding: 0;
- line-height: 1;
-}
-
-.message-close:hover {
- color: var(--text-primary);
-}
-
-.message-success {
- border-color: var(--success-color);
-}
-
-.message-success i {
- color: var(--success-color);
-}
-
-.message-error {
- border-color: var(--error-color);
-}
-
-.message-error i {
- color: var(--error-color);
-}
-
-.message-warning {
- border-color: var(--warning-color);
-}
-
-.message-warning i {
- color: var(--warning-color);
-}
-
-.message-info {
- border-color: var(--info-color);
-}
-
-.message-info i {
- color: var(--info-color);
-}
-
-/* ===== Back to Top ===== */
-.back-to-top {
- position: fixed;
- bottom: var(--space-xl);
- right: var(--space-xl);
- width: 48px;
- height: 48px;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- color: var(--text-secondary);
- font-size: 1rem;
- cursor: pointer;
- opacity: 0;
- visibility: hidden;
- transition: var(--transition);
- z-index: var(--z-sticky);
-}
-
-.back-to-top.visible {
- opacity: 1;
- visibility: visible;
-}
-
-.back-to-top:hover {
- border-color: var(--primary-color);
- color: var(--primary-color);
- transform: translateY(-4px);
-}
-
-/* ===== Footer ===== */
-.footer {
- background: var(--bg-darker);
- padding: var(--space-3xl) 0 var(--space-xl);
- border-top: 1px solid var(--border-color);
- margin-top: var(--space-3xl);
-}
-
-.footer-grid {
- display: grid;
- grid-template-columns: 2fr 1fr 1fr 1fr;
- gap: var(--space-2xl);
- margin-bottom: var(--space-2xl);
-}
-
-.footer-brand p {
- color: var(--text-secondary);
- margin-top: var(--space-md);
- font-size: 0.9rem;
- line-height: 1.6;
- max-width: 300px;
-}
-
-.footer h4 {
- font-size: 1rem;
- margin-bottom: var(--space-lg);
- color: var(--text-primary);
-}
-
-.footer-links {
- list-style: none;
-}
-
-.footer-links li {
- margin-bottom: var(--space-sm);
-}
-
-.footer-links a,
-.footer-links span {
- color: var(--text-secondary);
- font-size: 0.9rem;
- transition: var(--transition);
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- gap: var(--space-sm);
-}
-
-.footer-links a:hover {
- color: var(--primary-color);
-}
-
-.footer-links i {
- font-size: 0.85rem;
- color: var(--primary-color);
-}
-
-.footer-socials {
- display: flex;
- gap: var(--space-sm);
-}
-
-.footer-social-link {
- width: 40px;
- height: 40px;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-sm);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--text-secondary);
- font-size: 1rem;
- transition: var(--transition);
- text-decoration: none;
-}
-
-.footer-social-link:hover {
- background: var(--primary-muted);
- border-color: var(--primary-color);
- color: var(--primary-color);
-}
-
-.footer-bottom {
- padding-top: var(--space-xl);
- border-top: 1px solid var(--border-color);
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: var(--space-md);
-}
-
-.footer-copyright,
-.footer-made {
- color: var(--text-muted);
- font-size: 0.85rem;
- margin: 0;
-}
-
-/* ===== Responsive ===== */
-@media (max-width: 1200px) {
- .bento-profile {
- grid-column: span 12;
- }
-
- .bento-quick {
- grid-column: span 12;
- flex-direction: row;
- }
-
- .bento-socials {
- grid-column: span 6;
- }
-
- .bento-skills {
- grid-column: span 6;
- }
-
- .project-card.featured {
- grid-column: span 12;
- }
-
- .project-card.regular {
- grid-column: span 6;
- }
-
- .project-card.small {
- grid-column: span 4;
- }
-
- .about-bio {
- grid-column: span 12;
- }
-
- .about-stats {
- grid-column: span 12;
- }
-
- .timeline-card {
- grid-column: span 12;
- }
-
- .languages-card {
- grid-column: span 6;
- }
-
- .footer-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media (max-width: 992px) {
- .bento-profile {
- flex-direction: column;
- text-align: center;
- padding: var(--space-xl);
- }
-
- .profile-photo img {
- width: 160px;
- height: 160px;
- }
-
- .profile-buttons {
- justify-content: center;
- }
-
- .bento-quick {
- flex-wrap: wrap;
- }
-
- .quick-card {
- flex: 1 1 calc(33.333% - var(--space-lg));
- min-width: 150px;
- }
-
- .bento-socials,
- .bento-skills {
- grid-column: span 12;
- }
-
- .project-card.featured {
- grid-template-columns: 1fr;
- }
-
- .project-card.featured .project-image {
- min-height: 200px;
- }
-
- .project-card.small {
- grid-column: span 6;
- }
-
- .contact-bento {
- grid-template-columns: 1fr;
- }
-
- .about-bento > .bento-card {
- grid-column: span 12 !important;
- }
-}
-
-@media (max-width: 768px) {
- :root {
- --container-padding: 1rem;
- }
-
- .bento-hero {
- padding-top: 80px;
- }
-
- .page-header {
- padding-top: calc(80px + var(--space-xl));
- }
-
- .article-full {
- padding-top: 80px;
- }
-
- .project-card.regular,
- .project-card.small {
- grid-column: span 12;
- }
-
- .github-cta {
- grid-column: span 12;
- }
-
- .blog-grid {
- grid-template-columns: 1fr;
- }
-
- .achievements-grid {
- grid-template-columns: 1fr;
- }
-
- .achievement-card {
- flex-direction: column;
- text-align: center;
- }
-
- .achievement-arrow {
- display: none;
- }
-
- .article-meta-full {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .article-footer-full {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .footer-grid {
- grid-template-columns: 1fr;
- text-align: center;
- }
-
- .footer-brand p {
- max-width: none;
- }
-
- .footer-socials {
- justify-content: center;
- }
-
- .footer-bottom {
- flex-direction: column;
- text-align: center;
- }
-
- .filters-wrapper {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .filter-group {
- width: 100%;
- }
-
- .filter-buttons {
- flex-wrap: wrap;
- }
-
- .filter-select {
- width: 100%;
- }
-
- .search-form {
- flex-direction: column;
- }
-
- .cta-section {
- padding: var(--space-xl);
- }
-
- .cta-buttons {
- flex-direction: column;
- width: 100%;
- }
-
- .cta-buttons .btn {
- width: 100%;
- }
-
- .messages-container {
- right: var(--space-md);
- left: var(--space-md);
- max-width: none;
- }
-
- .back-to-top {
- bottom: var(--space-md);
- right: var(--space-md);
- width: 44px;
- height: 44px;
- }
-
- .github-cta-card {
- flex-direction: column;
- text-align: center;
- }
-}
-
-@media (max-width: 576px) {
- .quick-card {
- flex: 1 1 100%;
- }
-
- .socials-grid {
- grid-template-columns: 1fr;
- }
-
- .stats-grid {
- grid-template-columns: 1fr;
- }
-
- .skills-categories {
- grid-template-columns: 1fr;
- }
-
- .profile-buttons {
- flex-direction: column;
- width: 100%;
- }
-
- .profile-buttons .btn {
- width: 100%;
- }
-
- .about-bio-header {
- flex-direction: column;
- text-align: center;
- }
-
- .about-bio-actions {
- flex-direction: column;
- }
-
- .about-bio-actions .btn {
- width: 100%;
- }
-
- .share-buttons {
- flex-wrap: wrap;
- }
-
- .related-grid {
- grid-template-columns: 1fr;
- }
-
- .pagination-numbers {
- flex-wrap: wrap;
- justify-content: center;
- }
-
- .error-code {
- font-size: 5rem;
- }
-
- .social-icon-link {
- font-size: 1.5rem;
- padding: var(--space-xs);
- }
-
- .social-icons-inline {
- gap: var(--space-lg);
- }
-}
-
-/* ===== Print Styles ===== */
-@media print {
- .navbar, .footer, .back-to-top, .messages-container, .share-buttons, .vote-btn, .comment-form, .nav-toggle {
- display: none !important;
- }
-
- body {
- background: white;
- color: black;
- }
-
- .bento-card,
- .article-card,
- .project-card {
- background: white;
- border: 1px solid #ddd;
- box-shadow: none;
- }
-
- a {
- color: black;
- text-decoration: underline;
- }
-}
-
-/* ===== Animations ===== */
-@keyframes pulse {
- 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
-}
-
-@keyframes float {
- 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); }
-}
-
-@keyframes glow {
- 0%, 100% { box-shadow: 0 0 20px var(--primary-glow); } 50% { box-shadow: 0 0 40px var(--primary-glow); }
-}
-
-/* Skeleton Loading */
-.skeleton {
- background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
- background-size: 200% 100%;
- animation: skeleton-loading 1.5s infinite;
-}
-
-@keyframes skeleton-loading {
- 0% { background-position: 200% 0; } 100% { background-position: -200% 0; }
-}
-
-/* ===== Utility Classes ===== */
-.text-center {
- text-align: center;
-}
-
-.text-left {
- text-align: left;
-}
-
-.text-right {
- text-align: right;
-}
-
-.text-primary {
- color: var(--primary-color);
-}
-
-.text-secondary {
- color: var(--text-secondary);
-}
-
-.text-muted {
- color: var(--text-muted);
-}
-
-.mt-0 {
- margin-top: 0;
-}
-
-.mt-1 {
- margin-top: var(--space-sm);
-}
-
-.mt-2 {
- margin-top: var(--space-md);
-}
-
-.mt-3 {
- margin-top: var(--space-lg);
-}
-
-.mt-4 {
- margin-top: var(--space-xl);
-}
-
-.mb-0 {
- margin-bottom: 0;
-}
-
-.mb-1 {
- margin-bottom: var(--space-sm);
-}
-
-.mb-2 {
- margin-bottom: var(--space-md);
-}
-
-.mb-3 {
- margin-bottom: var(--space-lg);
-}
-
-.mb-4 {
- margin-bottom: var(--space-xl);
-}
-
-.d-none {
- display: none;
-}
-
-.d-block {
- display: block;
-}
-
-.d-flex {
- display: flex;
-}
-
-.d-grid {
- display: grid;
-}
-
-.flex-center {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-/* ===== Hero Profile Card - Fixed Version ===== */
-/*
-.bento-profile-new {
- grid-column: span 8;
- padding: 0;
- overflow: hidden;
-}
-
-.profile-layout {
- display: flex;
- align-items: stretch;
- min-height: 420px;
- position: relative;
-}
-
-.profile-photo-container {
- flex: 0 0 280px;
- background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: var(--space-xl);
- position: relative;
-}
-
-.profile-photo-container::after {
- content: '';
- position: absolute;
- right: 0;
- top: 10%;
- bottom: 10%;
- width: 1px;
- background: linear-gradient(
- to bottom,
- transparent,
- var(--primary-color) 30%,
- var(--primary-color) 70%,
- transparent
- );
-}
-
-.profile-photo-frame {
- width: 100%;
- max-width: 200px;
- aspect-ratio: 2 / 3;
- border-radius: var(--radius-lg);
- overflow: hidden;
- border: 2px solid var(--border-color);
- background: var(--bg-darker);
- transition: var(--transition);
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-}
-
-.profile-photo-frame img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- object-position: center;
- display: block;
-}
-
-.bento-profile-new:hover .profile-photo-frame {
- border-color: var(--primary-color);
- box-shadow: 0 12px 32px rgba(230, 57, 70, 0.3);
- transform: translateY(-4px);
-}
-
-.profile-text-content {
- flex: 1;
- padding: var(--space-2xl);
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-
-.profile-text-content h1 {
- font-size: clamp(1.75rem, 3vw, 2.25rem);
- margin-bottom: var(--space-sm);
- line-height: 1.2;
-}
-
-.profile-text-content .profile-title {
- color: var(--primary-color);
- font-weight: 600;
- font-size: 1.05rem;
- margin-bottom: var(--space-lg);
- display: flex;
- align-items: center;
- gap: var(--space-sm);
-}
-
-.profile-text-content .profile-description {
- color: var(--text-secondary);
- font-size: 0.95rem;
- line-height: 1.7;
- margin-bottom: var(--space-xl);
-}
-
-.profile-text-content .profile-buttons {
- display: flex;
- gap: var(--space-md);
- flex-wrap: wrap;
-}
-*/
-
-/* ===== Logo Image Styling ===== */
-.logo img,
-.footer-logo img {
- display: block;
- max-width: 130px;
- height: auto;
- filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- border-radius: var(--radius-sm);
-}
-
-.logo:hover img {
- filter: drop-shadow(0 4px 16px rgba(230, 57, 70, 0.4))
- drop-shadow(0 0 20px rgba(230, 57, 70, 0.2));
- transform: translateY(-2px) scale(1.02);
-}
-
-.footer-logo img {
- opacity: 0.9;
-}
-
-.footer-logo:hover img {
- opacity: 1;
- filter: drop-shadow(0 4px 12px rgba(230, 57, 70, 0.3));
- transform: translateY(-1px);
-}
-
-/* Альтернативный вариант с рамкой и свечением */
-.logo img.bordered,
-.footer-logo img.bordered {
- padding: 8px;
- background: rgba(255, 255, 255, 0.02);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
-}
-
-.logo:hover img.bordered {
- background: rgba(230, 57, 70, 0.05);
- border-color: var(--primary-color);
- box-shadow: 0 0 20px rgba(230, 57, 70, 0.3);
-}
-
-/* ===== Article Gallery ===== */
-.article-gallery,
-.article-files,
-.article-links {
- margin: var(--space-2xl) 0;
- padding: var(--space-xl);
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-xl);
-}
-
-.article-gallery h3,
-.article-files h3,
-.article-links h3 {
- display: flex;
- align-items: center;
- gap: var(--space-sm);
- margin-bottom: var(--space-lg);
- font-size: 1.25rem;
-}
-
-.article-gallery h3 i,
-.article-files h3 i,
-.article-links h3 i {
- color: var(--primary-color);
-}
-
-/* Gallery Carousel */
-.gallery-carousel {
- position: relative;
- overflow: hidden;
- border-radius: var(--radius-lg);
-}
-
-.carousel-container {
- position: relative;
- width: 100%;
- min-height: 400px;
-}
-
-.carousel-slide {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- transition: opacity 0.5s ease;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-
-.carousel-slide.active {
- opacity: 1;
- position: relative;
-}
-
-.carousel-slide img {
- max-width: 100%;
- max-height: 400px;
- object-fit: contain;
- border-radius: var(--radius-md);
-}
-
-.carousel-caption {
- margin-top: var(--space-md);
- color: var(--text-secondary);
- font-size: 0.9rem;
- text-align: center;
-}
-
-.carousel-btn {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- width: 48px;
- height: 48px;
- background: var(--bg-dark);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-full);
- color: var(--text-primary);
- cursor: pointer;
- transition: var(--transition);
- z-index: 10;
-}
-
-.carousel-btn:hover {
- background: var(--primary-color);
- border-color: var(--primary-color);
-}
-
-.carousel-prev {
- left: var(--space-md);
-}
-
-.carousel-next {
- right: var(--space-md);
-}
-
-.carousel-dots {
- display: flex;
- justify-content: center;
- gap: var(--space-sm);
- margin-top: var(--space-md);
-}
-
-.carousel-dot {
- width: 10px;
- height: 10px;
- border-radius: var(--radius-full);
- background: var(--border-color);
- cursor: pointer;
- transition: var(--transition);
-}
-
-.carousel-dot.active,
-.carousel-dot:hover {
- background: var(--primary-color);
-}
-
-/* Gallery Collage */
-.gallery-collage {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: var(--space-md);
-}
-
-.collage-item {
- position: relative;
- border-radius: var(--radius-md);
- overflow: hidden;
- cursor: pointer;
- transition: var(--transition);
-}
-
-.collage-item:hover {
- transform: scale(1.02);
- box-shadow: var(--shadow-lg);
-}
-
-.collage-item img {
- width: 100%;
- height: 200px;
- object-fit: cover;
-}
-
-.collage-caption {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- padding: var(--space-sm);
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
- color: var(--text-primary);
- font-size: 0.8rem;
- margin: 0;
-}
-
-/* Lightbox */
-.lightbox {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.95);
- z-index: var(--z-modal);
- justify-content: center;
- align-items: center;
- flex-direction: column;
- padding: var(--space-xl);
-}
-
-.lightbox-close {
- position: absolute;
- top: var(--space-lg);
- right: var(--space-xl);
- font-size: 2rem;
- color: var(--text-primary);
- cursor: pointer;
-}
-
-#lightbox-img {
- max-width: 90%;
- max-height: 80vh;
- object-fit: contain;
- border-radius: var(--radius-md);
-}
-
-#lightbox-caption {
- color: var(--text-secondary);
- margin-top: var(--space-md);
- text-align: center;
-}
-
-/* Files List */
-.files-list {
- display: flex;
- flex-direction: column;
- gap: var(--space-md);
-}
-
-.file-item {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: var(--space-md);
- background: var(--bg-elevated);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- text-decoration: none;
- transition: var(--transition);
-}
-
-.file-item:hover {
- border-color: var(--primary-color);
- transform: translateX(4px);
-}
-
-.file-icon {
- width: 48px;
- height: 48px;
- background: var(--primary-muted);
- border-radius: var(--radius-md);
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary-color);
- font-size: 1.25rem;
- flex-shrink: 0;
-}
-
-.file-info {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.file-name {
- color: var(--text-primary);
- font-weight: 600;
-}
-
-.file-desc {
- color: var(--text-secondary);
- font-size: 0.85rem;
-}
-
-.file-meta {
- color: var(--text-muted);
- font-size: 0.75rem;
-}
-
-.file-download {
- color: var(--text-muted);
- font-size: 1.25rem;
-}
-
-.file-item:hover .file-download {
- color: var(--primary-color);
-}
-
-/* Links Grid */
-.links-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: var(--space-md);
-}
-
-.link-card {
- display: flex;
- flex-direction: column;
- background: var(--bg-elevated);
- border: 1px solid var(--border-color);
- border-radius: var(--radius-md);
- overflow: hidden;
- text-decoration: none;
- transition: var(--transition);
-}
-
-.link-card:hover {
- border-color: var(--primary-color);
- transform: translateY(-2px);
- box-shadow: var(--shadow-md);
-}
-
-.link-image {
- height: 150px;
- overflow: hidden;
-}
-
-.link-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.link-content {
- padding: var(--space-md);
-}
-
-.link-title {
- color: var(--text-primary);
- font-size: 1rem;
- margin-bottom: var(--space-xs);
- line-height: 1.4;
-}
-
-.link-description {
- color: var(--text-secondary);
- font-size: 0.85rem;
- margin-bottom: var(--space-sm);
- line-height: 1.5;
-}
-
-.link-domain {
- color: var(--text-muted);
- font-size: 0.75rem;
- display: flex;
- align-items: center;
- gap: var(--space-xs);
-}
-
-/* Comments disabled message */
-.comments-disabled {
- text-align: center;
- padding: var(--space-2xl);
- background: var(--bg-card);
- border-radius: var(--radius-xl);
- color: var(--text-muted);
-}
-
-.comments-disabled i {
- font-size: 2rem;
- margin-bottom: var(--space-md);
- display: block;
-}
-
-/* Project Languages Badge */
-.project-languages {
- margin-bottom: var(--space-sm);
-}
-
-.tech-label {
- font-size: 0.7rem;
- color: var(--text-muted);
- margin-right: var(--space-sm);
-}
-
-.lang-badge {
- background: rgba(59, 130, 246, 0.15);
- border-color: rgba(59, 130, 246, 0.3);
-}
-
-.lang-badge:hover {
- background: rgba(59, 130, 246, 0.15);
- border-color: rgba(59, 130, 246, 0.3);
- color: #ffffff;
-}
-
-.lang-badge i {
- color: var(--info-color);
-}
-
-/* Project Status Colors */
-.project-status.primary {
- background: var(--primary-muted);
- color: var(--primary-color);
-}
-
-.project-status.success {
- background: rgba(34, 197, 94, 0.2);
- color: var(--success-color);
-}
-
-.project-status.warning {
- background: rgba(245, 158, 11, 0.2);
- color: var(--warning-color);
-}
-
-.project-status.info {
- background: rgba(59, 130, 246, 0.2);
- color: var(--info-color);
-}
-
-.project-status.secondary {
- background: var(--bg-elevated);
- color: var(--text-secondary);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
- .gallery-collage {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .links-grid {
- grid-template-columns: 1fr;
- }
-
- .carousel-container {
- min-height: 250px;
- }
-
- .carousel-slide img {
- max-height: 250px;
- }
-}
\ No newline at end of file
diff --git a/static/css/variables.css b/static/css/variables.css
new file mode 100644
index 0000000..28f03dd
--- /dev/null
+++ b/static/css/variables.css
@@ -0,0 +1,83 @@
+/**
+ * CSS Variables - Color Scheme & Design Tokens
+ */
+
+:root {
+ /* Primary Colors - Red Theme */
+ --primary-color: #e63946;
+ --primary-light: #ff6b6b;
+ --primary-dark: #c1121f;
+ --primary-muted: rgba(230, 57, 70, 0.15);
+ --primary-glow: rgba(230, 57, 70, 0.3);
+
+ /* Background Colors */
+ --bg-dark: #0d0d0d;
+ --bg-darker: #080808;
+ --bg-card: #141414;
+ --bg-card-hover: #1a1a1a;
+ --bg-elevated: #1e1e1e;
+ --bg-input: #1a1a1a;
+
+ /* Text Colors */
+ --text-primary: #ffffff;
+ --text-secondary: #b0b0b0;
+ --text-muted: #666666;
+ --text-dark: #0d0d0d;
+
+ /* Border Colors */
+ --border-color: #2a2a2a;
+ --border-light: #3a3a3a;
+ --border-focus: var(--primary-color);
+
+ /* Status Colors */
+ --success-color: #22c55e;
+ --warning-color: #f59e0b;
+ --error-color: #ef4444;
+ --info-color: #3b82f6;
+
+ /* Gradients */
+ --gradient-primary: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
+ --gradient-card: linear-gradient(145deg, #1a1a1a 0%, #141414 100%);
+ --gradient-glow: radial-gradient(ellipse at center, rgba(230, 57, 70, 0.15) 0%, transparent 70%);
+ --gradient-text: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+
+ /* Shadows */
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
+ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
+ --shadow-glow: 0 0 40px rgba(230, 57, 70, 0.2);
+ --shadow-glow-strong: 0 0 60px rgba(230, 57, 70, 0.3);
+
+ /* Border Radius */
+ --radius-xs: 4px;
+ --radius-sm: 8px;
+ --radius-md: 12px;
+ --radius-lg: 16px;
+ --radius-xl: 24px;
+ --radius-full: 9999px;
+
+ /* Transitions */
+ --transition-fast: all 0.15s ease;
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+ /* Z-Index */
+ --z-dropdown: 100;
+ --z-sticky: 200;
+ --z-fixed: 300;
+ --z-modal: 400;
+ --z-tooltip: 500;
+
+ /* Spacing */
+ --space-xs: 0.25rem;
+ --space-sm: 0.5rem;
+ --space-md: 1rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2rem;
+ --space-2xl: 3rem;
+ --space-3xl: 4rem;
+
+ /* Container */
+ --container-max: 1400px;
+ --container-padding: 2rem;
+}
\ No newline at end of file
diff --git a/templates/wrapper.html b/templates/wrapper.html
index 55bb8c5..123e783 100644
--- a/templates/wrapper.html
+++ b/templates/wrapper.html
@@ -57,7 +57,14 @@
-
+
+
+
+
+
+
+
+
{% block extra_css %}{% endblock %}
@@ -248,6 +255,93 @@
+
+
+