/* ============================================================ FixedFloat — Blog styles (layers on top of /assets/css/min.css) min.css already supplies: Montserrat usage, the FF page chrome (#header / footer / .main-background space-planet), .wrapper, .bloc panels, .btn, theme (dark/light) toggling on . This file ONLY styles blog-specific content (article list grid, single-article typography, pagination, expert/FAQ/related blocks). Palette: bg #0C0D16 · panel #161A30 / #21284B · border #29315C primary #008FDF · accent #FFCC4F · text #fff · muted #9aa0bd ============================================================ */ :root{ --blog-panel:#161A30; --blog-panel-2:#21284B; --blog-line:#29315C; --blog-line-2:#3a4373; --blog-ink:#ffffff; --blog-body:#cfd3ea; --blog-muted:#9aa0bd; --blog-muted-2:#6e7499; --blog-primary:#008FDF; --blog-primary-2:#2ba6ee; --blog-accent:#FFCC4F; --blog-shadow:0 18px 50px rgba(0,0,0,.5); } /* The blog renders inside .wrapper.ff-page → keep content in a column */ .ff-page .bloc{position:relative;z-index:2;} /* ---- Blog hero (listing) ---- */ .blog-hero{padding:46px 0 8px;text-align:center;} .blog-hero .eyebrow{color:var(--blog-accent);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;} .blog-hero h1{font-size:40px;line-height:1.12;margin:12px 0 12px;color:var(--blog-ink);letter-spacing:-.5px;font-weight:700;} .blog-hero p{color:var(--blog-muted);max-width:660px;margin:0 auto;font-size:16px;line-height:1.6;} .blog-hero .blog-lang{display:inline-flex;gap:6px;margin-top:22px;} .blog-hero .blog-lang a{ font-size:12px;font-weight:700;color:var(--blog-muted); padding:7px 14px;border:1px solid var(--blog-line);border-radius:9px; background:rgba(22,26,48,.5);transition:.18s; } .blog-hero .blog-lang a:hover{color:#fff;border-color:var(--blog-line-2);} .blog-hero .blog-lang a.active{color:#fff;background:var(--blog-primary);border-color:var(--blog-primary);} /* ---- Article list grid ---- */ .blog-main{padding-bottom:60px;} .post-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px;padding:40px 0 24px; } .post-card{ background:linear-gradient(180deg,rgba(22,26,48,.92),rgba(12,13,22,.92)); border:1px solid var(--blog-line);border-radius:16px;overflow:hidden; display:flex;flex-direction:column; transition:transform .2s,border-color .2s,box-shadow .2s; backdrop-filter:blur(4px); } .post-card:hover{transform:translateY(-4px);border-color:var(--blog-line-2);box-shadow:var(--blog-shadow);} .post-card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--blog-panel-2);display:block;} .post-card .pc-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;} .post-meta{display:flex;align-items:center;gap:8px;color:var(--blog-muted-2);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;} .post-card h2{font-size:19px;line-height:1.3;margin:0;color:var(--blog-ink);font-weight:700;} .post-card h2 a{color:var(--blog-ink);text-decoration:none;} .post-card h2 a:hover{color:var(--blog-primary-2);} .post-card p{color:var(--blog-muted);font-size:14px;margin:0;flex:1;line-height:1.55;} .post-card .read{color:var(--blog-primary-2);font-size:13px;font-weight:700;text-decoration:none;margin-top:auto;} .post-card .read:hover{color:var(--blog-accent);} .lang-chip{font-size:10px;font-weight:700;color:var(--blog-accent);border:1px solid var(--blog-line-2);border-radius:5px;padding:2px 6px;letter-spacing:1px;} .empty{padding:80px 0;text-align:center;color:var(--blog-muted);font-size:16px;} /* ---- Pagination ---- */ .pagination{display:flex;justify-content:center;align-items:center;gap:6px;padding:14px 0 8px;flex-wrap:wrap;} .pagination a,.pagination span{padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--blog-muted);border:1px solid var(--blog-line);text-decoration:none;background:rgba(22,26,48,.5);} .pagination a:hover{color:#fff;border-color:var(--blog-line-2);} .pagination .current{background:var(--blog-primary);color:#fff;border-color:var(--blog-primary);} .pagination .dots{border:none;background:none;color:var(--blog-muted-2);} /* ---- Single article ---- */ .article-wrap{max-width:760px;margin:0 auto;padding:30px 0 60px;position:relative;z-index:2;} .crumbs{color:var(--blog-muted-2);font-size:13px;font-weight:600;margin-bottom:18px;} .crumbs a{color:var(--blog-muted);text-decoration:none;} .crumbs a:hover{color:#fff;} .article-wrap>h1{font-size:36px;line-height:1.18;margin:0 0 16px;color:var(--blog-ink);letter-spacing:-.5px;font-weight:700;} .article-meta{display:flex;align-items:center;gap:10px;color:var(--blog-muted-2);font-size:13px;font-weight:600;margin-bottom:24px;flex-wrap:wrap;} .hero-img{width:100%;max-height:430px;object-fit:cover;border-radius:16px;border:1px solid var(--blog-line);margin:0 0 30px;display:block;} .article-body{font-size:17px;line-height:1.85;color:var(--blog-body);} .article-body>*:first-child{margin-top:0;} .article-body h2{font-size:26px;margin:38px 0 14px;color:var(--blog-ink);line-height:1.25;font-weight:700;} .article-body h3{font-size:21px;margin:28px 0 10px;color:var(--blog-ink);font-weight:600;} .article-body h4{font-size:18px;margin:22px 0 8px;color:#fff;font-weight:600;} .article-body p{margin:0 0 18px;} .article-body a{color:var(--blog-primary-2);text-decoration:underline;} .article-body a:hover{color:var(--blog-accent);} .article-body ul,.article-body ol{margin:0 0 18px 22px;padding:0;} .article-body li{margin:7px 0;} .article-body img{max-width:100%;height:auto;border-radius:12px;margin:24px auto;border:1px solid var(--blog-line);display:block;} .article-body strong,.article-body b{color:#fff;} .article-body blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--blog-primary);background:rgba(22,26,48,.7);border-radius:0 12px 12px 0;color:#e7ecff;font-style:italic;} .article-body code{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:rgba(33,40,75,.8);border:1px solid var(--blog-line);border-radius:6px;padding:2px 6px;color:#ffd98c;} .article-body pre{background:#0a0b14;border:1px solid var(--blog-line);border-radius:12px;padding:18px 20px;overflow:auto;margin:22px 0;} .article-body pre code{background:none;border:none;padding:0;color:#cfd3ea;} .article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;} .article-body th,.article-body td{border:1px solid var(--blog-line);padding:10px 14px;text-align:left;} .article-body th{background:rgba(33,40,75,.6);color:#fff;font-weight:600;} .article-body hr{border:none;border-top:1px solid var(--blog-line);margin:30px 0;} /* ---- Expert block ---- */ .expert-block{background:rgba(22,26,48,.85);border:1px solid var(--blog-line);border-radius:16px;padding:24px;margin:34px 0;} .expert-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;} .expert-photo{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--blog-primary);flex:none;} .expert-name{font-weight:700;color:#fff;font-size:16px;} .expert-position{font-size:12px;color:var(--blog-muted-2);margin-top:2px;} .expert-block p{color:var(--blog-body);margin:0 0 12px;font-size:15px;line-height:1.7;} .expert-block p:last-child{margin-bottom:0;} /* ---- FAQ ---- */ .faq-section{margin:40px 0;} .faq-section>h2{font-size:25px;color:#fff;margin:0 0 18px;font-weight:700;} .faq-item{margin-bottom:12px;padding:18px 22px;background:rgba(22,26,48,.85);border:1px solid var(--blog-line);border-radius:13px;transition:border-color .18s;} .faq-item:hover{border-color:var(--blog-line-2);} .faq-item h3{margin:0 0 8px;font-size:16px;color:var(--blog-primary-2);font-weight:600;} .faq-item p{margin:0;font-size:14px;color:var(--blog-muted);line-height:1.6;} /* ---- Related articles ---- */ .related{margin-top:52px;} .related>h2{font-size:23px;color:#fff;margin:0 0 18px;font-weight:700;} .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;} .related-card{background:rgba(22,26,48,.85);border:1px solid var(--blog-line);border-radius:13px;overflow:hidden;transition:transform .2s,border-color .2s;text-decoration:none;display:block;} .related-card:hover{transform:translateY(-3px);border-color:var(--blog-line-2);} .related-card img{width:100%;height:130px;object-fit:cover;display:block;} .related-card .rc-body{padding:14px 16px;} .related-card h3{font-size:15px;margin:0;color:#fff;line-height:1.35;font-weight:600;} /* ============================================================ Light theme (FF theme toggle adds .lightbg to ) Keep blog content readable on the light space background. ============================================================ */ body.lightbg .blog-hero h1, body.lightbg .article-wrap>h1{color:#0e1330;} body.lightbg .blog-hero p{color:#4a5170;} body.lightbg .blog-hero .blog-lang a{background:rgba(255,255,255,.7);color:#4a5170;border-color:#d4d9ee;} body.lightbg .blog-hero .blog-lang a.active{color:#fff;background:var(--blog-primary);border-color:var(--blog-primary);} body.lightbg .post-card{background:#fff;border-color:#e3e7f5;} body.lightbg .post-card:hover{border-color:#c4cbe8;box-shadow:0 18px 50px rgba(20,30,80,.12);} body.lightbg .post-card h2,body.lightbg .post-card h2 a{color:#0e1330;} body.lightbg .post-card p{color:#5a6184;} body.lightbg .post-meta{color:#8a90ad;} body.lightbg .lang-chip{color:#c08a00;border-color:#e3c97a;} body.lightbg .pagination a,body.lightbg .pagination span{background:#fff;border-color:#e3e7f5;color:#5a6184;} body.lightbg .pagination .current{background:var(--blog-primary);color:#fff;border-color:var(--blog-primary);} body.lightbg .crumbs,body.lightbg .crumbs a{color:#6e7499;} body.lightbg .article-meta{color:#8a90ad;} body.lightbg .hero-img{border-color:#e3e7f5;} body.lightbg .article-body{color:#2c3252;} body.lightbg .article-body h2,body.lightbg .article-body h3,body.lightbg .article-body h4,body.lightbg .article-body strong,body.lightbg .article-body b{color:#0e1330;} body.lightbg .article-body blockquote{background:#f4f6fd;color:#2c3252;} body.lightbg .article-body code{background:#f0f2fb;border-color:#e3e7f5;color:#b5530a;} body.lightbg .article-body pre{background:#0e1330;} body.lightbg .article-body th{background:#f4f6fd;color:#0e1330;} body.lightbg .article-body img,body.lightbg .article-body td,body.lightbg .article-body th,body.lightbg .article-body hr{border-color:#e3e7f5;} body.lightbg .expert-block,body.lightbg .faq-item,body.lightbg .related-card{background:#fff;border-color:#e3e7f5;} body.lightbg .expert-name,body.lightbg .related-card h3,body.lightbg .faq-section>h2,body.lightbg .related>h2{color:#0e1330;} body.lightbg .expert-block p{color:#3a4063;} body.lightbg .faq-item p{color:#5a6184;} /* ---- Responsive ---- */ @media(max-width:760px){ .blog-hero{padding:32px 0 4px;} .blog-hero h1{font-size:30px;} .article-wrap>h1{font-size:27px;} .article-body{font-size:16px;} .post-grid{grid-template-columns:1fr;gap:18px;padding:28px 0 18px;} } /* lift content above FF absolute .main-background (z-index:0) */ .ff-page,.blog-main,.article-wrap{position:relative;z-index:2}