/* ========================================== FirmWare Blog — public listing + article ========================================== */ /* Blog-local palette. These MUST NOT sit on :root: --fw-ink and --fw-border are real app-wide tokens from app.css, so on :root they repainted the WHOLE blog document — the SiteTopBar and FooterBar rendered alongside the article included — not just the article. Scoped to .blog (both blog pages wrap their markup in
) the overrides reach only what they were written for. Keeping them off :root is also what would let this file be hoisted into index.html later. */ .blog { --fw-dark-blue: #004777; --fw-teal: #00AFB5; --fw-teal-light: #33c9cf; --fw-navy: #012238; --fw-ink: #0f2233; --fw-slate: #475569; --fw-muted: #64748b; --fw-bg: #f6f9fb; --fw-border: #e6ecf2; } .blog { font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: var(--fw-ink); line-height: 1.65; -webkit-font-smoothing: antialiased; max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; } /* ---------- hero ---------- */ .blog-hero { text-align: center; padding: 56px 0 40px; } .blog-eyebrow { display: inline-block; font-size: 0.905rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fw-teal); margin-bottom: 12px; } .blog-hero h1 { font-size: 2.525rem; font-weight: 800; color: var(--fw-navy); margin: 0 0 12px; } .blog-sub { color: var(--fw-muted); max-width: 560px; margin: 0 auto; } /* ---------- listing grid ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; } .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fw-border); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; } .blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(1, 34, 56, 0.10); } .blog-card-cover { width: 100%; height: 180px; object-fit: cover; display: block; } .blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .blog-card-body h2 { font-size: 1.275rem; font-weight: 700; color: var(--fw-navy); margin: 0 0 6px; } .blog-card-meta, .blog-article-meta { font-size: 0.945rem; color: var(--fw-muted); margin: 0 0 10px; } .blog-card-excerpt { color: var(--fw-slate); font-size: 1.065rem; margin: 0 0 14px; flex: 1; } .blog-card-readmore { font-size: 1.005rem; font-weight: 600; color: var(--fw-teal); } /* ---------- pager ---------- */ .blog-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; } .blog-pager-btn { border: 1px solid var(--fw-border); background: #fff; color: var(--fw-dark-blue); border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; } .blog-pager-btn:disabled { opacity: 0.45; cursor: default; } .blog-pager-info { color: var(--fw-muted); font-size: 1.025rem; } /* ---------- empty / loading ---------- */ .blog-empty { text-align: center; color: var(--fw-muted); padding: 70px 0; } .blog-empty i { font-size: 2.325rem; color: var(--fw-teal); display: block; margin-bottom: 10px; } .blog-back { display: inline-block; color: var(--fw-teal); font-weight: 600; text-decoration: none; margin-bottom: 18px; } /* ---------- article ---------- */ .blog-article { max-width: 760px; margin: 40px auto 0; } .blog-article h1 { font-size: 2.225rem; font-weight: 800; color: var(--fw-navy); margin: 0 0 8px; } .blog-article-cover { width: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; margin: 18px 0 26px; } /* Typography for the sanitizer-allowed tag set only (see Sanitizer.SanitizeBlogHtml). */ .blog-article-body { color: var(--fw-slate); font-size: 1.145rem; } .blog-article-body h2, .blog-article-body h3, .blog-article-body h4 { color: var(--fw-navy); font-weight: 700; margin: 1.6em 0 0.5em; } .blog-article-body h2 { font-size: 1.575rem; } .blog-article-body h3 { font-size: 1.325rem; } .blog-article-body h4 { font-size: 1.175rem; } .blog-article-body p { margin: 0 0 1em; } /* Bulma 0.8.0 is loaded globally (index.html) and its minireset kills bullet markers with `ul { list-style: none }` and zeroes li margins/padding. The sanitizer keeps ul/ol/li, so a post authored with bullets rendered as flat unindented lines. Restore markers and indent explicitly for post bodies — scoped here so the reset still applies to the site chrome. (Bulma leaves `ol` markers alone; the ol rules below are belt-and-braces.) */ .blog-article-body ul, .blog-article-body ol { margin: 0 0 1em; padding-left: 1.6em; } .blog-article-body ul { list-style: disc outside; } .blog-article-body ol { list-style: decimal outside; } .blog-article-body ul ul { list-style-type: circle; } .blog-article-body ul ul ul { list-style-type: square; } .blog-article-body ol ol { list-style-type: lower-alpha; } .blog-article-body ol ol ol { list-style-type: lower-roman; } .blog-article-body li { display: list-item; margin: 0 0 0.4em; } /* Nested lists hug their parent item instead of inheriting the block gap. */ .blog-article-body li > ul, .blog-article-body li > ol { margin: 0.4em 0 0; } .blog-article-body a { color: var(--fw-teal); text-decoration: underline; } .blog-article-body img { max-width: 100%; height: auto; border-radius: 10px; } .blog-article-body blockquote { border-left: 4px solid var(--fw-teal); margin: 1.2em 0; padding: 6px 18px; color: var(--fw-muted); background: var(--fw-bg); border-radius: 0 8px 8px 0; } .blog-article-body pre { background: var(--fw-navy); color: #e2e8f0; padding: 14px 18px; border-radius: 10px; overflow-x: auto; font-size: 1.025rem; } .blog-article-body code { font-family: 'Cascadia Code', Consolas, Menlo, monospace; } .blog-article-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 1.065rem; } .blog-article-body th, .blog-article-body td { border: 1px solid var(--fw-border); padding: 8px 12px; text-align: left; } .blog-article-body th { background: var(--fw-bg); color: var(--fw-navy); } .blog-article-body figure { margin: 1.2em 0; } .blog-article-body figcaption { font-size: 0.975rem; color: var(--fw-muted); text-align: center; margin-top: 6px; } .blog-article-body hr { border: none; border-top: 1px solid var(--fw-border); margin: 2em 0; } /* ---------- pricing under every post ---------- */ /* Wider than the 760px article column: the plan cards sit side by side, as on /pricing. */ .blog-pricing { max-width: 1000px; margin: 64px auto 0; padding-top: 48px; border-top: 1px solid var(--fw-border); } .blog-pricing-header { text-align: center; margin-bottom: 28px; } .blog-pricing-header h2 { font-size: 1.925rem; font-weight: 800; color: var(--fw-navy); margin: 0 0 10px; } /* ---------- responsive ---------- */ @media (max-width: 640px) { .blog-hero h1 { font-size: 1.925rem; } .blog-article h1 { font-size: 1.725rem; } .blog-hero { padding: 36px 0 28px; } }