/* Stilurile paginilor de blog. Se leagă cu după /css/site.css, deci pot * suprascrie regulile comune. Erau copiate în -ul fiecărui articol. */ /* ── Dark mode ───────────────────────────────────────────────────── Variabilele de bază sunt în layout.js, sub [data-theme="dark"]. Aici rămân doar ajustările specifice componentelor de blog. */ [data-theme="dark"] .step p { color: var(--muted); } [data-theme="dark"] .link-grid a:hover { background: var(--accent-light); } /* ── Hub ──────────────────────────────────────────────────────────── */ .blog-hero { background: linear-gradient(150deg, var(--accent-dark) 0%, #1e40af 60%, var(--accent-mid) 100%); color:#fff; padding: 3rem 1.25rem 3.25rem; text-align:center; } .blog-hero-inner { max-width: 720px; margin: 0 auto; } /* Hubul „Idei de amenajare" stă pe aceeaşi lăţime ca paginile de articol: 860px sub un hero care ocupă tot ecranul arăta ca o coloană uitată la mijloc, iar la 1120px intră trei carduri pe rând în loc de două. Textul heroului rămâne la 720px — acolo lăţimea e o măsură de citit, nu de aşezare. */ .container.idei-lat { max-width: 1120px; } .blog-hero .eyebrow { display:inline-flex; align-items:center; gap:0.45rem; font-size:0.75rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22); padding:0.35rem 0.8rem; border-radius:999px; margin-bottom:1rem; } .blog-hero h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight:900; line-height:1.18; letter-spacing:-0.5px; margin-bottom:0.75rem; } .blog-hero p { font-size:1.02rem; opacity:0.9; line-height:1.6; margin-bottom:1.5rem; } .blog-search { display:flex; gap:0.5rem; max-width:460px; margin:0 auto; } .blog-search input { flex:1; padding:0.75rem 1rem; border-radius:999px; border:none; font-size:0.95rem; outline:none; min-width:0; } .blog-search button { background:#fbbf24; color:#1e293b; border:none; border-radius:999px; padding:0 1.25rem; font-weight:800; cursor:pointer; } .blog-cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:0.85rem; } .blog-cat { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem; display:block; text-decoration:none; color:var(--text); transition:box-shadow .15s, transform .15s; } .blog-cat:hover { box-shadow:0 8px 26px rgba(0,0,0,0.12); transform:translateY(-2px); text-decoration:none; } .blog-cat-ico { width:42px; height:42px; border-radius:5px; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:0.7rem; } .blog-cat-name { font-weight:800; font-size:0.98rem; margin-bottom:0.25rem; } .blog-cat-desc { font-size:0.82rem; color:var(--muted); line-height:1.5; } .blog-cat-count { font-size:0.72rem; color:var(--muted); margin-top:0.6rem; font-weight:600; } .article-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1rem; } .article-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--text); transition:box-shadow .15s, transform .15s; } .article-card:hover { box-shadow:0 8px 26px rgba(0,0,0,0.12); transform:translateY(-2px); text-decoration:none; } .article-card-cover { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--accent-light); } .article-card-body { padding:0.95rem 1rem 1.1rem; display:flex; flex-direction:column; flex:1; } .article-card-cat { font-size:0.7rem; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--accent); margin-bottom:0.4rem; } .article-card-title { font-size:1rem; font-weight:800; line-height:1.35; margin-bottom:0.4rem; } .article-card-desc { font-size:0.84rem; color:var(--muted); line-height:1.55; flex:1; } .article-card-meta { display:flex; align-items:center; gap:0.75rem; font-size:0.74rem; color:var(--muted); margin-top:0.75rem; } .article-card.featured { grid-column:span 2; } @media (max-width:640px) { .article-card.featured { grid-column:span 1; } } /* ── Pagina de articol ────────────────────────────────────────────── */ /* Pagina de articol are container mai lat decat .container, deci si breadcrumb-ul trebuie sa porneasca de la aceeasi margine. */ .breadcrumbs.breadcrumbs-wide { max-width:1120px; } .article-wrap { max-width:1120px; margin:0 auto; padding:0 1rem 3rem; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; } @media (min-width:1000px) { .article-wrap { grid-template-columns:minmax(0,1fr) 260px; } } .article-main { max-width:760px; width:100%; } .article-head { padding:1.5rem 0 0.5rem; } .article-kicker { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color:var(--accent); background:var(--accent-light); padding:0.3rem 0.7rem; border-radius:999px; text-decoration:none; } .article-title { font-size:clamp(1.6rem, 4.4vw, 2.3rem); font-weight:900; line-height:1.2; letter-spacing:-0.5px; margin:0.85rem 0 0.6rem; } .article-lead { font-size:1.05rem; color:var(--muted); line-height:1.65; } .article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 1rem; font-size:0.8rem; color:var(--muted); margin-top:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .article-meta i { margin-right:0.3rem; } .article-cover { width:100%; border-radius:var(--radius); overflow:hidden; margin:1.25rem 0 0.5rem; border:1px solid var(--border); background:var(--card); } .article-cover img, .article-cover svg { display:block; width:100%; height:auto; } .article-body { font-size:1.02rem; line-height:1.75; color:var(--text); } .article-body p { margin:1rem 0; } .article-body h2 { font-size:1.45rem; font-weight:900; line-height:1.3; margin:2.25rem 0 0.75rem; scroll-margin-top:75px; letter-spacing:-0.3px; } .article-body h3 { font-size:1.12rem; font-weight:800; margin:1.6rem 0 0.5rem; scroll-margin-top:75px; } .article-body ul, .article-body ol { margin:1rem 0 1rem 1.25rem; } .article-body li { margin:0.4rem 0; } .article-body strong { font-weight:700; } .article-body a { text-decoration:underline; text-underline-offset:2px; } .article-body hr { border:none; border-top:1px solid var(--border); margin:2rem 0; } .anchor { opacity:0; color:var(--muted); font-weight:400; text-decoration:none; margin-left:0.35rem; font-size:0.8em; } h2:hover .anchor, h3:hover .anchor { opacity:0.6; } /* ── TOC ──────────────────────────────────────────────────────────── */ .toc { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem; margin:1.5rem 0; } .toc-title { font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); margin-bottom:0.6rem; display:flex; align-items:center; gap:0.45rem; } .toc ol { list-style:none; margin:0; padding:0; counter-reset:toc; } .toc li { margin:0.3rem 0; } .toc li.lvl3 { padding-left:1.1rem; } .toc a { font-size:0.9rem; color:var(--text); text-decoration:none; line-height:1.5; } .toc a:hover { color:var(--accent); text-decoration:underline; } .toc li.lvl3 a { font-size:0.84rem; color:var(--muted); } /* align-self:start e obligatoriu: fără el, elementul de grid se întinde pe toată înălțimea coloanei și position:sticky nu are unde să alunece. */ .toc-side { position:sticky; top:75px; align-self:start; display:none; } @media (min-width:1000px) { .toc-side { display:block; } .toc-inline { display:none; } } .toc-side .toc { margin:1.5rem 0 0; max-height:calc(100vh - 110px); overflow-y:auto; } .toc-side a.active { color:var(--accent); font-weight:700; } /* ── Componente vizuale ───────────────────────────────────────────── */ .stat-box { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:1.25rem 1.4rem; margin:1.75rem 0; display:flex; align-items:center; gap:1.1rem; } .stat-box-ico { font-size:1.6rem; color:var(--accent); flex-shrink:0; } .stat-box-value { font-size:2rem; font-weight:900; line-height:1; letter-spacing:-1px; color:var(--accent); } .stat-box-label { font-size:0.92rem; font-weight:600; margin-top:0.35rem; line-height:1.45; } .stat-box-src { font-size:0.72rem; color:var(--muted); margin-top:0.35rem; } .stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.75rem; margin:1.75rem 0; } .stat-row .stat-box { margin:0; flex-direction:column; align-items:flex-start; gap:0.3rem; } .callout { border-radius:var(--radius); padding:1.1rem 1.25rem; margin:1.75rem 0; border:1px solid; display:flex; gap:0.9rem; align-items:flex-start; } .callout i { font-size:1.05rem; margin-top:0.15rem; flex-shrink:0; } .callout-title { font-weight:800; font-size:0.92rem; margin-bottom:0.3rem; } .callout-body { font-size:0.93rem; line-height:1.65; } .callout-body p:first-child { margin-top:0; } .callout-body p:last-child { margin-bottom:0; } .callout.atentie { background:#fff7ed; border-color:#fdba74; color:#7c2d12; } .callout.atentie i { color:#ea580c; } .callout.sfat { background:#eff6ff; border-color:#93c5fd; color:#1e3a8a; } .callout.sfat i { color:#2563eb; } .callout.exemplu { background:#f0fdf4; border-color:#86efac; color:#14532d; } .callout.exemplu i { color:#16a34a; } .callout.info { background:#f8fafc; border-color:var(--border); color:var(--text); } .callout.info i { color:var(--muted); } [data-theme="dark"] .callout.atentie { background:#2a1608; border-color:#7c3a12; color:#fed7aa; } [data-theme="dark"] .callout.sfat { background:#0f1e3a; border-color:#1e40af; color:#bfdbfe; } [data-theme="dark"] .callout.exemplu { background:#0a2415; border-color:#166534; color:#bbf7d0; } [data-theme="dark"] .callout.info { background:var(--card); } [data-theme="dark"] .cmp-table thead th { background:#16233b; } .steps-list { margin:1.75rem 0; display:flex; flex-direction:column; gap:0.75rem; } .step-item { display:flex; gap:0.9rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem; } .step-num { width:34px; height:34px; border-radius:5px; background:var(--accent); color:#fff; font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .step-item-title { font-weight:800; font-size:0.96rem; margin-bottom:0.2rem; display:flex; align-items:center; gap:0.45rem; } .step-item-title i { color:var(--accent); font-size:0.85rem; } .step-item-text { font-size:0.9rem; color:var(--muted); line-height:1.6; } .cmp-table { margin:1.75rem 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .cmp-title { font-weight:800; font-size:0.95rem; padding:0.9rem 1.15rem; border-bottom:1px solid var(--border); } .cmp-scroll { overflow-x:auto; } .cmp-table table { width:100%; border-collapse:collapse; font-size:0.9rem; min-width:420px; } .cmp-table th, .cmp-table td { padding:0.7rem 1.15rem; text-align:left; border-bottom:1px solid var(--border); } .cmp-table thead th { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); background:var(--accent-light); } .cmp-table tbody tr:last-child td, .cmp-table tbody tr:last-child th { border-bottom:none; } .cmp-table td.c { text-align:center; } .cmp-yes { color:#16a34a; } .cmp-no { color:#dc2626; } .cmp-table th[scope="row"] { font-weight:600; } .proscons { display:grid; grid-template-columns:1fr; gap:0.75rem; margin:1.75rem 0; } @media (min-width:600px) { .proscons { grid-template-columns:1fr 1fr; } } .pc-col { border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem; background:var(--card); } .pc-col.pro { border-top:3px solid #16a34a; } .pc-col.con { border-top:3px solid #dc2626; } .pc-head { font-weight:800; font-size:0.92rem; margin-bottom:0.6rem; display:flex; align-items:center; gap:0.45rem; } .pc-col.pro .pc-head { color:#16a34a; } .pc-col.con .pc-head { color:#dc2626; } .pc-col ul { list-style:none; margin:0; padding:0; } .pc-col li { font-size:0.89rem; line-height:1.55; padding:0.35rem 0 0.35rem 1.3rem; position:relative; color:var(--text); } .pc-col li::before { position:absolute; left:0; top:0.35rem; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:0.75rem; } .pc-col.pro li::before { content:"\\f00c"; color:#16a34a; } .pc-col.con li::before { content:"\\f00d"; color:#dc2626; } .bq { margin:1.75rem 0; background:var(--card); border:1px solid var(--border); border-left:4px solid #fbbf24; border-radius:var(--radius); padding:1.35rem 1.5rem; } .bq-text { font-size:1.08rem; line-height:1.65; font-style:italic; font-weight:500; } .bq-author { display:flex; align-items:center; gap:0.6rem; margin-top:0.9rem; font-size:0.85rem; } .bq-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; } .bq-name { font-weight:700; } .bq-role { color:var(--muted); font-size:0.8rem; } .chart-box { margin:1.75rem 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.25rem 1.25rem; } .chart-title { font-weight:800; font-size:0.95rem; margin-bottom:0.2rem; } .chart-sub { font-size:0.78rem; color:var(--muted); margin-bottom:0.9rem; } .chart-scroll { overflow-x:auto; } /* Donut-ul e pătrat și mic: nu are nevoie de min-width-ul graficelor cu bare, care altfel îl forțează mai lat decât containerul și îl taie în dreapta. */ .chart-donut { max-width:260px; margin:0 auto; } /* Specificitate mai mare decat regula .chart-box svg, definita mai jos. */ .chart-box .chart-donut svg { min-width:0; } .chart-box svg { display:block; width:100%; height:auto; min-width:300px; } .chart-note { font-size:0.74rem; color:var(--muted); margin-top:0.7rem; line-height:1.5; } .chart-legend { display:flex; flex-wrap:wrap; gap:0.5rem 1rem; margin-top:0.8rem; font-size:0.78rem; color:var(--muted); } .chart-legend span { display:inline-flex; align-items:center; gap:0.4rem; } .chart-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; } .infographic { margin:2rem 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--card); } .infographic-head { padding:1.1rem 1.25rem 0.9rem; border-bottom:1px solid var(--border); } .infographic-head h4 { font-size:1.02rem; font-weight:900; } .infographic-head p { font-size:0.82rem; color:var(--muted); margin-top:0.25rem; } .infographic-body { padding:1rem 0.75rem; overflow-x:auto; } .infographic svg { display:block; width:100%; height:auto; min-width:320px; } .timeline { margin:1.75rem 0; position:relative; padding-left:1.9rem; } .timeline::before { content:''; position:absolute; left:0.65rem; top:0.4rem; bottom:0.4rem; width:2px; background:var(--border); } .tl-item { position:relative; padding:0 0 1.15rem; } .tl-item:last-child { padding-bottom:0; } .tl-dot { position:absolute; left:-1.9rem; top:0.05rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--accent); color:#fff; font-size:0.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--bg); } .tl-meta { font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--accent); } .tl-title { font-weight:800; font-size:0.95rem; margin:0.15rem 0 0.2rem; } .tl-text { font-size:0.89rem; color:var(--muted); line-height:1.6; } .figure { margin:1.75rem 0; } .figure img { display:block; width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); background:var(--accent-light); } .figure figcaption { font-size:0.78rem; color:var(--muted); margin-top:0.5rem; line-height:1.5; } .figure figcaption .credit { opacity:0.75; } .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.6rem; margin:1.75rem 0; } .gallery button { padding:0; border:1px solid var(--border); border-radius:5px; overflow:hidden; background:none; cursor:pointer; display:block; } .gallery img, .gallery svg { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } .lightbox { position:fixed; inset:0; background:rgba(2,6,23,0.92); z-index:900; display:none; align-items:center; justify-content:center; padding:1.5rem; } .lightbox.open { display:flex; } .lightbox-inner { max-width:900px; width:100%; } .lightbox img, .lightbox svg { width:100%; height:auto; border-radius:5px; background:#fff; } .lightbox-cap { color:#e2e8f0; font-size:0.85rem; margin-top:0.75rem; text-align:center; } .lightbox-close { position:absolute; top:1rem; right:1.25rem; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; } .shot { margin:1.75rem 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--card); } .shot-bar { display:flex; align-items:center; gap:0.4rem; padding:0.55rem 0.85rem; background:var(--accent-light); border-bottom:1px solid var(--border); } .shot-dot { width:9px; height:9px; border-radius:50%; background:var(--border); } .shot-url { font-size:0.72rem; color:var(--muted); margin-left:0.5rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .shot-body { position:relative; } .shot-body svg { display:block; width:100%; height:auto; } .shot-legend { padding:0.85rem 1.15rem; border-top:1px solid var(--border); } .shot-legend li { font-size:0.85rem; line-height:1.6; color:var(--text); margin:0.25rem 0; display:flex; gap:0.55rem; align-items:flex-start; } .shot-legend ol { list-style:none; margin:0; padding:0; } .shot-num { width:20px; height:20px; border-radius:50%; background:#dc2626; color:#fff; font-size:0.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.1rem; } .video-embed { margin:1.75rem 0; position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:#000; cursor:pointer; } .video-embed img { width:100%; height:100%; object-fit:cover; opacity:0.75; } .video-embed iframe { width:100%; height:100%; border:0; } .video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:3rem; text-shadow:0 2px 12px rgba(0,0,0,0.5); } /* ── Calculator, varianta din articol ────────────────────────────── În articol e singurul element cu care cititorul poate interacționa, deci primește fundal colorat, bordură accent și umbră — restul componentelor sunt carduri albe cu bordură subțire. */ .article-body .rp-calc { background:var(--accent-light); border:2px solid var(--accent); box-shadow:0 6px 22px rgba(26,86,219,0.13); padding:1.3rem 1.4rem 1.4rem; } .article-body .rp-calc-title { font-size:1.02rem; } .article-body .rp-calc-field input { background:var(--card); border-color:var(--accent); } .article-body .rp-calc-out { background:var(--card); border:1px solid var(--border); } .article-body .rp-calc-row.total { border-top-color:var(--accent); } [data-theme="dark"] .article-body .rp-calc { box-shadow:0 6px 22px rgba(0,0,0,0.35); } /* ── Conversie: CTA, lead magnet, newsletter ──────────────────────── */ .art-cta { margin:2rem 0; border-radius:var(--radius); padding:1.4rem 1.5rem; background:linear-gradient(135deg, var(--accent-dark) 0%, #1e40af 100%); color:#fff; } .art-cta h4 { font-size:1.08rem; font-weight:900; line-height:1.35; margin-bottom:0.4rem; } .art-cta p { font-size:0.9rem; opacity:0.88; line-height:1.6; margin:0 0 1rem; } .art-cta a { display:inline-flex; align-items:center; gap:0.5rem; background:#fbbf24; color:#1e293b; font-weight:800; font-size:0.92rem; padding:0.7rem 1.35rem; border-radius:5px; text-decoration:none; } .art-cta a:hover { background:#f59e0b; text-decoration:none; } .art-cta .sub { display:block; font-size:0.75rem; opacity:0.7; margin-top:0.7rem; } .lead-magnet { margin:2rem 0; border:2px dashed var(--accent); border-radius:var(--radius); background:var(--accent-light); padding:1.35rem 1.5rem; } .lm-head { display:flex; gap:0.9rem; align-items:flex-start; } .lm-ico { width:44px; height:44px; border-radius:5px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; } .lm-title { font-weight:900; font-size:1rem; line-height:1.35; } .lm-desc { font-size:0.87rem; color:var(--muted); line-height:1.6; margin-top:0.25rem; } .lm-form { display:flex; gap:0.5rem; margin-top:1rem; flex-wrap:wrap; } .lm-form input { flex:1; min-width:180px; padding:0.68rem 0.9rem; border:1px solid var(--border); border-radius:5px; font-size:0.92rem; background:var(--card); color:var(--text); } .lm-form button, .nl-form button { background:var(--accent); color:#fff; border:none; border-radius:5px; padding:0.68rem 1.25rem; font-weight:800; font-size:0.9rem; cursor:pointer; white-space:nowrap; } .lm-form button:hover, .nl-form button:hover { background:var(--accent-dark); } .lm-note, .nl-note { font-size:0.72rem; color:var(--muted); margin-top:0.6rem; line-height:1.5; } .form-msg { font-size:0.85rem; margin-top:0.7rem; display:none; font-weight:600; } .form-msg.ok { color:#16a34a; display:block; } .form-msg.err { color:#dc2626; display:block; } .newsletter { margin:2.5rem 0 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; } .newsletter h3 { font-size:1.1rem; font-weight:900; margin-bottom:0.35rem; } .newsletter p { font-size:0.88rem; color:var(--muted); line-height:1.6; margin-bottom:1rem; } .nl-form { display:flex; gap:0.5rem; max-width:420px; margin:0 auto; flex-wrap:wrap; } .nl-form input { flex:1; min-width:180px; padding:0.68rem 0.9rem; border:1px solid var(--border); border-radius:5px; font-size:0.92rem; background:var(--bg); color:var(--text); } .share { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin:2rem 0 0; padding-top:1.25rem; border-top:1px solid var(--border); } .share-label { font-size:0.82rem; font-weight:700; color:var(--muted); margin-right:0.25rem; } .share a { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-size:0.95rem; } .share a.wa { background:#25d366; } .share a.fb { background:#1877f2; } .share a.li { background:#0a66c2; } .share a.cp { background:var(--muted); border:none; cursor:pointer; } .author-box { display:flex; gap:1rem; align-items:flex-start; margin:2rem 0 0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.25rem; } .author-avatar { width:48px; height:48px; border-radius:50%; background:var(--accent-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; } .author-name { font-weight:800; font-size:0.95rem; } .author-bio { font-size:0.85rem; color:var(--muted); line-height:1.6; margin-top:0.25rem; } .related { margin:2.5rem 0 0; } .related h3 { font-size:1.1rem; font-weight:900; margin-bottom:0.9rem; } .floating-cta { display:none; position:fixed; right:1.25rem; bottom:1.5rem; z-index:300; background:#fbbf24; color:#1e293b; font-weight:800; font-size:0.88rem; padding:0.75rem 1.2rem; border-radius:5px; box-shadow:0 6px 24px rgba(0,0,0,0.25); text-decoration:none; align-items:center; gap:0.5rem; } .floating-cta:hover { background:#f59e0b; text-decoration:none; } @media (min-width:1100px) { .floating-cta { display:inline-flex; } } .blog-section { margin-top:2.5rem; } .blog-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .blog-section-head h2 { font-size:1.2rem; font-weight:900; } .blog-section-head a { font-size:0.82rem; font-weight:700; } .empty-note { background:var(--card); border:1px dashed var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; color:var(--muted); font-size:0.9rem; } .no-result { display:none; } /* Clase mutate din atribute style= din componentele blogului. */ .blog-caseta-subsol { padding: 0 1.15rem 0.9rem; } .blog-caseta-subsol-larg { padding: 0 1.25rem 1rem; } .blog-bara-text { background: var(--text); } .blog-nota-centrata { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; } .blog-admin-rand { margin: 0 0 0.9rem; } .u-text-centrat.u-text-centrat { text-align: center; } .u-centrat-bloc.u-centrat-bloc { margin: 0 auto 1rem; } .u-mt-mic.u-mt-mic { margin-top: 0.5rem; } /* Chemarea de la finalul hubului „Idei și sfaturi". Nu refolosim `.chemare-mester` de pe prima pagină: acela trăiește în acasa.css, iar paginile de blog n-au de ce să descarce 67 KB de stil pentru o casetă. */ .chemare-idei { margin: 2.5rem 0 1rem; padding: 1.75rem; background: var(--accent-light); border: 1px solid var(--accent-mid); border-radius: var(--radius); text-align: center; } .chemare-idei h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.7rem; } .chemare-idei p { font-size: 0.95rem; line-height: 1.65; margin: 0 auto 1.25rem; max-width: 46ch; color: var(--muted); } /* Hubul de idei: cardurile mari alternează stânga-dreapta (vezi render.js); `dense` lasă grila să umple golurile când lățimea dă alt număr de coloane. */ .idei-lat .article-grid { grid-auto-flow: dense; }