/** * ========================================================================== * Rusnak.link * article.css — Scoped Article System * ========================================================================== * * ВАЖНО: * Все стили работают ТОЛЬКО внутри .article-page * * Использование: * * * ... * * * или * *

* ... *

* * ========================================================================== */ /* ========================================================================== 1. ROOT VARIABLES ========================================================================== */ .article-page { /* ========================= SEMANTIC TOKENS ========================= */ --bg: #ffffff; --surface: #f8fafc; --text: #333333; --muted: #718096; --heading: #2c3e50; --primary: #c0392b; --border: #edf2f7; /* ========================= TYPOGRAPHY ========================= */ --font-serif: Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* ========================= LAYOUT TOKENS ========================= */ --content-width: 900px; --content-padding: 40px 20px; --radius: 12px; background: var(--bg); color: var(--text); font-family: var(--font-sans); } html { scroll-behavior: smooth; } /* ========================================================================== 2. ARTICLE LAYOUT ========================================================================== */ .article-page main { max-width: var(--content-width); margin: 0 auto; padding: var(--content-padding); box-sizing: border-box; } .article-page article { line-height: 1.8; } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ .article-page h1, .article-page .article-title { color: var(--heading); font-size: 2.8em; line-height: 1.1; margin: 0 0 25px 0; font-weight: 800; } .article-page h2, .article-page .section-title { color: var(--heading); font-size: 1.8em; margin: 50px 0 25px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .article-page p { margin: 0 0 25px; } /* ========================================================================== 4. META ========================================================================== */ .article-page .article-lead { font-size: 1.15em; font-weight: 600; line-height: 1.6; color: var(--heading); } .article-page .article-text { font-size: 1em; line-height: 1.7; color: var(--text); } .article-page .article-text--transition { color: var(--muted); } /* ========================================================================== 5. AUTHOR / ADDRESS ========================================================================== */ .article-page address { font-family: var(--font-sans); font-style: normal; line-height: 1.6; margin-bottom: 25px; } .article-page address strong { color: var(--color-text-dark); font-size: 1.1em; display: block; } .article-page address span { color: var(--color-text-muted); font-size: 0.9em; display: block; } .article-page address a { color: var(--color-primary); text-decoration: none; font-weight: 600; display: inline-block; margin-top: 5px; transition: color 0.2s ease; } .article-page address a:hover { color: var(--color-secondary); } /* Только явный бренд-класс */ .article-page .site-brand { font-family: var(--font-serif); font-style: italic; } /* ========================================================================== 6. FIGURES ========================================================================== */ .article-page .main-figure { margin: 40px 0; text-align: center; } .article-page .main-figure img { max-width: 90%; height: auto; display: inline-block; border-radius: 8px; border: 1px solid var(--color-border); box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .article-page .main-figure figcaption { margin-top: 12px; font-size: 0.9em; color: var(--color-text-muted); line-height: 1.4; } /* ========================================================================== 7. ARTICLE SECTIONS ========================================================================== */ .article-page .article-section { background: #fff; padding: 60px 20px; border-radius: 15px; margin: 60px 0; scroll-margin-top: 100px; box-sizing: border-box; border: 1px solid #eee; } /* ========================================================================== 8. ANALYSIS GRID ========================================================================== */ .article-page .analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 25px; margin-bottom: 40px; } .article-page .analysis-block { background: #fff; padding: 25px; border-radius: 12px; box-sizing: border-box; } .article-page .analysis-block--entrepreneur { border: 2px solid #c0392b; border-top-width: 6px; } .article-page .analysis-block--investor { border: 2px solid #2c3e50; border-top-width: 6px; } .article-page .analysis-block__title { margin-top: 0; margin-bottom: 12px; font-family: var(--font-sans); font-size: 1.2em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; } .article-page .analysis-block--entrepreneur .analysis-block__title { color: #c0392b; } .article-page .analysis-block--investor .analysis-block__title { color: #2c3e50; } .article-page .analysis-block__text { margin-bottom: 0; font-size: 0.95em; line-height: 1.6; } /* ========================================================================== 9. CONCEPTUAL NODES ========================================================================== */ .article-page .conceptual-node { margin-bottom: 35px; padding-left: 20px; } .article-page .conceptual-node--blue { border-left: 4px solid #c0392b; } .article-page .conceptual-node--dark { border-left: 4px solid #2c3e50; } .article-page .conceptual-node__title { color: #2c3e50; margin-top: 0; margin-bottom: 10px; font-family: var(--font-serif); font-size: 1.25em; font-weight: 700; } .article-page .conceptual-node__text { margin: 0; line-height: 1.6; } /* ========================================================================== 10. FAQ ========================================================================== */ .article-page .faq-item { background: #ffffff; padding: 25px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #2c3e50; box-sizing: border-box; } .article-page .faq-item__question { margin-top: 0; margin-bottom: 12px; color: #c0392b; font-family: var(--font-sans); font-weight: 700; font-size: 1.2em; line-height: 1.4; } .article-page .faq-item__answer { margin: 0; line-height: 1.6; } /* ========================================================================== 11. TOC ========================================================================== */ .article-page .toc-wrapper { position: fixed; left: 40px; top: 90px; width: 240px; display: none; border-left: 2px solid #eeeeee; padding-left: 15px; z-index: 1000; transition: opacity 0.3s ease, visibility 0.3s ease; } @media (min-width: 1300px) { .article-page .toc-wrapper { display: block; } } .article-page .toc-link { display: block; margin-bottom: 12px; color: #666666; text-decoration: none; font-size: 0.85em; line-height: 1.4; transition: 0.2s; } .article-page .toc-link:hover, .article-page .toc-link.active { color: #2c3e50; font-weight: 700; } /* ========================================================================== 12. PROGRESS BAR ========================================================================== */ .article-page #progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.05); z-index: 2000; } .article-page #progress-bar { width: 0%; height: 100%; background: #c0392b; transition: width 0.1s; } /* ========================================================================== 13. HOME BUTTON ========================================================================== */ .article-page .fixed-home-link { position: fixed; bottom: 30px; left: 20px; z-index: 1500; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #c0392b; border-radius: 6px; background: #c0392b; color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .article-page .fixed-home-link:hover { background: #2c3e50; border-color: #2c3e50; transform: translateY(-3px); } @media (min-width: 1200px) { .article-page .fixed-home-link { top: 30px; bottom: auto; left: 30px; font-size: 13px; padding: 10px 15px; } .article-page .fixed-home-link:hover { transform: translateX(5px); } } /* ========================================================================== 14. SCROLL BUTTONS ========================================================================== */ .article-page .nav-scroll-group { position: fixed; right: 30px; bottom: 30px; display: flex; flex-direction: column; z-index: 2000; } .article-page .scroll-btn { width: 45px; height: 45px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; border-radius: 50%; background: #2c3e50; color: #ffffff; cursor: pointer; opacity: 0.8; font-size: 20px; transition: 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .article-page .scroll-btn:hover { opacity: 1; background: #000000; transform: scale(1.1); } /* ========================================================================== 15. RELATED ARTICLES ========================================================================== */ .article-page .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; align-items: stretch; } .article-page .related-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 25px; background: #ffffff; border: 1px solid #edf2f7; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; } .article-page .related-card:hover { transform: translateY(-5px); border-color: #c0392b; box-shadow: 0 10px 25px rgba(0,0,0,0.05); } .article-page .related-card h4 { margin: 0 0 20px 0; color: #2c3e50; font-size: 1.1em; line-height: 1.4; font-family: var(--font-sans); } .article-page .related-card span { color: #c0392b; font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } /* ========================================================================== 16. SHARE BUTTONS ========================================================================== */ .article-page .fb-share-btn:hover { background: #166fe5; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24,119,242,0.3); } .article-page #copyBtn:hover { background: #f7fafc; border-color: #cbd5e0; transform: translateY(-2px); } .article-page table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 0.95em; } .article-page th, .article-page td { padding: 14px; border: 1px solid #edf2f7; text-align: left; } .article-page th { background: #f8fafc; font-weight: 700; } /* ========================================================================== 17. MOBILE ========================================================================== */ @media (max-width: 768px) { .article-page .analysis-grid { grid-template-columns: 1fr; gap: 15px; } .article-page .main-figure img { max-width: 100%; } .article-page h1 { font-size: 2.1em; } .article-page h2, .article-page .section-title { font-size: 1.5em; } } @media (max-width: 650px) { .article-page main, .article-page article { padding: 20px 15px; } .article-page .related-grid { grid-template-columns: 1fr; } .article-page .nav-scroll-group { bottom: 15px; right: 15px; } .article-page .scroll-btn { width: 40px; height: 40px; font-size: 16px; } }