/* ============================================================================
100 CALCULATOR — BLOG STYLES (MERGED)
============================================================================
Vanilla CSS3. No framework, no external stylesheet besides Font Awesome
(already linked in ). Everything below is scoped under .blog-section
(selectors and custom properties) so it cannot leak into or be overridden
by the site's global styles.
MERGE NOTE: this file is the result of merging the standalone
blog-article-styles.css into blog.css. No rule from either source file
was deleted. blog-article-styles.css was already ~99% duplicated inside
this file's Group 7 (it used to be loaded as a second after
blog.css, extending it) — every selector/value in it matched Group 7
here verbatim, EXCEPT one block that Group 7 was missing:
"About the author (in-article)" (.blog-author + its 4 sub-selectors),
plus that block's one responsive tweak. Both have been added back in
as new section 7.13 (renumbering the old 7.13 "responsive tweaks" to
7.14) — see Group 7 below. Nothing else changed.
You no longer need to link blog-article-styles.css separately; this
single file now covers the home page, sidebar, and article page.
THIS FILE IS SHARED ACROSS MULTIPLE TEMPLATES — not just the article page.
It covers (at minimum): the blog HOME page (featured grid, tabs, category
cards, tool cards), the SIDEBAR component (loaded async from
/components/blog-sidebar.html and injected into #blogSidebar by blog.js),
and the single-ARTICLE template (Group 7 below). Do not judge any single
rule as "unused" against just one page's markup; check all templates
first — see the CSS AUDIT block further down for specifics.
Contents (grouped by concern; each group is self-contained and ordered
so that every responsive override sits directly after the base rule it
modifies — cascade order matters, so groups are not alphabetical):
GROUP 1 — DESIGN TOKENS
1.1 Design tokens (custom properties)
GROUP 2 — RESET & BASE
2.1 Reset (scoped)
2.2 Utilities (sr-only, gradient fills, is-hidden)
GROUP 3 — LAYOUT
3.1 Page shell (.blog-single-page / .blog-home-page grid variants)
3.2 Sidebar + main content grid
GROUP 4 — SIDEBAR
4.1 Search
4.1b Live Search dropdown (results list, highlighting, empty state)
4.2 Nav + nested accordion
4.3 Widgets (tags, mini post list)
4.4 Sticky desktop behaviour + mobile drawer + overlay
GROUP 5 — SHARED UI COMPONENTS
5.1 Buttons, badges, ripple
5.2 Media frame (image + gradient fallback), avatar
5.3 Pagination
GROUP 6 — BLOG HOME PAGE
6.1 Hero
6.2 Shared section heading
6.3 Featured section
6.4 Tabs (Latest / Popular / Trending)
6.5 Blog grid + card
6.6 Category cards
6.7 Tool cards
6.8 Search empty state
GROUP 7 — ARTICLE (SINGLE POST) PAGE
7.1 Breadcrumb
7.2 Post header (badge, meta bar)
7.3 Featured media + in-article image placeholders
7.4 Table of contents
7.5 Article typography
7.6 Callout boxes
7.7 Inline tool CTA
7.8 Checklist
7.9 FAQ accordion
7.10 About box (site)
7.11 Inline citation links
7.12 Related articles grid
7.13 About the author (in-article) — merged in from
blog-article-styles.css, see MERGE NOTE above
7.14 Article-scoped responsive tweaks
GROUP 8 — ACCESSIBILITY
8.1 Focus-visible, reduced motion
GROUP 9 — GLOBAL RESPONSIVE BREAKPOINTS
Laptop (≤1200px) → Tablet (≤992px) → Mobile (≤768px) →
Small Mobile (≤480px)
----------------------------------------------------------------------------
CSS AUDIT (as of this pass) — cross-checked against every file available:
index.html (article template), blog-sidebar.html (sidebar component),
blog.js, faq-schema.js.
A. Rules confirmed IN USE by the sidebar component (blog-sidebar.html) or
by blog.js's querySelector calls — safe, just not visible from the
article page alone. No action needed; not flagged individually below.
B. Rules NOT found in any of the four files above. These almost certainly
belong to page templates that weren't provided (blog HOME page,
CATEGORY page) — this file's own header confirms those templates
exist. Each is marked inline with a "// AUDIT: not found in provided
files" comment at its definition. Do NOT delete these without
checking the home/category page markup first:
aff-top, blog-badge--category, blog-btn (+ --outline, --text),
blog-card__author(-name), blog-card__body, blog-card__cta,
blog-card__dot, blog-card__excerpt, blog-card__meta(-details),
blog-card__readtime, blog-category-card (+ __count/__desc/__icon/
__title), blog-category-grid, blog-featured-card--primary
(+ __body/__excerpt), blog-featured-grid, blog-grad-6,
blog-grid--three, blog-hero__eyebrow, blog-hero__stats,
blog-home-page, blog-media-frame__fallback-icon,
blog-pagination__list, blog-section-heading (+ --with-tabs/__desc),
blog-stat (+ __label/__num), blog-tab-panel, blog-tabs,
blog-tool-card (+ __cta/__desc/__icon/__title), blog-tool-grid,
sidebar-heading
C. Two specific gaps worth a human look (not just "another template"):
- .blog-search-empty / .blog-search-empty__clear: blog.js looks
these up by id (#blogSearchEmpty / #blogSearchClear at lines
~280-281), but that empty-state markup doesn't exist in either
index.html or blog-sidebar.html. Either it lives in a template
not yet provided, or it was never added to the sidebar partial —
worth confirming, since right now the "no search results" state
can never render.
- .blog-sidebar--released: this rule's own inline comment says
"Added by blog.js (initStickySidebar)", but no initStickySidebar
function exists in the current blog.js. Either that behaviour
was removed from the JS and this CSS is now dead, or the
function lives in a version of blog.js not included here.
============================================================================ */
/* ==============================================================================
GROUP 1 — DESIGN TOKENS
==============================================================================
All custom properties (colours, type scale, spacing, radius, shadow,
motion, layout) live on .blog-section as CSS variables. Nothing here
renders visually on its own — this is the shared vocabulary every
other group below draws from.
============================================================================== */
/* ------------------------------------------------------------------------------
1.1 Design tokens (custom properties)
------------------------------------------------------------------------------ */
.blog-section {
/* Brand (derived from the site's existing #0ea87a theme colour) */
--blog-brand-50: #f0faf6;
--blog-brand-100: #dcf3ea;
--blog-brand-300: #7cd6b9;
--blog-brand-500: #0ea87a;
--blog-brand-600: #0c8c66;
--blog-brand-700: #0a6f52;
/* Neutrals */
--blog-gray-900: #10161a;
--blog-gray-800: #1c252b;
--blog-gray-700: #33424a;
--blog-gray-600: #4d5c65;
--blog-gray-500: #6b7a83;
--blog-gray-400: #93a1a8;
--blog-gray-300: #c3ccd1;
--blog-gray-200: #dee4e7;
--blog-gray-100: #eef2f3;
--blog-gray-50: #f7f9fa;
--blog-white: #ffffff;
/* Surfaces */
--blog-surface: #ffffff;
--blog-surface-sunken: #f6f9f9;
--blog-border: #e4e9eb;
/* Gradient palette used for media placeholders + avatars (cycled) */
--blog-grad-1a: #0ea87a;
--blog-grad-1b: #0a6f52;
--blog-grad-2a: #6366f1;
--blog-grad-2b: #4338ca;
--blog-grad-3a: #f59e0b;
--blog-grad-3b: #c2740a;
--blog-grad-4a: #ec4899;
--blog-grad-4b: #ad1457;
--blog-grad-5a: #0ea5e9;
--blog-grad-5b: #0369a1;
--blog-grad-6a: #8b5cf6;
--blog-grad-6b: #6427c9;
/* Type scale (fluid via clamp). Plus Jakarta Sans is loaded in for
a warmer, more editorial voice than a bare system stack gives — still
backed by the same system fallbacks if the webfont can't load. */
--blog-font:
"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--blog-fs-h1: clamp(1.85rem, 1.4rem + 2vw, 2.9rem);
--blog-fs-h2: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
--blog-fs-h3: clamp(1.02rem, 0.97rem + 0.2vw, 1.125rem);
--blog-fs-body: 1rem;
--blog-fs-sm: 0.875rem;
--blog-fs-xs: 0.8125rem;
--blog-lh-tight: 1.25;
--blog-lh-normal: 1.6;
/* Spacing scale */
--blog-sp-1: 4px;
--blog-sp-2: 8px;
--blog-sp-3: 12px;
--blog-sp-4: 16px;
--blog-sp-5: 20px;
--blog-sp-6: 24px;
--blog-sp-8: 32px;
--blog-sp-10: 40px;
--blog-sp-12: 48px;
--blog-sp-16: 64px;
/* Radius */
--blog-radius-sm: 8px;
--blog-radius-md: 14px;
--blog-radius-lg: 20px;
--blog-radius-pill: 999px;
/* Elevation */
--blog-shadow-sm:
0 1px 2px rgba(16, 24, 32, 0.05), 0 1px 3px rgba(16, 24, 32, 0.07);
--blog-shadow-md:
0 6px 16px rgba(16, 24, 32, 0.08), 0 2px 6px rgba(16, 24, 32, 0.05);
--blog-shadow-lg:
0 16px 32px rgba(16, 24, 32, 0.12), 0 4px 10px rgba(16, 24, 32, 0.06);
--blog-shadow-focus: 0 0 0 4px rgba(14, 168, 122, 0.22);
/* Motion */
--blog-ease: cubic-bezier(0.4, 0, 0.2, 1);
--blog-dur-fast: 0.18s;
--blog-dur-base: 0.3s;
--blog-dur-slow: 0.45s;
/* Layout */
--blog-sidebar-width: 265px;
--blog-layout-gap: 30px;
--blog-z-rail: 50;
--blog-z-overlay: 45;
--blog-z-trigger: 40;
font-family: var(--blog-font);
color: var(--blog-gray-800);
display: block;
}
/* ==============================================================================
GROUP 2 — RESET & BASE
==============================================================================
Scoped resets and small utility classes used throughout the file.
Everything here is intentionally boring and low-specificity so later
groups can override freely.
============================================================================== */
/* ------------------------------------------------------------------------------
2.1 Reset (scoped to .blog-section so nothing leaks site-wide)
------------------------------------------------------------------------------ */
.blog-section,
.blog-section *,
.blog-section *::before,
.blog-section *::after {
box-sizing: border-box;
}
.blog-section ul,
.blog-section dl,
.blog-section dd {
margin: 0;
padding: 0;
list-style: none;
}
.blog-section h1,
.blog-section h2,
.blog-section h3,
.blog-section h4,
.blog-section p,
.blog-section figure,
.blog-section dt {
margin: 0;
}
.blog-section img {
max-width: 100%;
height: auto;
display: block;
border-radius: 10px;
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
}
.blog-section a {
color: inherit;
text-decoration: none;
}
.blog-section button {
font-family: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
text-align: inherit;
}
.blog-section input {
font-family: inherit;
color: inherit;
border: solid 1px var(--blog-brand-500);
border-radius: var(--blog-radius-sm);
}
/* ------------------------------------------------------------------------------
2.2 Utilities (sr-only, gradient fills, is-hidden)
------------------------------------------------------------------------------ */
.blog-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;
}
.blog-grad-1 {
background: linear-gradient(135deg, var(--blog-grad-1a), var(--blog-grad-1b));
}
.blog-grad-2 {
background: linear-gradient(135deg, var(--blog-grad-2a), var(--blog-grad-2b));
}
.blog-grad-3 {
background: linear-gradient(135deg, var(--blog-grad-3a), var(--blog-grad-3b));
}
.blog-grad-4 {
background: linear-gradient(135deg, var(--blog-grad-4a), var(--blog-grad-4b));
}
.blog-grad-5 {
background: linear-gradient(135deg, var(--blog-grad-5a), var(--blog-grad-5b));
}
/* AUDIT: .blog-grad-6 (the standalone utility class) is not found in
provided files — .blog-grad-1 through -5 likely are (used as avatar/
fallback background utilities on the home page), just not confirmable
here either. Note this is separate from the --blog-grad-6a/6b custom
properties, which ARE used, via the :nth-child(6n+6) cycling rule in
section 7 below — only this specific utility class is unconfirmed. */
.blog-grad-6 {
background: linear-gradient(135deg, var(--blog-grad-6a), var(--blog-grad-6b));
}
.blog-nav-label {
white-space: nowrap;
}
.blog-accordion__leaf-link.blog-nav-label {
white-space: normal;
}
/* is-hidden: used by the JS search filter to hide non-matching cards */
.blog-card.is-hidden,
.blog-featured-card.is-hidden {
display: none;
}
/* ==============================================================================
GROUP 3 — LAYOUT
==============================================================================
The page-level shell: single-post vs. home-page grid variants, and the
two-column sidebar + main content grid used within .blog-section.
============================================================================== */
/* ------------------------------------------------------------------------------
3.1 Page shell (.blog-single-page / .blog-home-page grid variants)
------------------------------------------------------------------------------ */
body {
background-color: #ffffff !important;
}
/* AUDIT: .blog-home-page not found in provided files — likely applied on the
blog home page template (not included in this review). See file header. */
.main-layout.blog-home-page {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1025px) {
.main-layout.blog-single-page {
grid-template-columns: minmax(0, 1fr) 220px;
}
/* AUDIT: .sidebar-heading not found in provided files — note this is a
non-"blog-" prefixed class, so it may belong to the site's global
sidebar (outside .blog-section) rather than the blog component. */
.blog-single-page .sidebar-heading {
text-align: center;
}
.blog-single-page .sidebar-heading h3 {
padding: 7px 10px;
font-size: 1.2rem;
}
}
@media (min-width: 1440px) {
.main-layout.blog-single-page {
grid-template-columns: minmax(0, 1fr) 300px;
}
.blog-single-page .sidebar-heading {
text-align: center;
}
.blog-single-page .sidebar-heading h3 {
padding: 7px 18px;
font-size: 1.4rem;
}
}
/* AUDIT: .aff-top not found in provided files — see file header, section C. */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
.blog-single-page .aff-top {
gap: 13px;
}
}
/* ------------------------------------------------------------------------------
3.2 Sidebar + main content grid
------------------------------------------------------------------------------ */
.blog-layout {
display: grid;
grid-template-columns: var(--blog-sidebar-width) 1fr;
gap: var(--blog-layout-gap);
align-items: start;
max-width: 100%;
position: relative; /* containing block for .blog-sidebar--released (see section 8) */
}
.blog-main {
min-width: 0; /* allow grid children to shrink below content size */
display: flex;
flex-direction: column;
gap: var(--blog-sp-12);
padding-block: var(--blog-sp-2) var(--blog-sp-16);
}
/* ==============================================================================
GROUP 4 — SIDEBAR
==============================================================================
Everything belonging to the sidebar component loaded from
/components/blog-sidebar.html and injected into #blogSidebar by
blog.js. Search, category navigation (nested accordion), widgets
(tags + mini post list), and the sticky desktop / off-canvas mobile
drawer behaviour, each with their own responsive overrides kept
directly alongside the base rule they modify.
============================================================================== */
/* ------------------------------------------------------------------------------
4.1 Search
------------------------------------------------------------------------------ */
.blog-search {
position: relative;
display: flex;
align-items: center;
margin-bottom: var(--blog-sp-3);
}
.blog-search__input {
width: 100%;
height: 44px;
padding: 0 var(--blog-sp-4);
border: 1.5px solid var(--blog-border);
border-radius: var(--blog-radius-pill);
background: var(--blog-surface-sunken);
font-size: var(--blog-fs-sm);
color: var(--blog-gray-800);
transition:
border-color var(--blog-dur-fast) var(--blog-ease),
box-shadow var(--blog-dur-fast) var(--blog-ease);
}
.blog-search__input::placeholder {
color: var(--blog-gray-400);
}
.blog-search__input:focus {
outline: none;
border-color: var(--blog-brand-500);
box-shadow: var(--blog-shadow-focus);
background: var(--blog-surface);
}
.blog-search__input::-webkit-search-cancel-button {
cursor: pointer;
}
/* ------------------------------------------------------------------------------
4.1b Live Search dropdown — NEW, added for the sidebar Live Search feature.
Rendered by blog.js's initLiveSearch(). Deliberately `position: fixed`
with top/left/width set from the search input's getBoundingClientRect()
in JS, rather than a simple `position: absolute` off .blog-search
(position: relative, see 4.1 above): .blog-sidebar__inner has
`overflow-y: auto` (section 4.4), which would silently clip an absolute
dropdown any time it needed more room than was currently scrolled into
view. Fixed positioning escapes that clipping entirely.
------------------------------------------------------------------------------ */
.blog-search-results {
position: fixed;
z-index: 60; /* above .blog-sidebar (--blog-z-rail) and its overlay */
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
box-shadow: var(--blog-shadow-lg);
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--blog-dur-fast) var(--blog-ease),
transform var(--blog-dur-fast) var(--blog-ease),
visibility 0s linear var(--blog-dur-fast);
}
.blog-search-results.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity var(--blog-dur-fast) var(--blog-ease),
transform var(--blog-dur-fast) var(--blog-ease),
visibility 0s linear 0s;
}
.blog-search-results__list {
list-style: none;
margin: 0;
padding: var(--blog-sp-2);
}
.blog-search-results__item.is-active {
background: var(--blog-brand-50);
border-radius: var(--blog-radius-sm);
}
.blog-search-results__link {
display: block;
padding: var(--blog-sp-2) var(--blog-sp-3);
border-radius: var(--blog-radius-sm);
font-size: var(--blog-fs-sm);
line-height: var(--blog-lh-tight);
color: var(--blog-gray-800);
transition: background var(--blog-dur-fast) var(--blog-ease);
}
.blog-search-results__item.is-active .blog-search-results__link,
.blog-search-results__link:hover {
background: var(--blog-brand-50);
color: var(--blog-brand-700);
}
.blog-search-results__link mark {
background: var(--blog-brand-100);
color: var(--blog-brand-700);
border-radius: 3px;
padding: 0 1px;
}
.blog-search-results__empty {
margin: 0;
padding: var(--blog-sp-3) var(--blog-sp-4);
font-size: var(--blog-fs-sm);
color: var(--blog-gray-500);
}
@media (prefers-reduced-motion: reduce) {
.blog-search-results {
transition: none;
}
}
/* ------------------------------------------------------------------------------
4.2 Nav + nested accordion (category → subcategory → articles)
------------------------------------------------------------------------------ */
.blog-nav-all {
display: flex;
align-items: center;
gap: var(--blog-sp-3);
padding: var(--blog-sp-3) var(--blog-sp-3);
border-radius: var(--blog-radius-sm);
font-weight: 700;
font-size: var(--blog-fs-body);
color: var(--blog-gray-800);
margin-bottom: var(--blog-sp-2);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease);
}
.blog-nav-all__icon {
display: grid;
place-items: center;
width: 24px;
flex-shrink: 0;
font-size: 1rem;
color: var(--blog-brand-600);
}
.blog-nav-all:hover {
background: var(--blog-surface-sunken);
}
.blog-nav-all.is-active {
background: var(--blog-brand-50);
color: var(--blog-brand-700);
}
/* --- Level 1: category --- */
.blog-accordion__item {
border-top: 1px solid var(--blog-border);
}
.blog-accordion__item:last-child {
border-bottom: 1px solid var(--blog-border);
}
.blog-accordion__heading {
font-size: inherit;
font-weight: inherit;
}
.blog-accordion__trigger {
width: 100%;
display: flex;
align-items: center;
gap: var(--blog-sp-3);
padding: var(--blog-sp-3);
border-radius: var(--blog-radius-sm);
font-weight: 600;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-700);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease);
}
.blog-accordion__trigger:hover {
background: var(--blog-surface-sunken);
color: var(--blog-gray-900);
}
.blog-accordion__icon {
display: grid;
place-items: center;
width: 24px;
flex-shrink: 0;
font-size: 0.95rem;
color: var(--blog-brand-600);
}
.blog-accordion__trigger .blog-nav-label {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-accordion__chevron {
flex-shrink: 0;
font-size: 0.7rem;
color: var(--blog-gray-400);
transition: transform var(--blog-dur-base) var(--blog-ease);
}
.blog-accordion__item.is-open
> .blog-accordion__heading
.blog-accordion__chevron {
transform: rotate(180deg);
color: var(--blog-brand-600);
}
.blog-accordion__item.is-open
> .blog-accordion__heading
.blog-accordion__trigger {
color: var(--blog-gray-900);
}
/* Grid-rows trick: animate from 0fr -> 1fr instead of measuring scrollHeight in JS */
.blog-accordion__panel,
.blog-accordion__subpanel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--blog-dur-base) var(--blog-ease);
}
/* Applied briefly by blog.js when auto-opening the active article's
parent categories on page load, so that initial reveal is instant
instead of animating open — the transition above is for user clicks. */
.blog-accordion--no-anim,
.blog-accordion--no-anim * {
transition: none !important;
}
.blog-accordion__item.is-open > .blog-accordion__panel,
.blog-accordion__subitem.is-open > .blog-accordion__subpanel {
grid-template-rows: 1fr;
}
.blog-accordion__panel-inner,
.blog-accordion__subpanel-inner {
overflow: hidden;
min-height: 0;
}
.blog-accordion__sublist {
padding: 0 0 var(--blog-sp-2) var(--blog-sp-3);
}
/* --- Level 2: subcategory --- */
.blog-accordion__subtrigger {
width: 100%;
display: flex;
align-items: center;
gap: var(--blog-sp-2);
padding: var(--blog-sp-2) var(--blog-sp-2) var(--blog-sp-2) var(--blog-sp-3);
border-radius: var(--blog-radius-sm);
font-weight: 600;
font-size: var(--blog-fs-xs);
color: var(--blog-gray-600);
border-left: 2px solid var(--blog-border);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease),
border-color var(--blog-dur-fast) var(--blog-ease);
}
.blog-accordion__subtrigger:hover {
background: var(--blog-surface-sunken);
color: var(--blog-gray-900);
border-left-color: var(--blog-brand-300);
}
.blog-accordion__subitem.is-open
> .blog-accordion__subheading
.blog-accordion__subtrigger {
color: var(--blog-brand-700);
border-left-color: var(--blog-brand-500);
}
.blog-accordion__subchevron {
flex-shrink: 0;
width: 10px;
font-size: 0.625rem;
color: var(--blog-gray-400);
transition: transform var(--blog-dur-fast) var(--blog-ease);
}
.blog-accordion__subitem.is-open
> .blog-accordion__subheading
.blog-accordion__subchevron {
transform: rotate(90deg);
color: var(--blog-brand-600);
}
.blog-accordion__subtrigger .blog-nav-label {
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Level 3: leaf article links --- */
.blog-accordion__leaf-list {
padding: var(--blog-sp-1) 0 var(--blog-sp-1) calc(var(--blog-sp-3) + 10px);
border-left: 2px solid var(--blog-border);
margin-left: var(--blog-sp-1);
}
.blog-accordion__leaf-link {
display: block;
padding: var(--blog-sp-2) var(--blog-sp-2);
border-radius: var(--blog-radius-sm);
font-size: var(--blog-fs-xs);
font-weight: 500;
color: var(--blog-gray-600);
line-height: var(--blog-lh-tight);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease);
}
.blog-accordion__leaf-link:hover {
background: var(--blog-brand-50);
color: var(--blog-brand-700);
}
.blog-accordion__leaf-link.is-active {
color: var(--blog-brand-700);
font-weight: 700;
background: var(--blog-brand-100);
}
/* ------------------------------------------------------------------------------
4.3 Widgets (tags, mini post list)
------------------------------------------------------------------------------ */
.blog-widget {
margin-top: var(--blog-sp-8);
padding-top: var(--blog-sp-6);
border-top: 1px solid var(--blog-border);
}
.blog-widget__title {
display: flex;
align-items: center;
gap: var(--blog-sp-2);
font-size: var(--blog-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--blog-gray-500);
margin-bottom: var(--blog-sp-4);
}
.blog-widget__title i {
color: var(--blog-brand-500);
font-size: 0.8rem;
}
.blog-tags {
display: flex;
flex-wrap: wrap;
gap: var(--blog-sp-2);
}
.blog-tag {
display: inline-block;
padding: 6px 14px;
border-radius: var(--blog-radius-pill);
background: var(--blog-surface-sunken);
border: 1px solid var(--blog-border);
font-size: var(--blog-fs-xs);
font-weight: 600;
color: var(--blog-gray-600);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease),
border-color var(--blog-dur-fast) var(--blog-ease);
}
.blog-tag:hover {
background: var(--blog-brand-500);
border-color: var(--blog-brand-500);
color: var(--blog-white);
}
.blog-mini-list {
display: flex;
flex-direction: column;
gap: var(--blog-sp-1);
}
.blog-mini-post__link {
display: flex;
align-items: center;
gap: var(--blog-sp-3);
padding: var(--blog-sp-2);
border-radius: var(--blog-radius-sm);
transition: background var(--blog-dur-fast) var(--blog-ease);
}
.blog-mini-post__link:hover {
background: var(--blog-surface-sunken);
}
.blog-mini-post__thumb {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: var(--blog-radius-sm);
display: grid;
place-items: center;
color: var(--blog-white);
font-size: 0.85rem;
}
.blog-mini-post__info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.blog-mini-post__title {
font-size: var(--blog-fs-xs);
font-weight: 600;
color: var(--blog-gray-800);
line-height: var(--blog-lh-tight);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-mini-post__date {
font-size: 11px;
color: var(--blog-gray-400);
}
/* Cycle thumb gradients by position without extra markup */
.blog-mini-post:nth-child(6n + 1) .blog-mini-post__thumb {
background: linear-gradient(135deg, var(--blog-grad-1a), var(--blog-grad-1b));
}
.blog-mini-post:nth-child(6n + 2) .blog-mini-post__thumb {
background: linear-gradient(135deg, var(--blog-grad-2a), var(--blog-grad-2b));
}
.blog-mini-post:nth-child(6n + 3) .blog-mini-post__thumb {
background: linear-gradient(135deg, var(--blog-grad-3a), var(--blog-grad-3b));
}
.blog-mini-post:nth-child(6n + 4) .blog-mini-post__thumb {
background: linear-gradient(135deg, var(--blog-grad-4a), var(--blog-grad-4b));
}
.blog-mini-post:nth-child(6n + 5) .blog-mini-post__thumb {
background: linear-gradient(135deg, var(--blog-grad-5a), var(--blog-grad-5b));
}
.blog-mini-post:nth-child(6n + 6) .blog-mini-post__thumb {
background: linear-gradient(135deg, var(--blog-grad-6a), var(--blog-grad-6b));
}
/* ------------------------------------------------------------------------------
4.4 Sticky desktop behaviour + mobile drawer (off-canvas) + overlay
------------------------------------------------------------------------------ */
.blog-sidebar {
position: sticky;
top: 65px;
align-self: start;
height: calc(100vh - (2 * 35px));
}
/* Added by blog.js (initStickySidebar) once there's less than one sidebar-
height of main content left below it — detaches the sidebar from the
viewport and pins it to the bottom of .blog-layout instead, so it scrolls
away with the page naturally instead of sliding over the footer.
AUDIT — ACTION NEEDED: no initStickySidebar function exists in the
current blog.js (only initAccordion, initSidebarDrawer, initTabs,
initActiveNav, initImageFallback, initLiveSearch, initPagination are
defined there). Either that function was removed and this whole rule
(plus its two mobile-breakpoint overrides below) is now dead code, or it
lives in a version of blog.js not included in this review — worth
confirming either way. */
.blog-sidebar.blog-sidebar--released {
position: absolute;
top: auto;
left: 0;
bottom: 0;
width: var(--blog-sidebar-width);
}
.blog-sidebar__inner {
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-lg);
padding: 10px 5px 10px 10px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.blog-sidebar-overlay {
display: none;
}
/* "Blog" trigger bar — hidden on desktop; becomes visible once the sidebar
goes off-canvas in the breakpoint below. Sits above .blog-layout so it's
never part of the sidebar/main grid. */
.blog-mobile-bar {
display: none;
}
.blog-mobile-trigger {
display: none;
align-items: center;
gap: var(--blog-sp-2);
padding: 10px var(--blog-sp-4);
border-radius: var(--blog-radius-pill);
background: var(--blog-surface);
border: 1.5px solid var(--blog-border);
font-weight: 700;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-800);
box-shadow: var(--blog-shadow-sm);
transition:
border-color var(--blog-dur-fast) var(--blog-ease),
box-shadow var(--blog-dur-fast) var(--blog-ease),
transform var(--blog-dur-fast) var(--blog-ease);
}
.blog-mobile-trigger i {
color: #fff !important;
font-size: 0.95em;
}
.blog-mobile-trigger:hover {
border-color: var(--blog-brand-300);
box-shadow: var(--blog-shadow-md);
}
.blog-mobile-trigger:active {
transform: scale(0.96);
}
/* "×" close affordance inside the drawer — hidden on desktop */
.blog-sidebar__close {
display: none;
}
/* Deliberate, minimal exception to the ".blog-section only" scoping rule
at the top of this file: locking background scroll while the drawer is
open has to reach the itself. blog.js toggles this class only
while .blog-sidebar has .is-open. */
body.blog-no-scroll {
overflow: hidden;
}
.blog-sidebar__inner .blog-capcul-btn-bg {
display: block;
border-radius: 20px;
height: auto;
width: auto;
align-items: center;
justify-content: center;
margin-bottom: 12px;
background: linear-gradient(135deg, #0ea87a 0%, #0a6e50 100%);
}
.blog-sidebar__inner a.blog-capcul-btn {
display: block;
text-transform: uppercase;
padding: 7px 10px;
font-size: 14px;
font-weight: 800;
color: #ffffff;
text-decoration: none;
text-align: center;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.35) 0%,
rgba(14, 168, 122, 0.25) 100%
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.7),
inset 0 -1px 6px rgba(255, 255, 255, 0.15),
0 8px 20px rgba(6, 60, 44, 0.35),
0 2px 6px rgba(6, 60, 44, 0.2);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
@media (max-width: 992px) {
.blog-layout {
grid-template-columns: 1fr;
gap: var(--blog-sp-4);
}
.blog-section {
margin-top: 25px;
}
.blog-mobile-bar {
display: flex;
justify-content: flex-end;
position: fixed;
top: 62px; /* raise this if your global site header is fixed/sticky and overlaps */
right: 10px;
z-index: var(--blog-z-trigger);
margin-bottom: var(--blog-sp-2);
color: #fff !important;
border-radius: var(--blog-radius-pill);
background: var(--blog-brand-600);
border: 1.5px solid var(--blog-brand-600);
}
.blog-mobile-trigger {
display: inline-flex;
}
/* Off-canvas: sidebar leaves the grid, docks to the right edge of the
viewport at full height, and stays translated fully out of view until
blog.js adds .is-open. visibility is delayed on the way out (but not
on the way in) so it can't be tabbed into while hidden, without
cutting the slide-in/out transform animation short. */
.blog-sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 90vw; /* superseded by the width: min(...) declaration directly
below — harmless (last declaration wins) but redundant; safe to
delete this line if you want a cleaner diff, no visual change */
height: 100dvh;
width: min(var(--blog-sidebar-width), 85vw);
z-index: var(--blog-z-rail);
transform: translateX(100%);
visibility: hidden;
transition:
transform var(--blog-dur-base) var(--blog-ease),
visibility 0s linear var(--blog-dur-base);
}
.blog-sidebar.is-open {
transform: translateX(0);
visibility: visible;
transition:
transform var(--blog-dur-base) var(--blog-ease),
visibility 0s;
margin-top: 55px;
width: 310px;
}
.blog-sidebar.blog-sidebar--released {
/* The release mechanic is desktop-only (see blog.js) — neutralise it
here so the drawer's own fixed positioning always wins on mobile.
AUDIT: see the --released definition in section 8 above re: no
matching initStickySidebar function in the current blog.js. */
position: fixed;
top: 0;
left: auto;
right: 0;
bottom: 0;
width: min(var(--blog-sidebar-width), 85vw);
}
.blog-sidebar__inner {
width: 100%;
height: 100%;
border-radius: 0;
box-shadow: var(--blog-shadow-lg);
}
.blog-sidebar__close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-bottom: var(
--blog-sp-3
); /* both overwritten by the second
margin-bottom below — harmless but redundant, see note under the
second margin block */
margin-left: auto; /* overwritten by the second margin-left below */
border-radius: 15%;
background: var(--blog-surface-sunken) !important;
color: var(--blog-gray-600);
font-size: 1.3rem;
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease);
/* Final margin values actually applied — the four margin-* lines above
(margin-bottom, margin-left) are dead, last-declaration-wins. Safe to
delete the earlier ones for clarity; no visual change either way. */
margin-top: 0;
margin-bottom: 0;
margin-left: -10px;
margin-right: 10px;
}
.blog-sidebar__close:hover {
background: var(--blog-brand-50);
color: var(--blog-brand-700);
}
.blog-sidebar-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(16, 22, 26, 0.4);
opacity: 0;
visibility: hidden;
transition:
opacity var(--blog-dur-base) var(--blog-ease),
visibility var(--blog-dur-base) var(--blog-ease);
z-index: var(--blog-z-overlay);
}
.blog-sidebar-overlay.is-visible {
opacity: 1;
visibility: visible;
}
}
@media (max-width: 480px) {
.blog-sidebar,
.blog-sidebar.blog-sidebar--released {
width: min(var(--blog-sidebar-width), 90vw);
}
}
/* ==============================================================================
GROUP 5 — SHARED UI COMPONENTS
==============================================================================
Small building blocks reused across more than one page/template:
buttons, badges, the ripple effect, the image media-frame (with
gradient fallback) + avatar, and pagination controls.
============================================================================== */
/* ------------------------------------------------------------------------------
5.1 Buttons, badges, ripple
------------------------------------------------------------------------------ */
/* AUDIT: .blog-btn and its modifiers (--text, --outline) are not used in
index.html or blog-sidebar.html. Likely used on the blog home/category
page for card CTAs — check before removing. */
.blog-btn {
display: inline-flex;
align-items: center;
gap: var(--blog-sp-2);
font-weight: 700;
font-size: var(--blog-fs-sm);
border-radius: var(--blog-radius-pill);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease),
border-color var(--blog-dur-fast) var(--blog-ease),
transform var(--blog-dur-fast) var(--blog-ease);
}
.blog-btn i {
font-size: 0.8em;
transition: transform var(--blog-dur-fast) var(--blog-ease);
}
.blog-btn:hover i {
transform: translateX(3px);
}
.blog-btn--text {
color: var(--blog-brand-600);
padding: 4px 0;
}
.blog-btn--text:hover {
color: var(--blog-brand-700);
}
.blog-btn--outline {
color: var(--blog-brand-700);
border: 1.5px solid var(--blog-brand-300);
padding: 10px 20px;
}
.blog-btn--outline:hover {
background: var(--blog-brand-500);
border-color: var(--blog-brand-500);
color: var(--blog-white);
}
/* Ripple: pure CSS, no click-coordinate JS needed */
.blog-ripple {
position: relative;
overflow: hidden;
}
.blog-ripple::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle,
rgba(14, 168, 122, 0.35) 0%,
transparent 70%
);
opacity: 0;
transform: scale(0.4);
transition:
transform 0.5s var(--blog-ease),
opacity 0.7s var(--blog-ease);
pointer-events: none;
}
.blog-ripple:active::after {
transform: scale(1.6);
opacity: 1;
transition: 0s;
}
.blog-badge {
display: inline-flex;
align-items: center;
padding: 6px 13px;
border-radius: var(--blog-radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* AUDIT: .blog-badge--category not found in provided files — likely an
image-overlay badge on card thumbnails on the home/category page. */
.blog-badge--category {
position: absolute;
top: 14px;
left: 14px;
background: rgba(16, 22, 26, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--blog-white);
}
/* ------------------------------------------------------------------------------
5.2 Media frame (image + gradient fallback), avatar
------------------------------------------------------------------------------ */
.blog-media-frame {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.blog-media-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--blog-dur-slow) var(--blog-ease);
}
.blog-media-frame img.is-broken {
display: none;
}
/* AUDIT: .blog-media-frame__fallback-icon not found in provided files.
Note: the is-broken toggle it depends on IS wired up — blog.js's
initImageFallback() adds .is-broken to ![]()
on error — so this rule is
very likely real and just needs the markup added on affected pages. */
.blog-media-frame__fallback-icon {
display: none;
font-size: 2.75rem;
color: rgba(255, 255, 255, 0.9);
}
.blog-media-frame img.is-broken ~ .blog-media-frame__fallback-icon {
display: block;
}
/* Image zoom on card hover */
.blog-card:hover .blog-media-frame img,
.blog-featured-card:hover .blog-media-frame img {
transform: scale(1.06);
}
.blog-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--blog-white);
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
/* ------------------------------------------------------------------------------
5.3 Pagination
------------------------------------------------------------------------------ */
.blog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--blog-sp-4);
margin-top: var(--blog-sp-10);
flex-wrap: wrap;
}
/* AUDIT: .blog-pagination__list not found in provided files. Note:
.blog-pagination, .blog-pagination__btn (--prev/--next) and
.blog-pagination__link ARE confirmed — blog.js's initPagination() queries
all three directly. Only this wrapper class is unconfirmed. */
.blog-pagination__list {
display: flex;
gap: var(--blog-sp-2);
}
.blog-pagination__btn {
display: inline-flex;
align-items: center;
gap: var(--blog-sp-2);
padding: 10px 18px;
border-radius: var(--blog-radius-pill);
border: 1.5px solid var(--blog-border);
font-weight: 700;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-700);
transition:
background var(--blog-dur-fast) var(--blog-ease),
border-color var(--blog-dur-fast) var(--blog-ease),
opacity var(--blog-dur-fast) var(--blog-ease);
}
.blog-pagination__btn:hover:not(:disabled) {
border-color: var(--blog-brand-500);
color: var(--blog-brand-700);
}
.blog-pagination__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.blog-pagination__link {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-weight: 700;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
transition:
background var(--blog-dur-fast) var(--blog-ease),
color var(--blog-dur-fast) var(--blog-ease);
}
.blog-pagination__link:hover {
background: var(--blog-surface-sunken);
}
.blog-pagination__link.is-active {
background: var(--blog-brand-500);
color: var(--blog-white);
}
/* ==============================================================================
GROUP 6 — BLOG HOME PAGE
==============================================================================
Sections that make up the blog home/listing page: hero, shared
section heading, the Featured grid, Latest/Popular/Trending tabs,
the article card grid, category cards, tool cards, and the
search empty-state. Several of these were not found in the article
template or sidebar component reviewed alongside this file — see the
CSS AUDIT block at the top of this file for the full unconfirmed list
before removing anything.
============================================================================== */
/* ------------------------------------------------------------------------------
6.1 Hero
------------------------------------------------------------------------------ */
.blog-hero {
max-width: 760px;
}
/* AUDIT: .blog-hero__eyebrow not found in provided files. */
.blog-hero__eyebrow {
font-size: var(--blog-fs-sm);
font-weight: 700;
color: var(--blog-brand-600);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--blog-sp-3);
}
.blog-hero__title {
font-size: var(--blog-fs-h1);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--blog-gray-900);
margin-bottom: var(--blog-sp-4);
}
.blog-hero__desc {
font-size: 1.0625rem;
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
margin-bottom: var(--blog-sp-8);
}
/* AUDIT: .blog-hero__stats and .blog-stat (+ __num/__label) not found in
provided files — likely a stat row (e.g. "12 articles · 5 min read") used
on the blog home hero, not the single-article hero in index.html. */
.blog-hero__stats {
display: flex;
gap: var(--blog-sp-10);
flex-wrap: wrap;
}
.blog-stat {
display: flex;
flex-direction: column-reverse;
gap: 2px;
}
.blog-stat__num {
font-size: 1.6rem;
font-weight: 800;
color: var(--blog-gray-900);
}
.blog-stat__label {
font-size: var(--blog-fs-xs);
font-weight: 600;
color: var(--blog-gray-500);
}
/* ------------------------------------------------------------------------------
6.2 Shared section heading
------------------------------------------------------------------------------ */
/* AUDIT: .blog-section-heading (+ __desc, --with-tabs) not found in provided
files — this is the "Latest / Popular / Trending" heading row that sits
above .blog-tabs on the blog home page; not present in the article
template reviewed here. */
.blog-section-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--blog-sp-4);
margin-bottom: var(--blog-sp-6);
}
.blog-section-heading h2 {
font-size: var(--blog-fs-h2);
font-weight: 800;
color: var(--blog-gray-900);
letter-spacing: -0.005em;
}
.blog-section-heading h2 i {
color: #f5b400;
font-size: 0.82em;
margin-right: 6px;
}
.blog-section-heading__desc {
flex-basis: 100%;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-500);
margin-top: -12px;
}
.blog-section-heading--with-tabs {
align-items: center;
}
/* ------------------------------------------------------------------------------
6.3 Featured section
------------------------------------------------------------------------------ */
/* AUDIT: .blog-featured-grid, .blog-featured-card--primary (+ __body,
__excerpt) not found in provided files — the "Featured" section grid on
the blog home page; not present in the single-article template. */
.blog-featured-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: repeat(2, 1fr);
gap: var(--blog-sp-6);
}
.blog-featured-card {
display: flex;
flex-direction: column;
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-lg);
overflow: hidden;
transition:
transform var(--blog-dur-base) var(--blog-ease),
box-shadow var(--blog-dur-base) var(--blog-ease);
}
.blog-featured-card:hover {
transform: translateY(-4px);
box-shadow: var(--blog-shadow-lg);
}
.blog-featured-card .blog-media-frame {
aspect-ratio: 16 / 9;
}
.blog-featured-card--primary {
grid-column: 1;
grid-row: 1 / span 2;
}
.blog-featured-card--primary .blog-media-frame {
aspect-ratio: 16 / 10;
}
.blog-featured-card__body {
padding: var(--blog-sp-6);
display: flex;
flex-direction: column;
flex: 1;
}
.blog-featured-card__title {
font-size: var(--blog-fs-h3);
font-weight: 800;
line-height: 1.3;
margin-bottom: var(--blog-sp-2);
}
.blog-featured-card--primary .blog-featured-card__title {
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
}
.blog-featured-card__title a:hover {
color: var(--blog-brand-600);
}
.blog-featured-card__excerpt {
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
line-height: var(--blog-lh-normal);
margin-bottom: var(--blog-sp-4);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ------------------------------------------------------------------------------
6.4 Tabs (Latest / Popular / Trending)
------------------------------------------------------------------------------ */
/* AUDIT: .blog-tabs (the tablist wrapper) and .blog-tab-panel are not found
in provided files. Note: .blog-tab (individual tab button) IS wired up in
blog.js's initTabs(), so the JS behaviour exists and is real — only the
wrapper/panel classes are unconfirmed, most likely because the tabs UI
lives on the blog home page, not this article template. */
.blog-tabs {
display: inline-flex;
gap: var(--blog-sp-2);
border-bottom: 2px solid var(--blog-border);
}
.blog-tab {
position: relative;
padding: var(--blog-sp-2) var(--blog-sp-1);
margin: 0 var(--blog-sp-3);
font-weight: 700;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-500);
transition: color var(--blog-dur-fast) var(--blog-ease);
}
.blog-tab::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: var(--blog-brand-500);
transform: scaleX(0);
transition: transform var(--blog-dur-base) var(--blog-ease);
}
.blog-tab:hover {
color: var(--blog-gray-800);
}
.blog-tab.is-active {
color: var(--blog-brand-700);
}
.blog-tab.is-active::after {
transform: scaleX(1);
}
/* AUDIT: .blog-tab-panel not found in provided files (see note above). */
.blog-tab-panel {
margin-top: var(--blog-sp-6);
}
.blog-tab-panel[hidden] {
display: none;
}
/* ------------------------------------------------------------------------------
6.5 Blog grid + card (shared by Latest/Popular/Trending/Editor's Picks)
------------------------------------------------------------------------------ */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: var(--blog-sp-6);
}
/* AUDIT: .blog-grid--three not found in provided files. */
.blog-grid--three {
grid-template-columns: repeat(3, 1fr);
}
/* Note: .blog-card and .blog-card__title ARE confirmed in use — they're the
article card markup on index.html (Latest/Popular/Trending tabs). They
used to also be queried directly by blog.js's old page-level search
filter (initSearchFilter); that function has been removed and replaced
by initLiveSearch, which searches the sidebar's own article links
instead, so .blog-card is now purely a markup/styling concern with no
JS dependency. The detail classes below them (author, meta, excerpt,
cta, etc.) are not present in the provided files, so they're flagged
individually. */
.blog-card {
display: flex;
flex-direction: column;
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-lg);
overflow: hidden;
transition:
transform var(--blog-dur-base) var(--blog-ease),
box-shadow var(--blog-dur-base) var(--blog-ease);
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--blog-shadow-lg);
}
.blog-card .blog-media-frame {
aspect-ratio: 16 / 9;
}
/* AUDIT: .blog-card__body, __excerpt, __meta (+ __author/-name,
__meta-details, __dot, __readtime, __cta) not found in provided files. */
.blog-card__body {
padding: var(--blog-sp-5);
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card__title {
font-size: 1.05rem;
font-weight: 800;
line-height: 1.35;
margin-bottom: var(--blog-sp-2);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card__title a:hover {
color: var(--blog-brand-600);
}
.blog-card__excerpt {
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
line-height: var(--blog-lh-normal);
margin-bottom: var(--blog-sp-4);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card__meta {
display: flex;
flex-direction: column;
gap: var(--blog-sp-3);
margin-top: auto;
padding-top: var(--blog-sp-3);
border-top: 1px solid var(--blog-border);
margin-bottom: var(--blog-sp-3);
}
.blog-card__author {
display: flex;
align-items: center;
gap: var(--blog-sp-2);
}
.blog-card__author-name {
font-size: var(--blog-fs-xs);
font-weight: 700;
color: var(--blog-gray-700);
}
.blog-card__meta-details {
display: flex;
align-items: center;
gap: var(--blog-sp-2);
font-size: 12px;
color: var(--blog-gray-500);
}
.blog-card__dot {
color: var(--blog-gray-300);
}
.blog-card__readtime i {
margin-right: 3px;
}
.blog-card__cta {
align-self: flex-start;
}
/* ------------------------------------------------------------------------------
6.6 Category cards
------------------------------------------------------------------------------ */
/* AUDIT: none of the .blog-category-* classes in this section (grid, card,
__icon, __title, __desc, __count) are found in provided files. This is
likely the "Browse by Category" grid on the blog home page. */
.blog-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--blog-sp-5);
}
.blog-category-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--blog-sp-3);
padding: var(--blog-sp-6) var(--blog-sp-5);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
transition:
transform var(--blog-dur-base) var(--blog-ease),
box-shadow var(--blog-dur-base) var(--blog-ease),
border-color var(--blog-dur-base) var(--blog-ease);
}
.blog-category-card:hover {
transform: translateY(-4px);
box-shadow: var(--blog-shadow-md);
border-color: var(--blog-brand-300);
}
.blog-category-card__icon {
width: 46px;
height: 46px;
border-radius: var(--blog-radius-sm);
display: grid;
place-items: center;
background: var(--blog-brand-50);
color: var(--blog-brand-600);
font-size: 1.15rem;
transition:
background var(--blog-dur-base) var(--blog-ease),
color var(--blog-dur-base) var(--blog-ease);
}
.blog-category-card:hover .blog-category-card__icon {
background: var(--blog-brand-500);
color: var(--blog-white);
}
.blog-category-card__title {
font-size: 0.95rem;
font-weight: 800;
line-height: 1.3;
}
.blog-category-card__desc {
font-size: var(--blog-fs-xs);
color: var(--blog-gray-500);
line-height: var(--blog-lh-normal);
}
.blog-category-card__count {
margin-top: auto;
padding-top: var(--blog-sp-2);
font-size: 11px;
font-weight: 700;
color: var(--blog-brand-600);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ------------------------------------------------------------------------------
6.7 Tool cards
------------------------------------------------------------------------------ */
/* AUDIT: none of the .blog-tool-* classes in this section (grid, card,
__icon, __title, __desc, __cta) are found in provided files. Likely used
for "related tools" cards on the blog home page. */
.blog-tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--blog-sp-5);
}
.blog-tool-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--blog-sp-2);
padding: var(--blog-sp-6);
background: var(--blog-surface-sunken);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
transition:
transform var(--blog-dur-base) var(--blog-ease),
box-shadow var(--blog-dur-base) var(--blog-ease),
background var(--blog-dur-base) var(--blog-ease);
}
.blog-tool-card:hover {
transform: translateY(-4px);
box-shadow: var(--blog-shadow-md);
background: var(--blog-surface);
}
.blog-tool-card__icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--blog-white);
color: var(--blog-brand-600);
font-size: 1.1rem;
box-shadow: var(--blog-shadow-sm);
margin-bottom: var(--blog-sp-1);
}
.blog-tool-card__title {
font-size: 1rem;
font-weight: 800;
}
.blog-tool-card__desc {
font-size: var(--blog-fs-xs);
color: var(--blog-gray-600);
line-height: var(--blog-lh-normal);
margin-bottom: var(--blog-sp-2);
}
.blog-tool-card__cta {
margin-top: auto;
}
.blog-tools-section .blog-tool-grid--5 a {
text-decoration: none !important;
}
.blog-tools-section .blog-tool-grid--5 h3 {
margin-bottom: 10px !important;
margin-top: 10px !important;
font-size: 14px !important;
}
.blog-tools-section .blog-tool-grid--5 p {
font-size: 12px !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
}
/* ------------------------------------------------------------------------------
6.8 Search empty state
------------------------------------------------------------------------------ */
/* UPDATE: the JS function that looked these ids up (initSearchFilter,
#blogSearchEmpty / #blogSearchClear) has been removed entirely and
replaced by initLiveSearch (see blog.js section 7), which searches the
sidebar's own article links and renders its own dropdown/empty-state
(.blog-search-results / .blog-search-results__empty, section 4.1b)
instead of using these ids. Any #blogSearchEmpty / #blogSearchClear
markup still sitting in index.html is no longer wired to any JS —
these rules are now dead and can be removed next time that markup is
cleaned up. */
.blog-search-empty {
display: none;
padding: var(--blog-sp-4) var(--blog-sp-5);
background: var(--blog-surface-sunken);
border: 1px dashed var(--blog-gray-300);
border-radius: var(--blog-radius-md);
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
}
.blog-search-empty:not([hidden]) {
display: block;
}
.blog-search-empty__clear {
font-weight: 700;
color: var(--blog-brand-600);
text-decoration: underline;
}
/* ============================================================================
BLOG ARTICLE (SINGLE POST) — ADDITIONAL STYLES
============================================================================
Extends blog.css. Every rule here is scoped under .blog-main so it can
never leak outside the article, and every selector is written to safely
out-specificity the base resets in blog.css (section 2) without needing
!important anywhere.
Load this file AFTER blog.css:
Contents:
1. Breadcrumb
2. Post header (badge, meta bar)
3. Featured media + in-article image placeholders
4. Table of contents
5. Article typography (headings, paragraphs, lists, tables, blockquote)
6. Callout boxes (tip / warning / note / expert)
7. Inline tool CTA
8. Checklist
9. FAQ accordion
10. About box
11. Inline citation links
12. Related articles grid
13. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
7.1 Breadcrumb
------------------------------------------------------------------------------ */
.blog-main .blog-post__breadcrumb {
margin-bottom: var(--blog-sp-5);
}
.blog-main .blog-post__breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
font-size: var(--blog-fs-xs);
font-weight: 600;
color: var(--blog-gray-500);
}
.blog-main .blog-post__breadcrumb li {
display: flex;
align-items: center;
gap: 8px;
}
.blog-main .blog-post__breadcrumb i {
font-size: 0.6rem;
color: var(--blog-gray-300);
}
.blog-main .blog-post__breadcrumb a:hover {
color: var(--blog-brand-600);
}
.blog-main .blog-post__breadcrumb span[aria-current="page"] {
color: var(--blog-gray-700);
font-weight: 700;
}
/* ------------------------------------------------------------------------------
7.2 Post header (badge, meta bar)
------------------------------------------------------------------------------ */
.blog-main .blog-post__hero {
max-width: 100%;
margin-bottom: 0;
}
.blog-main .blog-post__hero .blog-hero__desc {
margin-bottom: 0;
max-width: 68ch;
}
.blog-main .blog-badge--solid {
background: var(--blog-brand-500);
color: var(--blog-white);
margin-bottom: var(--blog-sp-4);
}
.blog-main .blog-post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--blog-sp-2) var(--blog-sp-6);
padding: var(--blog-sp-4) 0;
margin: var(--blog-sp-6) 0 var(--blog-sp-8);
border-top: 1px solid var(--blog-border);
border-bottom: 1px solid var(--blog-border);
font-size: var(--blog-fs-sm);
color: var(--blog-gray-500);
}
.blog-main .blog-post__meta-item {
display: flex;
align-items: center;
gap: 7px;
}
.blog-main .blog-post__meta-item i {
color: var(--blog-brand-500);
font-size: 0.95em;
}
.blog-main .blog-post__author {
font-weight: 700;
color: var(--blog-gray-800);
}
.blog-main .blog-post__author .blog-avatar {
font-size: 10px;
}
/* ------------------------------------------------------------------------------
7.3 Featured media + in-article image placeholders
------------------------------------------------------------------------------ */
.blog-main .blog-post figure {
margin: var(--blog-sp-8) 0;
}
.blog-main .blog-post__featured-media {
margin: 0 0 var(--blog-sp-8);
}
.blog-main .blog-img-placeholder {
aspect-ratio: 16 / 9;
border-radius: var(--blog-radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--blog-sp-3);
color: var(--blog-white);
text-align: center;
padding: var(--blog-sp-5);
}
.blog-main .blog-post__featured-media .blog-img-placeholder {
aspect-ratio: 21 / 9;
}
.blog-main .blog-img-placeholder i {
font-size: 2.5rem;
opacity: 0.92;
}
.blog-main .blog-img-placeholder span {
font-size: var(--blog-fs-sm);
font-weight: 700;
opacity: 0.96;
max-width: 440px;
line-height: var(--blog-lh-tight);
}
.blog-main .blog-post figcaption {
font-size: var(--blog-fs-xs);
color: var(--blog-gray-500);
text-align: center;
margin-top: var(--blog-sp-3);
line-height: var(--blog-lh-normal);
}
.blog-main .blog-post__chart {
width: 100%;
height: auto;
display: block;
}
/* ------------------------------------------------------------------------------
7.4 Table of contents
------------------------------------------------------------------------------ */
.blog-main .blog-toc {
background: var(--blog-surface-sunken);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-lg);
padding: var(--blog-sp-6);
margin: 0 0 var(--blog-sp-10);
}
.blog-main .blog-toc__title {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--blog-fs-sm);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--blog-gray-800);
margin: 0 0 var(--blog-sp-4);
}
.blog-main .blog-toc__title i {
color: var(--blog-brand-500);
}
.blog-main .blog-toc__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--blog-sp-1) var(--blog-sp-6);
list-style: none;
margin: 0;
padding: 0;
}
.blog-main .blog-toc__list a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 7px 4px;
font-size: var(--blog-fs-sm);
font-weight: 600;
color: var(--blog-gray-700);
border-radius: var(--blog-radius-sm);
transition: color var(--blog-dur-fast) var(--blog-ease);
}
.blog-main .blog-toc__list a:hover {
color: var(--blog-brand-600);
}
.blog-main .blog-toc__num {
flex-shrink: 0;
font-weight: 800;
color: var(--blog-brand-500);
font-size: var(--blog-fs-xs);
}
/* ------------------------------------------------------------------------------
7.5 Article typography (headings, paragraphs, lists, tables, blockquote)
------------------------------------------------------------------------------ */
.blog-main .blog-post__body h2 {
font-size: var(--blog-fs-h2);
font-weight: 800;
color: var(--blog-gray-900);
letter-spacing: -0.005em;
line-height: 1.25;
margin: var(--blog-sp-12) 0 var(--blog-sp-4);
scroll-margin-top: 90px;
}
.blog-main .blog-post__body h3 {
font-size: var(--blog-fs-h3);
font-weight: 800;
color: var(--blog-gray-900);
line-height: 1.3;
margin: var(--blog-sp-8) 0 var(--blog-sp-3);
scroll-margin-top: 90px;
}
.blog-main .blog-post__body h4 {
font-size: 1rem;
font-weight: 700;
color: var(--blog-gray-800);
margin: var(--blog-sp-5) 0 var(--blog-sp-2);
}
.blog-main .blog-post__body p {
font-size: var(--blog-fs-body);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-700);
margin: 0 0 var(--blog-sp-4);
text-align: justify;
}
.blog-main .blog-post__body ul,
.blog-main .blog-post__body ol {
margin: 0 0 var(--blog-sp-5);
padding-left: 1.3em;
display: flex;
flex-direction: column;
gap: 9px;
}
.blog-main .blog-post__body ul {
list-style: disc;
}
.blog-main .blog-post__body ol {
list-style: decimal;
}
.blog-main .blog-post__body li {
line-height: var(--blog-lh-normal);
color: var(--blog-gray-700);
padding-left: 4px;
}
.blog-main .blog-post__body li::marker {
color: var(--blog-brand-500);
font-weight: 700;
}
.blog-main .blog-post__body strong {
color: var(--blog-gray-900);
font-weight: 700;
}
.blog-main .blog-post__body a:not(.blog-btn) {
color: var(--blog-brand-600);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--blog-brand-300);
text-underline-offset: 2px;
transition: color var(--blog-dur-fast) var(--blog-ease);
}
.blog-main .blog-post__body a:not(.blog-btn):hover {
color: var(--blog-brand-700);
text-decoration-color: var(--blog-brand-600);
}
.blog-main .blog-table-wrap {
overflow-x: auto;
margin: 0 0 var(--blog-sp-6);
border-radius: var(--blog-radius-md);
border: 1px solid var(--blog-border);
}
.blog-main .blog-post__body table {
width: 100%;
border-collapse: collapse;
font-size: var(--blog-fs-sm);
}
.blog-main .blog-post__body caption {
caption-side: top;
text-align: left;
font-size: var(--blog-fs-xs);
font-weight: 700;
color: var(--blog-gray-500);
padding: var(--blog-sp-3) var(--blog-sp-4) var(--blog-sp-2);
background: var(--blog-surface-sunken);
}
.blog-main .blog-post__body th,
.blog-main .blog-post__body td {
padding: 12px 16px;
border-top: 1px solid var(--blog-border);
text-align: left;
line-height: var(--blog-lh-tight);
}
.blog-main .blog-post__body thead th {
background: var(--blog-surface-sunken);
font-weight: 700;
color: var(--blog-gray-800);
border-top: none;
}
.blog-main .blog-post__body tbody th {
font-weight: 700;
color: var(--blog-gray-800);
}
.blog-main .blog-post__body tbody tr:nth-child(even) {
background: var(--blog-gray-50);
}
.blog-main .blog-post__body blockquote.blog-disclaimer {
border-left: 4px solid var(--blog-gray-300);
background: var(--blog-gray-50);
padding: var(--blog-sp-4) var(--blog-sp-5);
border-radius: 0 var(--blog-radius-md) var(--blog-radius-md) 0;
margin: var(--blog-sp-10) 0;
}
.blog-main .blog-post__body blockquote.blog-disclaimer p {
margin: 0;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
}
.blog-main .blog-post__body blockquote.blog-disclaimer strong {
color: var(--blog-gray-800);
}
/* ------------------------------------------------------------------------------
7.6 Callout boxes (tip / warning / note / expert)
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-callout {
display: flex;
gap: var(--blog-sp-3);
align-items: flex-start;
padding: var(--blog-sp-4) var(--blog-sp-5);
border-radius: var(--blog-radius-md);
border: 1px solid var(--blog-border);
border-left-width: 4px;
background: var(--blog-surface-sunken);
margin: var(--blog-sp-6) 0;
}
.blog-main .blog-post__body .blog-callout__icon {
flex-shrink: 0;
margin-top: 3px;
font-size: 1.05rem;
}
.blog-main .blog-post__body .blog-callout__body p {
margin: 0 0 4px;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
}
.blog-main .blog-post__body .blog-callout__body p:last-child {
margin-bottom: 0;
}
.blog-main .blog-post__body p.blog-callout__title {
font-weight: 800;
color: var(--blog-gray-900);
font-size: var(--blog-fs-sm);
}
.blog-main .blog-post__body .blog-callout--tip {
border-left-color: var(--blog-brand-500);
}
.blog-main .blog-post__body .blog-callout--tip .blog-callout__icon {
color: var(--blog-brand-600);
}
.blog-main .blog-post__body .blog-callout--note {
border-left-color: var(--blog-grad-5a);
background: #f0f9ff;
}
.blog-main .blog-post__body .blog-callout--note .blog-callout__icon {
color: var(--blog-grad-5b);
}
.blog-main .blog-post__body .blog-callout--warning {
border-left-color: var(--blog-grad-3a);
background: #fff8ec;
}
.blog-main .blog-post__body .blog-callout--warning .blog-callout__icon {
color: var(--blog-grad-3b);
}
.blog-main .blog-post__body .blog-callout--expert {
border-left-color: var(--blog-grad-2a);
background: #f5f5ff;
}
.blog-main .blog-post__body .blog-callout--expert .blog-callout__icon {
color: var(--blog-grad-2b);
}
/* ------------------------------------------------------------------------------
7.7 Inline tool CTA
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-inline-tool {
display: flex;
gap: var(--blog-sp-4);
align-items: flex-start;
background: var(--blog-brand-50);
border: 1px solid var(--blog-brand-100);
border-radius: var(--blog-radius-md);
padding: var(--blog-sp-5);
margin: var(--blog-sp-6) 0;
}
.blog-main .blog-post__body .blog-inline-tool__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--blog-brand-500);
color: var(--blog-white);
font-size: 1.1rem;
}
.blog-main .blog-post__body .blog-inline-tool__body {
flex: 1;
min-width: 0;
}
.blog-main .blog-post__body .blog-inline-tool__body p {
margin: 0 0 4px;
}
.blog-main .blog-post__body .blog-inline-tool__body p:last-child {
margin-bottom: 0;
}
.blog-main .blog-post__body p.blog-inline-tool__label {
font-size: var(--blog-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 800;
color: var(--blog-brand-600);
}
.blog-main .blog-post__body p.blog-inline-tool__title {
font-weight: 800;
color: var(--blog-gray-900);
font-size: var(--blog-fs-body);
}
/* ------------------------------------------------------------------------------
7.8 Checklist
------------------------------------------------------------------------------ */
.blog-main .blog-post__body ul.blog-checklist {
list-style: none;
padding-left: 0;
}
.blog-main .blog-post__body .blog-checklist li {
display: flex;
gap: 10px;
align-items: flex-start;
padding-left: 0;
}
.blog-main .blog-post__body .blog-checklist li::marker {
content: "";
}
.blog-main .blog-post__body .blog-checklist li i {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--blog-brand-500);
color: var(--blog-white);
font-size: 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 4px;
}
/* ------------------------------------------------------------------------------
7.9 FAQ accordion
------------------------------------------------------------------------------ */
.blog-main .blog-faq {
display: flex;
flex-direction: column;
gap: var(--blog-sp-3);
}
.blog-main .blog-faq__item {
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
background: var(--blog-surface);
overflow: hidden;
}
.blog-main .blog-faq__item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--blog-sp-4);
padding: var(--blog-sp-4) var(--blog-sp-5);
font-weight: 700;
font-size: var(--blog-fs-body);
color: var(--blog-gray-900);
transition: background var(--blog-dur-fast) var(--blog-ease);
}
.blog-main .blog-faq__item summary::-webkit-details-marker {
display: none;
}
.blog-main .blog-faq__item summary::marker {
content: "";
}
.blog-main .blog-faq__item summary:hover {
background: var(--blog-surface-sunken);
}
.blog-main .blog-faq__chevron {
flex-shrink: 0;
color: var(--blog-brand-500);
font-size: 0.8rem;
transition: transform var(--blog-dur-base) var(--blog-ease);
}
.blog-main .blog-faq__item[open] .blog-faq__chevron {
transform: rotate(180deg);
}
.blog-main .blog-faq__answer {
padding: 0 var(--blog-sp-5) var(--blog-sp-5);
}
.blog-main .blog-faq__answer p {
margin: 0;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
line-height: var(--blog-lh-normal);
}
/* ------------------------------------------------------------------------------
7.10 About box
------------------------------------------------------------------------------ */
.blog-main .blog-about {
margin-top: var(--blog-sp-12);
padding: var(--blog-sp-8);
background: var(--blog-surface-sunken);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-lg);
}
.blog-main .blog-about h2 {
font-size: var(--blog-fs-h2);
font-weight: 800;
color: var(--blog-gray-900);
margin: 0 0 var(--blog-sp-3);
}
.blog-main .blog-about p {
font-size: var(--blog-fs-body);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-700);
margin: 0 0 var(--blog-sp-3);
}
.blog-main .blog-about p:last-child {
margin-bottom: 0;
}
.blog-main .blog-about a {
color: var(--blog-brand-600);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--blog-brand-300);
}
.blog-main .blog-about a:hover {
color: var(--blog-brand-700);
}
/* ------------------------------------------------------------------------------
7.11 Inline citation links
------------------------------------------------------------------------------ */
.blog-main .blog-post__body a.blog-citation {
font-size: 0.82em;
font-weight: 600;
color: var(--blog-gray-500);
text-decoration: none;
border-bottom: 1px dotted var(--blog-gray-400);
}
.blog-main .blog-post__body a.blog-citation:hover {
color: var(--blog-brand-600);
border-bottom-color: var(--blog-brand-500);
}
/* ------------------------------------------------------------------------------
7.12 Related articles grid
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-sp-4);
margin: 0 0 var(--blog-sp-5);
}
.blog-main .blog-post__body .blog-related-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--blog-sp-2);
padding: var(--blog-sp-5);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
transition:
transform var(--blog-dur-base) var(--blog-ease),
box-shadow var(--blog-dur-base) var(--blog-ease),
border-color var(--blog-dur-base) var(--blog-ease);
}
.blog-main .blog-post__body .blog-related-card:hover {
transform: translateY(-3px);
box-shadow: var(--blog-shadow-md);
border-color: var(--blog-brand-300);
}
.blog-main .blog-post__body .blog-related-card__icon {
width: 40px;
height: 40px;
border-radius: var(--blog-radius-sm);
display: grid;
place-items: center;
background: var(--blog-brand-50);
color: var(--blog-brand-600);
font-size: 1.05rem;
transition:
background var(--blog-dur-base) var(--blog-ease),
color var(--blog-dur-base) var(--blog-ease);
}
.blog-main .blog-post__body .blog-related-card:hover .blog-related-card__icon {
background: var(--blog-brand-500);
color: var(--blog-white);
}
.blog-main .blog-post__body .blog-related-card__title {
font-size: 0.95rem;
font-weight: 800;
color: var(--blog-gray-900);
line-height: 1.3;
}
.blog-main .blog-post__body .blog-related-card__desc {
font-size: var(--blog-fs-xs);
color: var(--blog-gray-500);
line-height: var(--blog-lh-normal);
}
/* ------------------------------------------------------------------------------
7.13 About the author (in-article)
Merged in from blog-article-styles.css — distinct from the site-level
"About box" in 7.10 above; this is the author bio block that appears
inline at the end of an article body.
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-author {
display: flex;
gap: var(--blog-sp-4);
align-items: flex-start;
margin: var(--blog-sp-10) 0;
padding: var(--blog-sp-6);
background: var(--blog-surface-sunken);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-lg);
}
.blog-main .blog-post__body .blog-author__avatar {
width: 44px;
height: 44px;
font-size: 13px;
flex-shrink: 0;
}
.blog-main .blog-post__body .blog-author__body {
flex: 1;
min-width: 0;
}
.blog-main .blog-post__body .blog-author__body h2 {
margin: 0 0 var(--blog-sp-2);
font-size: var(--blog-fs-h3);
}
.blog-main .blog-post__body .blog-author__body p {
margin: 0;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-600);
}
/* ------------------------------------------------------------------------------
7.14 Article-scoped responsive tweaks
------------------------------------------------------------------------------ */
@media (max-width: 900px) {
.blog-main .blog-post__body .blog-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.blog-main .blog-toc__list {
grid-template-columns: 1fr;
}
.blog-main .blog-post__body .blog-inline-tool {
flex-direction: column;
}
.blog-main .blog-post__meta {
gap: var(--blog-sp-2) var(--blog-sp-4);
}
.blog-main .blog-post__body .blog-callout {
flex-direction: column;
}
/* Merged from blog-article-styles.css */
.blog-main .blog-post__body .blog-author {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 560px) {
.blog-main .blog-post__body .blog-related-grid {
grid-template-columns: 1fr;
}
}
/* ==============================================================================
GROUP 8 — ACCESSIBILITY
==============================================================================
Global focus-visible treatment and reduced-motion support. Kept as
its own group (rather than folded into Reset & Base) so it's easy to
find and audit on its own.
============================================================================== */
/* ------------------------------------------------------------------------------
8.1 Focus-visible, reduced motion
------------------------------------------------------------------------------ */
.blog-section a:focus-visible,
.blog-section button:focus-visible,
.blog-section input:focus-visible {
outline: 2.5px solid var(--blog-brand-500);
outline-offset: 2px;
border-radius: var(--blog-radius-sm);
}
.blog-search__input:focus-visible {
outline: none; /* already gets the box-shadow treatment above */
}
@media (prefers-reduced-motion: reduce) {
.blog-section,
.blog-section * {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ============================================================================
RESPONSIVE BREAKPOINTS
Desktop (default) → Laptop (≤1200px) → Tablet (≤992px, rail sidebar begins)
→ Mobile (≤768px) → Small Mobile (≤480px)
============================================================================ */
/* ---- Laptop ---- */
@media (max-width: 1200px) {
.blog-main {
gap: var(--blog-sp-10);
}
.blog-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.blog-category-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}
/* ---- Tablet (sidebar becomes a collapsible rail — see section 8) ---- */
@media (max-width: 992px) {
.blog-hero__stats {
gap: var(--blog-sp-8);
}
.blog-featured-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.blog-featured-card--primary {
grid-column: 1;
grid-row: auto;
}
.blog-grid--three {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
/* ---- Mobile ---- */
@media (max-width: 768px) {
.blog-layout {
gap: var(--blog-sp-3);
}
.blog-main {
gap: var(--blog-sp-8);
padding-block: 0 var(--blog-sp-12);
}
.blog-hero__stats {
gap: var(--blog-sp-6);
}
.blog-section-heading {
margin-bottom: var(--blog-sp-4);
}
.blog-grid {
grid-template-columns: 1fr;
}
.blog-grid--three {
grid-template-columns: 1fr;
}
.blog-category-grid {
grid-template-columns: repeat(2, 1fr);
}
.blog-tool-grid {
grid-template-columns: 1fr;
}
.blog-tabs {
gap: 0;
}
.blog-tab {
margin: 0 var(--blog-sp-2);
font-size: var(--blog-fs-xs);
}
}
/* ---- Small Mobile ---- */
@media (max-width: 480px) {
.blog-sidebar__inner {
padding: var(--blog-sp-4);
}
.blog-hero__title {
letter-spacing: -0.005em;
}
.blog-hero__stats {
gap: var(--blog-sp-5);
width: 100%;
}
.blog-category-grid {
grid-template-columns: 1fr 1fr;
gap: var(--blog-sp-3);
}
.blog-category-card {
padding: var(--blog-sp-4);
}
.blog-featured-card__body,
.blog-card__body {
padding: var(--blog-sp-4);
}
.blog-pagination {
gap: var(--blog-sp-2);
}
.blog-pagination__btn .blog-nav-label {
display: none; /* icon-only prev/next to save space */
}
}
/* ============================================================================
PREGNANCY WEEK-BY-WEEK GUIDE — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY. Every other component on this page (hero,
TOC, callouts, tables, checklists, inline tool box, related grid, FAQ,
about section) reuses existing blog.css classes and needs nothing new.
The one exception is the trimester overview grid below the "Pregnancy by
Trimester" heading — there's no existing non-link "info card" component
in blog.css to repurpose (.blog-related-card is anchor-based and styled
for outbound links), so a small, scoped component is added here instead.
Colors are not invented: they're pulled directly from values already
present elsewhere on this page (theme-color #0ea87a, and the grays/ambers
used in the inline BBT-style SVG charts already shipped on the site), so
this stays visually consistent without guessing at undocumented tokens.
Nothing here redeclares or overrides an existing blog.css selector.
============================================================================ */
.blog-trimester-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin: 1.75rem 0;
}
.blog-trimester-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e5e7eb;
border-left: 4px solid #0ea87a;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.blog-trimester-card__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #0ea87a;
}
.blog-trimester-card__weeks {
font-size: 0.9rem;
font-weight: 600;
color: #374151;
}
.blog-trimester-card__title {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
margin: 0;
line-height: 1.3;
}
.blog-trimester-card__desc {
font-size: 0.925rem;
line-height: 1.55;
color: #374151;
margin: 0;
}
/* Mobile-first: stack the cards below tablet width so nothing gets
cramped next to the fixed-width sidebar drawer breakpoint used
elsewhere on the blog (see blog.js DRAWER_BREAKPOINT, 992px). */
@media (max-width: 768px) {
.blog-trimester-grid {
grid-template-columns: 1fr;
}
.blog-main .blog-post__body p {
text-align: left;
}
}
/* Respect reduced-motion / high-contrast preferences for the small
amount of visual weight this component adds. */
@media (prefers-reduced-motion: reduce) {
.blog-trimester-card {
transition: none;
}
}
/* ============================================================================
HOW TO CALCULATE YOUR DAILY MACRO AND PROTEIN NEEDS — SUPPLEMENTAL STYLES
============================================================================
Additive only — every other component on this page (hero, TOC, callouts,
tables, checklist, inline tool box, related grid, FAQ, about box, author
box, citations) reuses existing blog.css classes and needs nothing new.
This file adds exactly ONE new component: the formula box, used to set
calculation formulas apart from surrounding prose in the step-by-step
section. Nothing here redeclares or overrides an existing blog.css
selector — this file is meant to be appended to the end of blog.css, or
linked as its own stylesheet loaded after blog.css (see index.html head).
Colors and spacing are not invented: every value below reuses a custom
property already defined on .blog-section in blog.css (Group 1, Design
Tokens), so the component stays visually consistent with the rest of the
site without guessing at undocumented values.
Contents:
1. Formula box (label, equation, note)
2. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Formula box
Scoped under .blog-main .blog-post__body, matching the specificity
pattern every other article-body component in blog.css already uses
(see blog.css section 7.6–7.9 for the same .blog-main .blog-post__body
prefix on callouts, the inline tool box, and the checklist).
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-formula-box {
margin: var(--blog-sp-6) 0;
padding: var(--blog-sp-5);
background: var(--blog-gray-900);
border-radius: var(--blog-radius-md);
}
.blog-main .blog-post__body p.blog-formula-box__label {
font-size: var(--blog-fs-xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--blog-brand-300);
margin: 0 0 var(--blog-sp-3);
}
.blog-main .blog-post__body p.blog-formula-box__equation {
margin: 0 0 var(--blog-sp-3);
text-align: left;
}
.blog-main .blog-post__body .blog-formula-box__equation code {
display: block;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1rem;
line-height: 1.7;
color: var(--blog-white);
background: transparent;
padding: 0;
white-space: normal;
}
.blog-main .blog-post__body .blog-formula-box__note {
font-size: var(--blog-fs-sm);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-300);
margin: 0;
text-align: left;
}
.blog-main .blog-post__body .blog-formula-box__note:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------------------------
2. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 for the other body components, kept here as its own rule rather
than edited into that existing media query block.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-formula-box {
padding: var(--blog-sp-4);
}
.blog-main .blog-post__body .blog-formula-box__equation code {
font-size: 0.9rem;
}
}
/* ============================================================================
HOW BLOOD ALCOHOL CONCENTRATION IS CALCULATED — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used for
the pregnancy-guide supplement at the bottom of blog.css. Every other
component this article needs (hero, TOC, callouts, checklist, tables,
inline tool box, related grid, FAQ accordion, author box, and the
inline SVG chart via .blog-post__chart) already exists in blog.css and
is reused as-is. Nothing here redeclares or overrides an existing
blog.css selector.
The one gap: blog.css has no component built for displaying a math
formula with enough visual weight to stand apart from body paragraphs.
.blog-callout is for tips/warnings, .blog-inline-tool is for a tool
CTA — neither fits a formula. This adds a small, scoped "formula box"
component instead.
Colors are not invented: every value below is pulled from custom
properties already defined in blog.css's design-token block
(--blog-gray-900, --blog-brand-300, --blog-white, --blog-gray-300),
so this stays visually consistent with the rest of the site without
guessing at new tokens.
Append this file's contents to the end of blog.css, or load it as an
additional after blog.css — either works since every selector
here is scoped under .blog-main .blog-post__body and cannot leak.
============================================================================ */
.blog-main .blog-post__body .blog-formula-box {
background: var(--blog-gray-900);
border-radius: var(--blog-radius-md);
padding: var(--blog-sp-6);
margin: var(--blog-sp-6) 0;
overflow-x: auto;
}
.blog-main .blog-post__body .blog-formula-box__label {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--blog-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--blog-brand-300);
margin: 0 0 var(--blog-sp-3);
}
.blog-main .blog-post__body .blog-formula-box__formula {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1.05rem;
line-height: 1.7;
color: var(--blog-white);
white-space: pre-wrap;
margin: 0;
}
.blog-main .blog-post__body .blog-formula-box__key {
margin: var(--blog-sp-4) 0 0;
padding-top: var(--blog-sp-4);
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
gap: 6px;
}
.blog-main .blog-post__body .blog-formula-box__key p {
margin: 0;
font-size: var(--blog-fs-sm);
color: var(--blog-gray-300);
line-height: var(--blog-lh-normal);
}
.blog-main .blog-post__body .blog-formula-box__key strong {
color: var(--blog-white);
font-weight: 700;
}
/* Small mobile: shrink the monospace formula so it doesn't force
horizontal scrolling on narrow viewports. */
@media (max-width: 480px) {
.blog-main .blog-post__body .blog-formula-box {
padding: var(--blog-sp-4);
}
.blog-main .blog-post__body .blog-formula-box__formula {
font-size: 0.9rem;
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-formula-box {
transition: none;
}
}
/* ============================================================================
REALISTIC MONTHLY RETURNS FOR COMPOUNDING FOREX ACCOUNTS — SUPPLEMENTAL
STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used by the
other per-article supplements at the bottom of blog.css (the pregnancy
trimester grid, and the two "formula box" blocks). Every other component
this article needs — hero, TOC, callouts, checklist, tables, inline tool
box, related grid, FAQ accordion, author box, and the formula box used for
the compounding formula — already exists in blog.css and is reused as-is.
Nothing in this file redeclares or overrides an existing blog.css
selector.
The one gap: blog.css has no component for showing a short set of
side-by-side risk/return profiles (Conservative / Moderate / Aggressive).
.blog-related-card is anchor-based and styled for outbound links,
.blog-callout is a single full-width note, and .blog-trimester-card
assumes exactly three unstyled-variant siblings — none of those fit a
3-way comparison where each card also needs its own accent color. This
adds a small, scoped "profile card" component instead.
Selectors are scoped under .blog-main .blog-post__body, matching the
specificity pattern used by the callout, inline-tool, checklist, and
formula-box components already in blog.css (rather than the older,
unprefixed .blog-trimester-card pattern), so these cards render correctly
regardless of the base .blog-main .blog-post__body p rules.
Colors are not invented: every accent below reuses a custom property
already defined in blog.css's design-token block (--blog-brand-500,
--blog-brand-50, --blog-grad-2a, --blog-grad-3a), paired with the exact
same background tints blog.css already uses for its --expert and
--warning callout variants. Conservative reuses the brand green already
used for the --tip callout, moderate reuses the same indigo already used
for the --expert callout, and aggressive reuses the same amber already
used for the --warning callout, so the color meaning (safe → balanced →
risk) matches how the rest of the site already uses these colors.
Load this file AFTER blog.css:
Contents:
1. Profile card grid
2. Profile card variants (conservative / moderate / aggressive)
3. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Profile card grid
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-profile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-sp-5);
margin: var(--blog-sp-6) 0;
}
.blog-main .blog-post__body .blog-profile-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--blog-sp-5);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-left-width: 4px;
border-radius: var(--blog-radius-md);
}
.blog-main .blog-post__body p.blog-profile-card__badge {
display: inline-flex;
align-self: flex-start;
padding: 3px 10px;
border-radius: var(--blog-radius-pill);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 4px;
}
.blog-main .blog-post__body p.blog-profile-card__rate {
font-size: 1.4rem;
font-weight: 800;
color: var(--blog-gray-900);
margin: 0;
}
.blog-main .blog-post__body p.blog-profile-card__title {
font-size: var(--blog-fs-sm);
font-weight: 700;
color: var(--blog-gray-800);
margin: 0;
}
.blog-main .blog-post__body p.blog-profile-card__desc {
font-size: var(--blog-fs-xs);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
text-align: left;
margin: 0;
}
/* ------------------------------------------------------------------------------
2. Profile card variants
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-profile-card--conservative {
border-left-color: var(--blog-brand-500);
background: var(--blog-brand-50);
}
.blog-main
.blog-post__body
.blog-profile-card--conservative
p.blog-profile-card__badge {
background: var(--blog-brand-500);
color: var(--blog-white);
}
.blog-main .blog-post__body .blog-profile-card--moderate {
border-left-color: var(--blog-grad-2a);
background: #f5f5ff;
}
.blog-main
.blog-post__body
.blog-profile-card--moderate
p.blog-profile-card__badge {
background: var(--blog-grad-2a);
color: var(--blog-white);
}
.blog-main .blog-post__body .blog-profile-card--aggressive {
border-left-color: var(--blog-grad-3a);
background: #fff8ec;
}
.blog-main
.blog-post__body
.blog-profile-card--aggressive
p.blog-profile-card__badge {
background: var(--blog-grad-3a);
color: var(--blog-white);
}
/* ------------------------------------------------------------------------------
3. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 for other body components (inline tool, callout, author box), kept
here as its own rule rather than edited into that existing media query.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-profile-grid {
grid-template-columns: 1fr;
gap: var(--blog-sp-3);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-profile-card {
transition: none;
}
}
/* ============================================================================
WHAT DO YOUR SUN, MOON, AND RISING SIGNS MEAN — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used by the
other per-article supplements at the bottom of blog.css (the pregnancy
trimester grid, the two "formula box" blocks, and the forex profile-card
grid). Every other component this article needs — hero, TOC, callouts,
checklist, tables, inline tool box, related grid, FAQ accordion, author
box — already exists in blog.css and is reused as-is. Nothing in this file
redeclares or overrides an existing blog.css selector.
The one gap: blog.css has no component for a short "at a glance" summary
of three parallel concepts, each with its own icon and accent color.
.blog-related-card is anchor-based and styled for outbound links,
.blog-callout is a single full-width note, and .blog-trimester-card /
.blog-profile-card come closest but neither carries an icon badge. This
adds a small, scoped "big three card" component instead, modeled on the
same proven shape (left accent border, scoped under
.blog-main .blog-post__body) as .blog-profile-card.
Colors are not invented: each accent below reuses a custom property
already defined in blog.css's design-token block. Sun reuses the amber
already used for the --warning callout (--blog-grad-3a/3b), Moon reuses
the sky blue already used for the --note callout (--blog-grad-5a/5b), and
Rising reuses the violet used elsewhere only for the 6th mini-post-thumb
gradient cycle (--blog-grad-6a/6b) — giving that pair its first dedicated
use as a named accent, which fits the "first impression / mask" idea
Rising signs are usually described with.
Load this file AFTER blog.css:
Contents:
1. Big Three card grid
2. Big Three card variants (sun / moon / rising)
3. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Big Three card grid
Scoped under .blog-main .blog-post__body, matching the specificity
pattern every other article-body component in blog.css already uses
(see blog.css sections 7.6–7.9 and the forex profile-card supplement for
the same .blog-main .blog-post__body prefix).
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-bigthree-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-sp-5);
margin: var(--blog-sp-6) 0;
}
.blog-main .blog-post__body .blog-bigthree-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: var(--blog-sp-5);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-left-width: 4px;
border-radius: var(--blog-radius-md);
}
.blog-main .blog-post__body .blog-bigthree-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--blog-white);
font-size: 1rem;
margin-bottom: 6px;
}
.blog-main .blog-post__body p.blog-bigthree-card__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.blog-main .blog-post__body p.blog-bigthree-card__title {
font-size: var(--blog-fs-sm);
font-weight: 700;
color: var(--blog-gray-900);
margin: 0;
}
.blog-main .blog-post__body p.blog-bigthree-card__desc {
font-size: var(--blog-fs-xs);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
text-align: left;
margin: 0;
}
/* ------------------------------------------------------------------------------
2. Big Three card variants
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-bigthree-card--sun {
border-left-color: var(--blog-grad-3a);
}
.blog-main .blog-post__body .blog-bigthree-card--sun .blog-bigthree-card__icon {
background: var(--blog-grad-3a);
}
.blog-main
.blog-post__body
.blog-bigthree-card--sun
p.blog-bigthree-card__label {
color: var(--blog-grad-3b);
}
.blog-main .blog-post__body .blog-bigthree-card--moon {
border-left-color: var(--blog-grad-5a);
}
.blog-main
.blog-post__body
.blog-bigthree-card--moon
.blog-bigthree-card__icon {
background: var(--blog-grad-5a);
}
.blog-main
.blog-post__body
.blog-bigthree-card--moon
p.blog-bigthree-card__label {
color: var(--blog-grad-5b);
}
.blog-main .blog-post__body .blog-bigthree-card--rising {
border-left-color: var(--blog-grad-6a);
}
.blog-main
.blog-post__body
.blog-bigthree-card--rising
.blog-bigthree-card__icon {
background: var(--blog-grad-6a);
}
.blog-main
.blog-post__body
.blog-bigthree-card--rising
p.blog-bigthree-card__label {
color: var(--blog-grad-6b);
}
/* ------------------------------------------------------------------------------
3. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 and the forex profile-card supplement, kept here as its own rule
rather than edited into that existing media query.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-bigthree-grid {
grid-template-columns: 1fr;
gap: var(--blog-sp-3);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-bigthree-card {
transition: none;
}
}
/* ============================================================================
HOW SYNASTRY REVEALS COMPATIBILITY BETWEEN TWO CHARTS — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used by the
other per-article supplements at the bottom of blog.css (the pregnancy
trimester grid, the two "formula box" blocks, and the forex profile grid).
Every other component this article needs — hero, TOC, callouts, checklist,
numbered steps, tables, inline tool box, related grid, FAQ accordion,
author box, and the inline SVG aspect-wheel diagram via the existing
.blog-post__chart class — already exists in blog.css and is reused as-is.
Nothing in this file redeclares or overrides an existing blog.css selector.
The one gap: blog.css has no component for showing a short set of
side-by-side "category" cards with a colored accent per card.
.blog-related-card is anchor-based and styled for outbound links,
.blog-callout is a single full-width note, and .blog-trimester-card /
.blog-profile-card already exist but carry sub-element names tied to their
own articles (__weeks, __rate) that don't fit an aspect-type summary. This
adds a small, scoped "aspect card" component instead, structurally modeled
on the existing .blog-profile-grid / .blog-profile-card pattern (badge,
symbol, title, description) but with its own class names and sub-elements
so nothing is semantically mismatched.
Selectors are scoped under .blog-main .blog-post__body, matching the
specificity pattern used by the callout, inline-tool, checklist, and
profile-box components already in blog.css, so these cards render
correctly regardless of the base .blog-main .blog-post__body p rules.
Colors are not invented: every accent below reuses a custom property
already defined in blog.css's design-token block (--blog-brand-500,
--blog-brand-50, --blog-grad-2a, --blog-grad-3a), paired with the exact
same background tints blog.css already uses for its callout variants.
Harmonious aspects (trine/sextile) reuse the brand green already used for
the --tip callout, the conjunction reuses the same indigo already used for
the --expert callout, and challenging aspects (square/opposition) reuse
the same amber already used for the --warning callout — so the color
meaning (easy → amplified → friction) matches how the rest of the site
already uses these colors, rather than introducing a new palette.
Load this file AFTER blog.css:
Contents:
1. Aspect card grid
2. Aspect card variants (harmonious / neutral / challenging)
3. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Aspect card grid
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-aspect-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-sp-5);
margin: var(--blog-sp-6) 0;
}
.blog-main .blog-post__body .blog-aspect-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--blog-sp-5);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-left-width: 4px;
border-radius: var(--blog-radius-md);
}
.blog-main .blog-post__body p.blog-aspect-card__badge {
display: inline-flex;
align-self: flex-start;
padding: 3px 10px;
border-radius: var(--blog-radius-pill);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 4px;
}
.blog-main .blog-post__body p.blog-aspect-card__symbol {
font-size: 1.4rem;
font-weight: 800;
color: var(--blog-gray-900);
margin: 0;
}
.blog-main .blog-post__body p.blog-aspect-card__title {
font-size: var(--blog-fs-sm);
font-weight: 700;
color: var(--blog-gray-800);
margin: 0;
}
.blog-main .blog-post__body p.blog-aspect-card__desc {
font-size: var(--blog-fs-xs);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
text-align: left;
margin: 0;
}
/* ------------------------------------------------------------------------------
2. Aspect card variants
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-aspect-card--harmonious {
border-left-color: var(--blog-brand-500);
background: var(--blog-brand-50);
}
.blog-main
.blog-post__body
.blog-aspect-card--harmonious
p.blog-aspect-card__badge {
background: var(--blog-brand-500);
color: var(--blog-white);
}
.blog-main .blog-post__body .blog-aspect-card--neutral {
border-left-color: var(--blog-grad-2a);
background: #f5f5ff;
}
.blog-main
.blog-post__body
.blog-aspect-card--neutral
p.blog-aspect-card__badge {
background: var(--blog-grad-2a);
color: var(--blog-white);
}
.blog-main .blog-post__body .blog-aspect-card--challenging {
border-left-color: var(--blog-grad-3a);
background: #fff8ec;
}
.blog-main
.blog-post__body
.blog-aspect-card--challenging
p.blog-aspect-card__badge {
background: var(--blog-grad-3a);
color: var(--blog-white);
}
/* ------------------------------------------------------------------------------
3. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 for other body components (inline tool, callout, author box), kept
here as its own rule rather than edited into that existing media query.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-aspect-grid {
grid-template-columns: 1fr;
gap: var(--blog-sp-3);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-aspect-card {
transition: none;
}
}
/* ============================================================================
WHICH PLANET PLACEMENTS MATTER MOST IN SYNASTRY? — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used by the
other per-article supplements at the bottom of blog.css (the pregnancy
trimester grid, the two "formula box" blocks, and the forex profile-card
grid). Every other component this article needs — hero, TOC, callouts,
checklist, tables, inline tool box, related grid, FAQ accordion, author
box, and the inline SVG chart via .blog-post__chart — already exists in
blog.css and is reused as-is. Nothing in this file redeclares or
overrides an existing blog.css selector.
The one gap: blog.css has no component for a short row of icon-led
"at a glance" cards. .blog-related-card is anchor-based and styled for
outbound links, .blog-trimester-card assumes exactly three fixed
columns, and .blog-profile-card assumes exactly three columns with a
badge + rate layout that doesn't fit a simple icon/name/description
card. This article needs exactly five cards (Sun, Moon, Venus, Mars,
Ascendant), which doesn't divide evenly into three, so a small,
scoped "planet card" component is added instead, using
repeat(auto-fit, minmax(...)) rather than a fixed column count so five
items wrap cleanly at any width instead of leaving an awkward gap.
Selectors are scoped under .blog-main .blog-post__body, matching the
specificity pattern used by the callout, inline-tool, checklist, and
related-card components already in blog.css, so these cards render
correctly regardless of the base .blog-main .blog-post__body p rules.
Colors are not invented: the icon circle reuses the same brand-50 /
brand-600 pairing blog.css already uses for .blog-category-card__icon
and .blog-related-card__icon, so this stays visually consistent with
the rest of the site without guessing at new tokens.
Load this file AFTER blog.css:
Contents:
1. Planet card grid
2. Planet card
3. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Planet card grid
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-planet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--blog-sp-4);
margin: var(--blog-sp-6) 0;
}
/* ------------------------------------------------------------------------------
2. Planet card
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-planet-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: var(--blog-sp-4);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
transition:
transform var(--blog-dur-base) var(--blog-ease),
box-shadow var(--blog-dur-base) var(--blog-ease),
border-color var(--blog-dur-base) var(--blog-ease);
}
.blog-main .blog-post__body .blog-planet-card:hover {
transform: translateY(-3px);
box-shadow: var(--blog-shadow-md);
border-color: var(--blog-brand-300);
}
.blog-main .blog-post__body .blog-planet-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--blog-brand-50);
color: var(--blog-brand-600);
font-size: 1.05rem;
margin-bottom: 2px;
transition:
background var(--blog-dur-base) var(--blog-ease),
color var(--blog-dur-base) var(--blog-ease);
}
.blog-main .blog-post__body .blog-planet-card:hover .blog-planet-card__icon {
background: var(--blog-brand-500);
color: var(--blog-white);
}
.blog-main .blog-post__body p.blog-planet-card__name {
font-size: 1rem;
font-weight: 800;
color: var(--blog-gray-900);
margin: 0;
text-align: left;
}
.blog-main .blog-post__body p.blog-planet-card__role {
font-size: var(--blog-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--blog-brand-600);
margin: 0;
text-align: left;
}
.blog-main .blog-post__body p.blog-planet-card__desc {
font-size: var(--blog-fs-xs);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
margin: 0;
text-align: left;
}
/* ------------------------------------------------------------------------------
3. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 for other body components (inline tool, callout, author box), kept
here as its own rule rather than edited into that existing media query.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-planet-grid {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: var(--blog-sp-3);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-planet-card {
transition: none;
}
}
/* ============================================================================
HOW TO FIND YOUR BIG THREE ASTROLOGY PLACEMENTS — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used by the
other per-article supplements at the bottom of blog.css (the pregnancy
trimester grid, the two "formula box" blocks, and the forex profile-card
grid). Every other component this article needs — hero, TOC, callouts,
checklist, tables, inline tool box, related grid, FAQ accordion, author
box, and the SVG chart via .blog-post__chart — already exists in blog.css
and is reused as-is. Nothing in this file redeclares or overrides an
existing blog.css selector.
The one gap: blog.css has no component for showing three short,
individually-colored summary cards side by side. .blog-trimester-card
only ships one fixed accent color, and .blog-profile-card's three variant
names (conservative/moderate/aggressive) are specific to a risk-tolerance
comparison, so reusing them here for Sun/Moon/Rising would be visually
fine but semantically confusing in the markup. This adds a small, scoped
"placement card" component instead, named for what it actually shows.
Selectors are scoped under .blog-main .blog-post__body, matching the
specificity pattern used by every other article-body component already in
blog.css (callout, inline-tool, checklist, formula-box, profile-grid), so
these cards render correctly regardless of the base
.blog-main .blog-post__body p rules.
Colors are not invented: every accent below reuses a custom property
already defined in blog.css's design-token block (--blog-grad-3a/3b for
Sun, --blog-grad-5a/5b for Moon, --blog-grad-2a/2b for Rising), paired
with the exact same background tints blog.css already uses for its
--warning, --note, and --expert callout variants. That keeps the color
meaning consistent with how the rest of the site already uses these three
accents, rather than introducing new undocumented colors.
Load this file AFTER blog.css:
Contents:
1. Placement card grid
2. Placement card variants (sun / moon / rising)
3. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Placement card grid
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-placement-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-sp-5);
margin: var(--blog-sp-6) 0;
}
.blog-main .blog-post__body .blog-placement-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--blog-sp-5);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-left-width: 4px;
border-radius: var(--blog-radius-md);
text-align: center;
align-items: center;
}
.blog-main .blog-post__body p.blog-placement-card__glyph {
font-size: 1.75rem;
line-height: 1;
margin: 0 0 6px;
}
.blog-main .blog-post__body p.blog-placement-card__title {
font-size: var(--blog-fs-xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 2px;
}
.blog-main .blog-post__body p.blog-placement-card__subtitle {
font-size: var(--blog-fs-sm);
font-weight: 700;
color: var(--blog-gray-900);
margin: 0 0 4px;
}
.blog-main .blog-post__body p.blog-placement-card__desc {
font-size: var(--blog-fs-xs);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
text-align: center;
margin: 0;
}
/* ------------------------------------------------------------------------------
2. Placement card variants
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-placement-card--sun {
border-left-color: var(--blog-grad-3a);
background: #fff8ec;
}
.blog-main
.blog-post__body
.blog-placement-card--sun
p.blog-placement-card__title {
color: var(--blog-grad-3b);
}
.blog-main .blog-post__body .blog-placement-card--moon {
border-left-color: var(--blog-grad-5a);
background: #f0f9ff;
}
.blog-main
.blog-post__body
.blog-placement-card--moon
p.blog-placement-card__title {
color: var(--blog-grad-5b);
}
.blog-main .blog-post__body .blog-placement-card--rising {
border-left-color: var(--blog-grad-2a);
background: #f5f5ff;
}
.blog-main
.blog-post__body
.blog-placement-card--rising
p.blog-placement-card__title {
color: var(--blog-grad-2b);
}
/* ------------------------------------------------------------------------------
3. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 for other body components (inline tool, callout, author box, profile
grid), kept here as its own rule rather than edited into that existing
media query.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-placement-grid {
grid-template-columns: 1fr;
gap: var(--blog-sp-3);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-placement-card {
transition: none;
}
}
/* ============================================================================
WHY PLANETARY POSITIONS MATTER IN BIRTH CHART READING — SUPPLEMENTAL STYLES
============================================================================
This file is ADDITIVE ONLY, following the same pattern already used by the
other per-article supplements at the bottom of blog.css (the pregnancy
trimester grid, the two "formula box" blocks, and the forex profile-card
grid). Every other component this article needs — hero, TOC, callouts,
checklist, tables, inline tool box, related grid, FAQ accordion, author
box — already exists in blog.css and is reused as-is. Nothing here
redeclares or overrides an existing blog.css selector.
The one gap: blog.css has no component for a scannable "what does this
planet mean" reference list. The article covers ten planets across three
subsections (personal / social / outer), and a two-column glossary grid
is easier to scan than folding all ten into paragraph text alone. This
adds a small, scoped "planet glossary" component instead.
Symbols use the standard Unicode astrological glyphs (☉ ☽ ☿ ♀ ♂ ♃ ♄ ♅ ♆ ♇)
rather than an icon font, so no new dependency is introduced.
Colors are not invented: every accent below reuses a custom property
already defined in blog.css's design-token block (--blog-brand-500/50,
--blog-grad-2b, --blog-grad-5b), paired with the same background tints
blog.css already uses for its --expert and --note callout variants, so
the personal/social/outer grouping stays visually consistent with how
the rest of the site already pairs these colors.
Selectors are scoped under .blog-main .blog-post__body, matching the
specificity pattern used by the callout, inline-tool, checklist, and
formula-box components already in blog.css, so these cards render
correctly regardless of the base .blog-main .blog-post__body p rules.
Load this file AFTER blog.css:
Contents:
1. Planet glossary grid + item
2. Category color variants (personal / social / outer)
3. Responsive tweaks
============================================================================ */
/* ------------------------------------------------------------------------------
1. Planet glossary grid + item
------------------------------------------------------------------------------ */
.blog-main .blog-post__body .blog-planet-glossary {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--blog-sp-4);
margin: var(--blog-sp-5) 0 var(--blog-sp-6);
}
.blog-main .blog-post__body .blog-planet-item {
display: flex;
gap: var(--blog-sp-3);
align-items: flex-start;
padding: var(--blog-sp-4);
background: var(--blog-surface);
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius-md);
}
.blog-main .blog-post__body .blog-planet-item__symbol {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.3rem;
font-weight: 700;
background: var(--blog-brand-50);
color: var(--blog-brand-600);
}
.blog-main .blog-post__body .blog-planet-item__body {
flex: 1;
min-width: 0;
}
.blog-main .blog-post__body p.blog-planet-item__name {
font-weight: 800;
color: var(--blog-gray-900);
font-size: var(--blog-fs-sm);
margin: 0 0 2px;
}
.blog-main .blog-post__body p.blog-planet-item__meaning {
font-size: var(--blog-fs-xs);
line-height: var(--blog-lh-normal);
color: var(--blog-gray-600);
text-align: left;
margin: 0;
}
/* ------------------------------------------------------------------------------
2. Category color variants (personal / social / outer)
Reuses the same color pairings blog.css already uses elsewhere: brand
green matches --callout--tip, indigo matches --callout--expert, and blue
matches --callout--note.
------------------------------------------------------------------------------ */
.blog-main
.blog-post__body
.blog-planet-glossary--personal
.blog-planet-item__symbol {
background: var(--blog-brand-50);
color: var(--blog-brand-600);
}
.blog-main
.blog-post__body
.blog-planet-glossary--social
.blog-planet-item__symbol {
background: #f5f5ff;
color: var(--blog-grad-2b);
}
.blog-main
.blog-post__body
.blog-planet-glossary--outer
.blog-planet-item__symbol {
background: #f0f9ff;
color: var(--blog-grad-5b);
}
/* ------------------------------------------------------------------------------
3. Responsive tweaks
Mirrors the 640px article breakpoint already used in blog.css section
7.14 for other body components (inline tool, callout, author box, profile
grid), kept here as its own rule rather than edited into that existing
media query.
------------------------------------------------------------------------------ */
@media (max-width: 640px) {
.blog-main .blog-post__body .blog-planet-glossary {
grid-template-columns: 1fr;
gap: var(--blog-sp-3);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-main .blog-post__body .blog-planet-item {
transition: none;
}
}