/* blog.css — BFE Blog post page styles
Light-mode editorial. Loaded on post-template.html only.
Depends on: /theme-shared.css (nav vars, scrollbg, footer overrides)
================================================================== */
/*
Fonts are loaded via in of post-template.html.
This @import is intentionally absent — loads in parallel with
CSS fetch; @import would serialize the requests and add ~300ms on cold
cache for Chinese font files.
*/
/* ── CSS variables ── */
:root {
--magenta: #ff0097;
--magenta-dark: #c4008a;
--magenta-glow: rgba(255, 0, 151, 0.14);
--amber: #b8620e; /* darkened for 4.5:1 on cream */
--paper: #f9f6f1;
--paper-deep: #f1ece4;
--ink: #1a1520;
--ink-mid: #3a3445;
--ink-dim: #6b6478;
--ink-faint: #9990a2;
--rule: rgba(26, 21, 32, 0.12);
--rule-strong: rgba(26, 21, 32, 0.22);
--serif: 'Noto Serif TC', Georgia, 'Times New Roman', serif;
--sans: 'Noto Sans TC', 'Inter Tight', system-ui, sans-serif;
--body-size: 18px;
--body-lh: 1.85;
--col-width: 680px;
--wide-width: 900px;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
/* ── Page base — lock to light, override theme-shared + scrollbg.js ── */
html, html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body,
body {
background-color: var(--paper) !important;
background-image: none !important;
color: var(--ink) !important;
font-family: var(--sans);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--magenta); text-decoration: none; }
a:hover { color: var(--magenta-dark); text-decoration: underline; }
img { max-width: 100%; display: block; }
/* ── Nav spacer (fixed nav is 64px) ── */
.post-nav-spacer { height: 64px; }
/* ══════════════════════════════════════════════
BREADCRUMB
══════════════════════════════════════════════ */
.post-breadcrumb {
max-width: var(--wide-width);
margin: 0 auto;
padding: 14px 24px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 6px;
}
.post-breadcrumb a {
color: var(--ink-dim);
text-decoration: none;
min-height: 40px;
display: inline-flex;
align-items: center;
}
.post-breadcrumb a:hover { color: var(--magenta); text-decoration: none; }
.post-breadcrumb .sep {
color: var(--ink-faint);
font-size: 11px;
}
/* ══════════════════════════════════════════════
HERO
══════════════════════════════════════════════ */
.post-hero {
position: relative;
width: 100%;
max-width: var(--wide-width);
margin: 0 auto 0;
padding: 0 24px;
}
.post-hero-img-wrap {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
background: var(--paper-deep); /* placeholder colour if no image */
aspect-ratio: 21 / 9;
}
/* No cover image: collapse wrap and hero container entirely */
.post-hero-img-wrap--empty {
display: none;
}
/* When wrap is hidden, remove hero padding so there is no phantom gap */
.post-hero:has(.post-hero-img-wrap--empty) {
padding: 0;
margin: 0;
}
.post-hero-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
/* No border-radius needed — the parent overflow:hidden clips it.
Removing it eliminates the sub-pixel seam at the border edge. */
outline: 1px solid rgba(0, 0, 0, 0.08);
outline-offset: -1px;
/* subtle zoom reveal on load */
animation: hero-reveal 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes hero-reveal {
from { opacity: 0; transform: scale(1.03); }
to { opacity: 1; transform: scale(1); }
}
/* ── Post header (below image) ── */
.post-header {
max-width: var(--col-width);
margin: 28px auto 0;
padding: 0 24px;
}
.post-tags {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.post-tag-country {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--magenta);
color: #fff;
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 5px 13px;
border-radius: 999px;
line-height: 1;
}
.post-tag-label {
display: inline-flex;
align-items: center;
background: transparent;
color: var(--ink-dim);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
padding: 5px 12px;
border-radius: 999px;
border: 1.5px solid var(--rule-strong);
line-height: 1;
}
.post-title {
font-family: var(--serif);
font-size: clamp(26px, 4.5vw, 40px);
font-weight: 700;
line-height: 1.28;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 20px;
text-wrap: balance;
}
/* ── Byline ── */
.post-byline {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink-dim);
padding-bottom: 22px;
border-bottom: 1.5px solid var(--rule-strong);
}
.post-byline-avatar {
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--magenta), var(--magenta-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 15px;
font-weight: 900;
}
.post-byline-info {
line-height: 1.4;
}
.post-byline-author {
font-weight: 700;
color: var(--ink-mid);
display: block;
}
.post-byline-date {
font-size: 13px;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
/* ══════════════════════════════════════════════
ARTICLE BODY
══════════════════════════════════════════════ */
.post-body {
max-width: var(--col-width);
margin: 40px auto 0;
padding: 0 24px;
font-family: var(--serif);
font-size: var(--body-size);
line-height: var(--body-lh);
color: var(--ink-mid);
}
/* Paragraphs */
.post-body p {
margin: 0 0 1.4em;
text-wrap: pretty;
}
/* Drop-cap on first unstyled paragraph (not WP author-credit paragraphs
which carry inline style attrs). :not([style]) ensures the WP
"text-align:center" author line is skipped. */
.post-body > p:first-of-type:not([style])::first-letter,
.post-body > p.drop-cap::first-letter {
float: left;
font-family: var(--serif);
font-size: 3.6em;
font-weight: 700;
line-height: 0.82;
margin: 0.06em 0.1em 0 0;
color: var(--magenta);
}
/* Headings */
.post-body h2 {
font-family: var(--sans);
font-size: clamp(18px, 2.5vw, 22px);
font-weight: 900;
color: var(--ink);
margin: 2.4em 0 0.6em;
letter-spacing: -0.01em;
line-height: 1.3;
}
.post-body h2::before {
content: '';
display: block;
width: 28px;
height: 3px;
background: var(--magenta);
margin-bottom: 10px;
border-radius: 2px;
}
.post-body h3 {
font-family: var(--sans);
font-size: 17px;
font-weight: 700;
color: var(--ink);
margin: 1.8em 0 0.5em;
letter-spacing: -0.005em;
}
/* Strong / emphasis */
.post-body strong { color: var(--ink); font-weight: 700; }
.post-body em { font-style: italic; }
/* Inline spans with font-size styling (WordPress legacy) */
.post-body span[style*="font-size"] {
font-size: 1.05em !important; /* normalise — don't let legacy 120% break rhythm */
}
/* Author credit line (center-aligned paragraph at post start — WP legacy).
Displayed as a contained chip row rather than a side-stripe callout.
The !important overrides the WP inline style="text-align:center". */
.post-body p[style*="text-align:center"],
.post-body p[style*="text-align: center"] {
text-align: left !important;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--ink-dim);
background: var(--paper-deep);
border: 1px solid var(--rule-strong);
padding: 9px 14px;
border-radius: 8px;
margin-bottom: 2em;
display: inline-block;
max-width: 100%;
}
/* ── Images inside body ── */
.post-body figure {
margin: 2em -8px; /* bleed slightly beyond text column */
}
.post-body figure img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(26, 21, 32, 0.10), 0 1px 4px rgba(26, 21, 32, 0.06);
outline: 1px solid rgba(0, 0, 0, 0.08);
outline-offset: -1px;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: zoom-in;
}
.post-body figure img:hover {
transform: scale(1.012);
box-shadow: 0 10px 36px rgba(26, 21, 32, 0.15), 0 2px 8px rgba(26, 21, 32, 0.08);
}
.post-body figure figcaption {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-faint);
font-style: italic;
text-align: center;
margin-top: 10px;
line-height: 1.5;
}
/* ── WP-style figure classes ── */
.post-body .wp-block-image { margin: 2em -8px; }
.post-body .wp-block-image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(26, 21, 32, 0.10), 0 1px 4px rgba(26, 21, 32, 0.06);
outline: 1px solid rgba(0, 0, 0, 0.08);
outline-offset: -1px;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: zoom-in;
}
.post-body .wp-block-image img:hover {
transform: scale(1.012);
box-shadow: 0 10px 36px rgba(26, 21, 32, 0.15), 0 2px 8px rgba(26, 21, 32, 0.08);
}
.post-body .wp-block-image figcaption {
font-family: var(--sans);
font-size: 13px;
color: var(--ink-faint);
font-style: italic;
text-align: center;
margin-top: 10px;
line-height: 1.5;
}
/* ── YouTube / video embed ── */
.post-body .wp-block-embed {
margin: 2em -8px;
}
/* Wrapper that holds raw URL or converted iframe */
.post-body .wp-block-embed__wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 default */
border-radius: 10px;
overflow: hidden;
background: #000;
}
/* 4:3 ratio variant */
.post-body .wp-embed-aspect-4-3 .wp-block-embed__wrapper {
padding-bottom: 75%;
}
.post-body .wp-block-embed__wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Fallback link display (if JS hasn't converted the URL) */
.post-body .wp-block-embed__wrapper:not(:has(iframe)) {
padding-bottom: 0;
background: var(--paper-deep);
border-radius: 10px;
border: 1.5px solid var(--rule);
}
/* ── Horizontal rules ── */
.post-body hr {
border: none;
border-top: 1.5px solid var(--rule);
margin: 2.5em 0;
}
/* ── Blockquote — full-border tinted card, no side-stripe ── */
.post-body blockquote {
margin: 2em 0;
padding: 20px 24px;
background: var(--paper-deep);
border: 1px solid var(--rule-strong);
border-radius: 10px;
font-style: italic;
color: var(--ink-mid);
position: relative;
}
.post-body blockquote p { margin: 0; }
/* ── Lists ── */
.post-body ul, .post-body ol {
margin: 0 0 1.4em;
padding-left: 1.5em;
}
.post-body li {
margin-bottom: 0.5em;
}
.post-body ul li::marker { color: var(--magenta); }
.post-body ol li::marker { color: var(--magenta); font-weight: 700; }
/* ── Links inside body ── */
.post-body a {
color: var(--magenta);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.post-body a:hover {
color: var(--magenta-dark);
text-decoration-thickness: 2px;
}
/* ══════════════════════════════════════════════
FADE-IN ANIMATION
JS opt-in: JS adds .post-fade-js to , then .post-fade gets
the hidden state. Without JS the content is always visible.
Within the animation, .is-visible fires the reveal.
══════════════════════════════════════════════ */
/* Default: content visible (no-JS safe, headless-renderer safe) */
.post-fade {
opacity: 1;
transform: none;
}
/* JS active: hide, ready to reveal */
.post-fade-js .post-fade {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.post-fade-js .post-fade.is-visible {
opacity: 1;
transform: none;
}
/* Reduced motion: disable all transitions and animations.
Content remains visible — the JS opt-in class still applies
but transition-duration:0 means reveals are instant. */
@media (prefers-reduced-motion: reduce) {
.post-fade-js .post-fade {
transition: none !important;
}
@keyframes hero-reveal {
from { opacity: 1; transform: none; }
}
.post-hero-img-wrap img {
animation: none !important;
}
.post-body figure img,
.post-body .wp-block-image img {
transition: none !important;
}
.post-nav-card {
transition: none !important;
}
.post-nav-card:active {
transform: none !important;
}
.post-back-link a {
transition: none !important;
}
.post-nav-title {
transition: none !important;
}
}
/* ══════════════════════════════════════════════
POST FOOTER (divider + back link)
══════════════════════════════════════════════ */
.post-footer-rule {
max-width: var(--col-width);
margin: 56px auto 0;
padding: 0 24px;
}
.post-footer-rule hr {
border: none;
border-top: 1.5px solid var(--rule-strong);
}
.post-back-link {
max-width: var(--col-width);
margin: 18px auto 0;
padding: 0 24px;
}
.post-back-link a {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink-dim);
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
min-height: 40px;
transition-property: color;
transition-duration: 0.18s;
transition-timing-function: ease-out;
}
.post-back-link a:hover { color: var(--magenta); text-decoration: none; }
.post-back-link a::before {
content: '←';
font-size: 15px;
}
/* ══════════════════════════════════════════════
PREV / NEXT NAVIGATION
══════════════════════════════════════════════ */
.post-nav {
max-width: var(--wide-width);
margin: 48px auto 0;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Ghost-card fix: use border only (no paired wide shadow).
Hover shifts to a magenta border — a clear, direct signal.
Active uses canonical scale(0.96) for tactile press feedback. */
.post-nav-card {
display: block;
padding: 20px 22px;
border-radius: 12px;
border: 1.5px solid var(--rule-strong);
background: #fff;
text-decoration: none;
transition-property: border-color, transform;
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.post-nav-card:hover {
border-color: var(--magenta);
transform: translateY(-2px);
text-decoration: none;
}
.post-nav-card:active {
transform: scale(0.96);
transition-duration: 0.1s;
}
.post-nav-card:focus-visible {
outline: 2px solid var(--magenta);
outline-offset: 3px;
}
.post-nav-label {
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-faint);
display: block;
margin-bottom: 8px;
}
.post-nav-card--next .post-nav-label { text-align: right; }
.post-nav-title {
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
color: var(--ink-mid);
line-height: 1.45;
display: block;
text-wrap: balance;
transition-property: color;
transition-duration: 0.18s;
transition-timing-function: ease-out;
}
.post-nav-card--next .post-nav-title { text-align: right; }
.post-nav-card:hover .post-nav-title { color: var(--magenta); }
/* When only one side exists, span full width */
.post-nav-card--only {
grid-column: span 2;
}
/* ── Spacing below nav before footer ── */
.post-nav-spacer-bottom {
height: 72px;
}
/* ══════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 720px) {
:root {
--body-size: 17px;
--body-lh: 1.8;
}
.post-hero { padding: 0 14px; }
/* Wrap radius reduces on mobile; img has no own radius (clipped by wrap) */
.post-hero-img-wrap { aspect-ratio: 4 / 3; border-radius: 12px; }
.post-header { padding: 0 14px; }
.post-title { font-size: clamp(22px, 6vw, 32px); }
.post-body { padding: 0 14px; margin-top: 32px; }
.post-body figure,
.post-body .wp-block-image,
.post-body .wp-block-embed { margin-left: -2px; margin-right: -2px; }
.post-breadcrumb { padding: 12px 14px; }
.post-footer-rule,
.post-back-link { padding: 0 14px; }
.post-nav { padding: 0 14px; grid-template-columns: 1fr; }
.post-nav-card--next .post-nav-label,
.post-nav-card--next .post-nav-title { text-align: left; }
.post-nav-card--only { grid-column: span 1; }
}
@media (max-width: 480px) {
.post-hero-img-wrap { aspect-ratio: 1 / 1; }
.post-body > p:first-of-type::first-letter {
font-size: 2.8em;
}
}
/* ══════════════════════════════════════════════
PRINT
══════════════════════════════════════════════ */
@media print {
.post-breadcrumb,
.post-nav,
.post-back-link,
#header-placeholder,
#footer-placeholder { display: none; }
body { background: #fff !important; color: #000 !important; }
.post-body { font-size: 12pt; line-height: 1.6; }
}