/* ═══════════════════════════════════════════════════════════════════════ Webfort blog Everything the blog adds on top of the main site's design system. The rule from styles.css carries over unchanged: no raw px for radius, shadow or font-size — reach for a token. The tokens themselves are defined in tailwind.css (@theme) and styles.css (:root), both loaded before this file. Prefix: .wf- Nothing here may leak into the shared chrome. ═══════════════════════════════════════════════════════════════════════ */ :root { /* The one measurement this file adds: how far the fixed header pushes content down. Promo banner (36px, already applied to ) + nav padding + the glass card. Matches the static site's pt-32 hero. */ --wf-header-offset: 8rem; /* Editorial measure. 68 characters is the sweet spot for 18px Outfit at 1.75 leading — long enough not to feel like a column of a newspaper, short enough that the eye finds the next line without hunting. */ --wf-measure: 42rem; --wf-measure-wide: 56rem; } /* Visually hidden but announced. Defined here rather than relied on from wp-block-library, which a future dequeue would take with it. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Skip link ─────────────────────────────────────────────────────────── */ .wf-skip-link { position: absolute; top: -100%; left: 1rem; z-index: 100; padding: 0.75rem 1.25rem; background: var(--brand); color: #fff; font-weight: 700; font-size: var(--t-small); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); } .wf-skip-link:focus { top: 4rem; } .wf-main { display: block; } /* ── Reading progress ────────────────────────────────────────────────────── A 3px rule pinned under the nav. Deliberately not a full-width bar at the very top of the viewport — that position belongs to the promo banner, and two competing strips of colour at the top of the page is one too many. */ .wf-progress { position: fixed; left: 0; right: 0; top: 2.25rem; height: 3px; z-index: 55; background: transparent; pointer-events: none; } .wf-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent-deep)); transform-origin: left center; transition: width 0.08s linear; } /* ═══════════════════════════════════════════════════════════════════════ Page heads ═══════════════════════════════════════════════════════════════════════ */ .wf-pagehead { position: relative; padding-top: var(--wf-header-offset); padding-bottom: 3.5rem; overflow: hidden; } .wf-pagehead__inner { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .wf-pagehead__inner { padding: 0 1.5rem; } } @media (min-width: 1024px) { .wf-pagehead { padding-bottom: 4.5rem; } .wf-pagehead__inner { padding: 0 2rem; } } .wf-pagehead__title { font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 1.25rem; max-width: 20ch; } .wf-pagehead--center .wf-pagehead__title, .wf-pagehead--center .wf-pagehead__lede { margin-left: auto; margin-right: auto; text-align: center; } .wf-pagehead--center .wf-pagehead__inner { text-align: center; } /* Page heads over a body with no sidebar. Head and body are given the same max-width and the same gutters, so the title's left edge lands on the first character of the first paragraph rather than out at the page gutter with the copy centred somewhere else entirely. */ .wf-pagehead--narrow .wf-pagehead__inner, .wf-page-body .wf-wrap { max-width: var(--wf-measure); } .wf-pagehead--narrow .wf-pagehead__lede, .wf-page-body .wf-prose { max-width: none; } .wf-pagehead__lede { font-size: 1.25rem; line-height: 1.65; color: var(--ink-soft); max-width: 44rem; margin: 0; } /* Mono eyebrow above a page title. Same idea as .section-kicker but it sits above a display-size heading, so it gets a chip instead of a rule. */ .wf-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; padding: 0.35rem 0.85rem; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.20); border-radius: var(--r-full); font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); } .wf-kicker svg { width: 0.9rem; height: 0.9rem; } /* ═══════════════════════════════════════════════════════════════════════ Chips, meta, bylines ═══════════════════════════════════════════════════════════════════════ */ .wf-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--r-full); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--hairline); background: var(--color-surface-alt, #f6f8fc); color: var(--ink-soft); transition: background 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out; white-space: nowrap; } .wf-chip--brand { background: rgba(37, 99, 235, 0.09); border-color: rgba(37, 99, 235, 0.22); color: var(--accent-deep); } a.wf-chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .wf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--t-small); color: var(--ink-muted); } .wf-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .wf-meta__icon { width: 1rem; height: 1rem; opacity: 0.7; flex-shrink: 0; } .wf-byline { display: flex; align-items: center; gap: 0.85rem; } .wf-byline__avatar { border-radius: var(--r-full); border: 2px solid #fff; box-shadow: var(--shadow-sm); flex-shrink: 0; width: 2.5rem; height: 2.5rem; } .wf-byline--lg .wf-byline__avatar { width: 4rem; height: 4rem; } .wf-byline__name { display: block; font-weight: 700; color: var(--ink); font-size: var(--t-small); line-height: 1.3; } .wf-byline__name:hover { color: var(--brand); } .wf-byline--lg .wf-byline__name { font-size: var(--t-lead); } .wf-byline__bio { margin: 0.15rem 0 0; font-size: var(--t-small); color: var(--ink-muted); line-height: 1.5; } .wf-byline--sm .wf-byline__bio { display: none; } /* ═══════════════════════════════════════════════════════════════════════ Covers ═══════════════════════════════════════════════════════════════════════ */ .wf-cover { display: block; position: relative; overflow: hidden; background: var(--color-surface-sunken, #eef2f9); border-radius: var(--r-lg); aspect-ratio: 16 / 9; isolation: isolate; } .wf-cover--hero { aspect-ratio: 21 / 9; } .wf-cover__img, .wf-cover__art { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* A hairline over the artwork keeps generated covers from bleeding into a white card edge; photos get it too so the two never look different. */ .wf-cover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(11, 18, 32, 0.08); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════ Post card ═══════════════════════════════════════════════════════════════════════ */ .wf-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .wf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } } .wf-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out; height: 100%; } .wf-card:hover { transform: translateY(-2px); border-color: #c7d7f5; box-shadow: var(--shadow-lg); } .wf-card:hover .wf-cover__img, .wf-card:hover .wf-cover__art { transform: scale(1.04); } .wf-card .wf-cover { border-radius: 0; } .wf-card .wf-cover::after { border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; } .wf-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.85rem; padding: 1.5rem; } .wf-card__title { font-size: 1.3rem; font-weight: 800; line-height: 1.28; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .wf-card__title a { color: inherit; background-image: linear-gradient(var(--brand), var(--brand)); background-repeat: no-repeat; background-size: 0 2px; background-position: 0 100%; transition: background-size 0.25s ease-out, color 0.18s ease-out; } .wf-card:hover .wf-card__title a { color: var(--brand); background-size: 100% 2px; } .wf-card__excerpt { margin: 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.65; } .wf-card__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wf-card__more { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-small); font-weight: 700; color: var(--brand); white-space: nowrap; } .wf-card__more svg { width: 1rem; height: 1rem; transition: transform 0.18s ease-out; } .wf-card:hover .wf-card__more svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .wf-card, .wf-cover__img, .wf-cover__art, .wf-card__more svg { transition: none; } .wf-card:hover { transform: none; } .wf-card:hover .wf-cover__img, .wf-card:hover .wf-cover__art { transform: none; } } /* ── Featured (lead) card ────────────────────────────────────────────────── The most recent post gets the full width and a horizontal split. Below 1024px it collapses back to the same shape as every other card, because a half-height 21:9 image with four lines of text beside it is unreadable on a phone. */ .wf-lead { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out; } .wf-lead:hover { border-color: #c7d7f5; box-shadow: var(--shadow-lg); } .wf-lead:hover .wf-cover__img, .wf-lead:hover .wf-cover__art { transform: scale(1.03); } .wf-lead__media { position: relative; min-width: 0; } .wf-lead .wf-cover { border-radius: 0; aspect-ratio: 16 / 9; } .wf-lead .wf-cover::after { border: 0; } .wf-lead__body { display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem; } .wf-lead__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); margin: 0; } .wf-lead__title a { color: inherit; } .wf-lead:hover .wf-lead__title a { color: var(--brand); } .wf-lead__excerpt { margin: 0; color: var(--ink-soft); font-size: var(--t-lead); line-height: 1.7; } .wf-lead__flag { position: absolute; top: 1rem; left: 1rem; z-index: 2; } @media (min-width: 1024px) { .wf-lead { grid-template-columns: 1.15fr 1fr; align-items: stretch; } /* Side by side, the cover fills whatever height the copy needs rather than setting the row height itself — otherwise a 16:9 crop half the width of the card makes the whole thing 600px tall for four lines of text. */ .wf-lead .wf-cover { position: absolute; inset: 0; aspect-ratio: auto; } .wf-lead__media { min-height: 22rem; } .wf-lead__body { padding: 3rem; justify-content: center; } } /* The "Latest" flag that sits on the lead card's cover. */ .wf-flag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: var(--r-full); background: var(--gold); color: #1c1201; font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: var(--shadow-sm); } /* ═══════════════════════════════════════════════════════════════════════ Category filter rail ═══════════════════════════════════════════════════════════════════════ */ .wf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 2rem; } .wf-filter { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.05rem; border-radius: var(--r-full); border: 1px solid var(--hairline); background: #fff; color: var(--ink-soft); font-size: var(--t-small); font-weight: 700; box-shadow: var(--shadow-sm); transition: all 0.18s ease-out; } .wf-filter:hover { color: var(--brand); border-color: #c7d7f5; transform: translateY(-1px); } .wf-filter[aria-current="page"], .wf-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .wf-filter__count { font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); opacity: 0.6; } /* ═══════════════════════════════════════════════════════════════════════ Search form ═══════════════════════════════════════════════════════════════════════ */ .wf-search { display: flex; align-items: center; gap: 0.5rem; max-width: 30rem; padding: 0.4rem 0.4rem 0.4rem 1rem; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-full); box-shadow: var(--shadow-sm); transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out; } .wf-search:focus-within { border-color: #c7d7f5; box-shadow: var(--shadow-md); } .wf-search__icon { width: 1.15rem; height: 1.15rem; color: var(--ink-muted); flex-shrink: 0; } .wf-search__input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-small); color: var(--ink); padding: 0.5rem 0; } .wf-search__input:focus { outline: none; } .wf-search__input::placeholder { color: var(--ink-muted); } .wf-search__submit { flex-shrink: 0; border: 0; cursor: pointer; padding: 0.6rem 1.2rem; border-radius: var(--r-full); background: var(--brand); color: #fff; font-weight: 700; font-size: var(--t-small); transition: background 0.18s ease-out; } .wf-search__submit:hover { background: #1d4ed8; } /* In a page head the search sits directly under the lede, which has no bottom margin — so without this the input crowds the last line of copy. Matches the filter rail's 2rem, giving lede / search / filters one even rhythm. */ .wf-pagehead .wf-search { margin-top: 2rem; } .wf-pagehead--center .wf-search { margin-left: auto; margin-right: auto; } /* text-align does not reach flex children, so a wrapped filter rail under a centred heading would otherwise stack to the left of it. */ .wf-pagehead--center .wf-filters { justify-content: center; } /* ═══════════════════════════════════════════════════════════════════════ Sections ═══════════════════════════════════════════════════════════════════════ */ .wf-section { position: relative; padding: 4rem 0; } .wf-section--tight { padding: 2.5rem 0 4rem; } .wf-section--alt { background: var(--color-surface-alt, #f6f8fc); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .wf-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .wf-wrap { padding: 0 1.5rem; } } @media (min-width: 1024px) { .wf-wrap { padding: 0 2rem; } } .wf-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .wf-section__title { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); margin: 0; } .wf-section__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-small); font-weight: 700; color: var(--brand); } .wf-section__link svg { width: 1rem; height: 1rem; transition: transform 0.18s ease-out; } .wf-section__link:hover svg { transform: translateX(3px); } /* ═══════════════════════════════════════════════════════════════════════ Single post ═══════════════════════════════════════════════════════════════════════ */ .wf-article-head { position: relative; padding-top: var(--wf-header-offset); padding-bottom: 2.5rem; overflow: hidden; } .wf-article-head__inner { position: relative; z-index: 1; max-width: var(--wf-measure-wide); margin: 0 auto; padding: 0 1rem; text-align: center; } @media (min-width: 640px) { .wf-article-head__inner { padding: 0 1.5rem; } } .wf-article-head__title { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); margin: 1rem 0 1.25rem; text-wrap: balance; } .wf-article-head__lede { font-size: 1.2rem; line-height: 1.7; color: var(--ink-soft); max-width: 40rem; margin: 0 auto 1.75rem; text-wrap: pretty; } .wf-article-head .wf-meta { justify-content: center; } .wf-article-head__byline { display: flex; justify-content: center; margin-top: 1.5rem; } /* The hero image straddles the seam between the tinted head and the white article body, which is what stops a long post from reading as two unrelated slabs stacked on each other. */ .wf-article-hero { position: relative; z-index: 2; max-width: 68rem; margin: 0 auto -6rem; padding: 0 1rem; } @media (min-width: 640px) { .wf-article-hero { padding: 0 1.5rem; } } .wf-article-hero .wf-cover { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); aspect-ratio: 21 / 9; } .wf-article-body-wrap { padding-top: 8rem; padding-bottom: 4rem; } body:not(.has-post-hero) .wf-article-body-wrap { padding-top: 3rem; } /* Two columns on large screens: article, then a sticky rail. */ .wf-article-layout { max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; } @media (min-width: 640px) { .wf-article-layout { padding: 0 1.5rem; } } @media (min-width: 1100px) { .wf-article-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; padding: 0 2rem; } } .wf-article-main { min-width: 0; } .wf-rail { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 1100px) { .wf-rail { position: sticky; top: calc(var(--wf-header-offset) + 0.5rem); align-self: start; max-height: calc(100vh - var(--wf-header-offset) - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* The rail is a flex column inside a capped height, so without this every card gets squashed to share the space instead of the column scrolling. */ .wf-rail > * { flex-shrink: 0; } } /* ── Table of contents ─────────────────────────────────────────────────── */ .wf-toc { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); } .wf-toc__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .wf-toc__title svg { width: 1rem; height: 1rem; } .wf-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--hairline); } .wf-toc__item a { display: block; padding: 0.4rem 0 0.4rem 0.85rem; margin-left: -2px; border-left: 2px solid transparent; font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); transition: color 0.18s ease-out, border-color 0.18s ease-out; } .wf-toc__item a:hover { color: var(--brand); } .wf-toc__item--3 a { padding-left: 1.6rem; font-size: var(--t-micro); } /* Entries past the tenth. Hidden with `display: none` rather than a height animation on purpose: the list is inside a sticky, max-height rail, so a half-collapsed list would just move the scrollbar around. */ .wf-toc.is-collapsed .wf-toc__item--extra { display: none; } .wf-toc__more { display: block; width: 100%; margin-top: 0.75rem; padding: 0.4rem 0; border: 0; border-top: 1px solid var(--hairline); background: none; font: inherit; font-size: var(--t-micro); font-weight: 700; text-align: left; color: var(--brand); cursor: pointer; } .wf-toc__more:hover { color: var(--accent-deep); } .wf-toc__item.is-current a { color: var(--accent-deep); border-left-color: var(--brand); font-weight: 700; } /* ── Share ─────────────────────────────────────────────────────────────── */ .wf-share { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .wf-share__label { font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-right: 0.25rem; } .wf-share__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); border: 1px solid var(--hairline); background: #fff; color: var(--ink-soft); cursor: pointer; transition: all 0.18s ease-out; box-shadow: var(--shadow-sm); } .wf-share__btn:hover { color: var(--brand); border-color: #c7d7f5; transform: translateY(-2px); } .wf-share__btn svg { width: 1.1rem; height: 1.1rem; } .wf-share__btn.is-copied { background: var(--ink); border-color: var(--ink); color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════════ Prose — the article body itself ═══════════════════════════════════════════════════════════════════════ */ .wf-prose { max-width: var(--wf-measure); font-size: var(--t-lead); line-height: 1.75; color: var(--ink-soft); } .wf-prose > * { max-width: 100%; } .wf-prose p, .wf-prose ul, .wf-prose ol, .wf-prose dl { margin: 0 0 1.5rem; } .wf-prose > p:first-of-type { /* Lead paragraph. Not a separate class, because an editor writing in the block editor will never remember to add one. */ font-size: 1.3rem; line-height: 1.65; color: var(--ink); } .wf-prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(37, 99, 235, 0.35); transition: text-decoration-color 0.18s ease-out, color 0.18s ease-out; } .wf-prose a:hover { color: var(--accent-deep); text-decoration-color: currentColor; } .wf-prose strong { color: var(--ink); font-weight: 700; } .wf-prose h2, .wf-prose h3, .wf-prose h4 { color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; /* Anchors sit under a fixed header, so scroll targets need a landing pad. */ scroll-margin-top: calc(var(--wf-header-offset) + 1rem); } .wf-prose h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; margin: 3rem 0 1rem; } .wf-prose h3 { font-size: 1.35rem; font-weight: 800; margin: 2.25rem 0 0.75rem; } .wf-prose h4 { font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 0.5rem; } .wf-prose > h2:first-child, .wf-prose > h3:first-child { margin-top: 0; } /* A hairline above every h2 marks the sections without needing a rule element in the content. */ .wf-prose h2::before { content: ''; display: block; width: 2.5rem; height: 2px; margin-bottom: 1.25rem; background: var(--brand); border-radius: var(--r-full); } .wf-prose ul, .wf-prose ol { padding-left: 1.35rem; } .wf-prose li { margin-bottom: 0.6rem; } .wf-prose li::marker { color: var(--brand); } .wf-prose ul li::marker { font-size: 1.1em; } .wf-prose ol { list-style: decimal; } .wf-prose ul { list-style: disc; } .wf-prose li > ul, .wf-prose li > ol { margin: 0.6rem 0 0; } .wf-prose blockquote { margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 3px solid var(--brand); font-size: 1.3rem; line-height: 1.55; color: var(--ink); font-weight: 500; } .wf-prose blockquote p:last-child { margin-bottom: 0; } .wf-prose blockquote cite { display: block; margin-top: 0.85rem; font-size: var(--t-small); font-style: normal; font-weight: 700; color: var(--ink-muted); } .wf-prose code { font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; padding: 0.15em 0.4em; border-radius: var(--r-sm); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.14); color: var(--accent-deep); word-break: break-word; } .wf-prose pre { margin: 2rem 0; padding: 1.35rem 1.5rem; border-radius: var(--r-lg); background: var(--navy); color: #dbe6ff; overflow-x: auto; font-size: var(--t-small); line-height: 1.7; box-shadow: var(--shadow-md); border: 1px solid rgba(255, 255, 255, 0.08); } .wf-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .wf-prose img, .wf-prose video { border-radius: var(--r-lg); height: auto; } .wf-prose figure { margin: 2rem 0; } .wf-prose figcaption { margin-top: 0.75rem; font-size: var(--t-small); color: var(--ink-muted); text-align: center; } .wf-prose hr { margin: 3rem 0; border: 0; height: 1px; background: var(--hairline); } /* ── Tables ──────────────────────────────────────────────────────────────── Two things about the core table block have to be undone before any of this works, and both are the reason the first version of these rules had no effect at all. First, `.wp-block-table td, .wp-block-table th { border: 1px solid }` paints a currentColor grid on every cell. It scores the same specificity as a bare `.wf-prose td`, and core's per-block stylesheet is printed after the theme's, so on a tie it wins. Everything below is therefore scoped through `.wp-block-table` as well, to take the tie rather than hope for it. Second, core sets `border-collapse: collapse`. A collapsed table cannot be clipped by its own border-radius — `overflow: hidden` is ignored on `display: table` — so the cell borders ran straight through the rounded corners and out past the bottom edge. Separating the borders puts the rounding back in play, and the corner cells below carry the radius so their backgrounds follow it too. The result is the same surface as a card: hairline edge, one radius, tinted header, horizontal rules only. No vertical rules — column separators are a density the rest of the theme does not use. */ .wf-prose table, .wf-prose .wp-block-table table { width: 100%; margin: 2rem 0; border-collapse: separate; border-spacing: 0; font-size: var(--t-small); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; } .wf-prose th, .wf-prose td, .wf-prose .wp-block-table th, .wf-prose .wp-block-table td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--hairline); } .wf-prose thead, .wf-prose .wp-block-table thead, .wf-prose tfoot, .wf-prose .wp-block-table tfoot { /* Core draws these at 3px solid currentColor. */ border: 0; } .wf-prose thead th, .wf-prose .wp-block-table thead th { background: var(--color-surface-alt, #f6f8fc); color: var(--ink); font-weight: 700; font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; } .wf-prose tbody tr:nth-child(even), .wf-prose .wp-block-table tbody tr:nth-child(even) { background: rgba(246, 248, 252, 0.6); } /* The last row owns the bottom edge, so it must not draw a rule under itself — that was the second dark line in the report, sitting a pixel inside the container's own border. */ .wf-prose table > :last-child > tr:last-child > *, .wf-prose .wp-block-table table > :last-child > tr:last-child > * { border-bottom: 0; } /* Corner cells carry the radius, one pixel tighter than the container's so the fill sits inside the stroke rather than on it. Written against whichever section happens to come first and last, so it holds with or without a thead, and with a tfoot. */ .wf-prose table > :first-child > tr:first-child > *:first-child, .wf-prose .wp-block-table table > :first-child > tr:first-child > *:first-child { border-top-left-radius: calc(var(--r-lg) - 1px); } .wf-prose table > :first-child > tr:first-child > *:last-child, .wf-prose .wp-block-table table > :first-child > tr:first-child > *:last-child { border-top-right-radius: calc(var(--r-lg) - 1px); } .wf-prose table > :last-child > tr:last-child > *:first-child, .wf-prose .wp-block-table table > :last-child > tr:last-child > *:first-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); } .wf-prose table > :last-child > tr:last-child > *:last-child, .wf-prose .wp-block-table table > :last-child > tr:last-child > *:last-child { border-bottom-right-radius: calc(var(--r-lg) - 1px); } .wf-prose table caption, .wf-prose .wp-block-table table caption { caption-side: bottom; padding-top: 0.75rem; font-size: var(--t-small); color: var(--ink-muted); text-align: left; background: none; } /* Tables and code overflow their measure on a phone; give them a scroller of their own rather than letting the page scroll sideways. */ .wf-prose .wp-block-table { overflow-x: auto; margin: 2rem 0; } .wf-prose .wp-block-table table { margin: 0; } /* A four-column table on a phone looks like a three-column table with a column missing: the overflow is real but every modern browser hides the scrollbar until you touch it. blog.js marks the containers that actually overflow, and the fade is what tells you there is more to the right. It sits on the container rather than inside it, so it stays put while the content scrolls, and it lifts once you reach the end. */ .wf-prose .wp-block-table, .wf-prose pre { scrollbar-width: thin; scrollbar-color: #c7d7f5 transparent; } .wf-prose .wp-block-table::-webkit-scrollbar, .wf-prose pre::-webkit-scrollbar { height: 6px; } .wf-prose .wp-block-table::-webkit-scrollbar-thumb, .wf-prose pre::-webkit-scrollbar-thumb { background: #c7d7f5; border-radius: var(--r-full); } .wf-prose .is-scrollable:not(.is-at-end) { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%); mask-image: linear-gradient(to right, #000 86%, transparent 100%); } @media (max-width: 767px) { .wf-prose th, .wf-prose td, .wf-prose .wp-block-table th, .wf-prose .wp-block-table td { padding: 0.7rem 0.75rem; } } /* Wide blocks break the measure deliberately. */ .wf-prose .alignwide, .wf-prose .alignfull { max-width: var(--wf-measure-wide); margin-left: 50%; transform: translateX(-50%); } @media (max-width: 1099px) { .wf-prose .alignwide, .wf-prose .alignfull { max-width: 100%; margin-left: 0; transform: none; } } /* ── Callout ─────────────────────────────────────────────────────────────── Authored as a plain block-editor group with the class `wf-callout`, so it survives a copy-paste between posts and needs no plugin. */ .wf-callout { display: flex; gap: 1rem; margin: 2rem 0; padding: 1.35rem 1.5rem; border-radius: var(--r-lg); background: rgba(37, 99, 235, 0.05); border: 1px solid rgba(37, 99, 235, 0.18); font-size: var(--t-body); line-height: 1.65; } .wf-callout p:last-child { margin-bottom: 0; } .wf-callout__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: var(--brand); margin-top: 0.15rem; } .wf-callout__title { display: block; font-weight: 800; color: var(--ink); margin-bottom: 0.25rem; } .wf-callout--warn { background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.28); } .wf-callout--warn .wf-callout__icon { color: var(--gold-deep); } /* ── Tick / cross list ───────────────────────────────────────────────────── Posts that compare two options draw their points with a tick or a cross. The old markup carried a coloured glyph in a ; the mark is drawn here instead, so the distinction survives a change of palette. The glyph is decorative — but "yes" versus "no" is not, and colour alone would not carry it. The shapes differ (✓ / ✕), and each item gets a screen-reader label so the meaning does not depend on seeing either. */ .wf-prose .wf-checklist { list-style: none; margin: 1.5rem 0; padding: 0; } .wf-prose .wf-checklist li { position: relative; padding: 0.55rem 0 0.55rem 1.9rem; border-bottom: 1px solid var(--hairline); } .wf-prose .wf-checklist li:last-child { border-bottom: 0; } .wf-prose .wf-checklist li::before { position: absolute; left: 0; top: 0.55rem; font-weight: 700; line-height: 1.65; } /* The `/ 'text'` half is the generated content's alt text: browsers that support it read "Yes"/"No" instead of announcing the glyph, and those that do not simply ignore it. */ .wf-prose .wf-checklist li.is-yes::before { content: '✓' / 'Yes'; color: var(--brand); } .wf-prose .wf-checklist li.is-no::before { content: '✕' / 'No'; color: #b42318; } /* ── Comparison card ─────────────────────────────────────────────────────── Was a frosted panel that only worked on the midnight theme. On a light page the same job is done by a bordered card. */ .wf-prose .is-style-glass-card { margin: 1.75rem 0; padding: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); } .wf-prose .is-style-glass-card > :first-child { margin-top: 0; } .wf-prose .is-style-glass-card > :last-child { margin-bottom: 0; } /* ── Post tags ─────────────────────────────────────────────────────────── */ .wf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); max-width: var(--wf-measure); } .wf-article-foot { max-width: var(--wf-measure); margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } /* ── Author card ───────────────────────────────────────────────────────── */ .wf-author { display: flex; gap: 1.25rem; max-width: var(--wf-measure); margin-top: 3rem; padding: 1.75rem; background: var(--color-surface-alt, #f6f8fc); border: 1px solid var(--hairline); border-radius: var(--r-xl); } .wf-author__avatar { width: 4rem; height: 4rem; border-radius: var(--r-full); flex-shrink: 0; border: 2px solid #fff; box-shadow: var(--shadow-sm); } .wf-author__label { font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .wf-author__name { margin: 0.25rem 0 0.5rem; font-size: 1.15rem; font-weight: 800; color: var(--ink); } .wf-author__name a { color: inherit; } .wf-author__name a:hover { color: var(--brand); } .wf-author__bio { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--ink-soft); } /* ── Prev / next ───────────────────────────────────────────────────────── */ .wf-adjacent { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: var(--wf-measure); margin-top: 3rem; } @media (min-width: 700px) { .wf-adjacent { grid-template-columns: 1fr 1fr; } } .wf-adjacent__link { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.35rem; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); transition: all 0.18s ease-out; } .wf-adjacent__link:hover { border-color: #c7d7f5; box-shadow: var(--shadow-md); transform: translateY(-2px); } .wf-adjacent__dir { display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .wf-adjacent__dir svg { width: 0.9rem; height: 0.9rem; } .wf-adjacent__title { font-weight: 700; color: var(--ink); line-height: 1.35; } .wf-adjacent__link:hover .wf-adjacent__title { color: var(--brand); } .wf-adjacent__link--next { text-align: right; } .wf-adjacent__link--next .wf-adjacent__dir { justify-content: flex-end; } /* ═══════════════════════════════════════════════════════════════════════ Widgets ═══════════════════════════════════════════════════════════════════════ */ .wf-widget { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 1.35rem; box-shadow: var(--shadow-sm); font-size: var(--t-small); color: var(--ink-soft); } /* Block widgets put their own heading inside the block markup, so before_title/after_title never runs for them. Style both. */ .wf-widget__title, .wf-widget h1, .wf-widget h2, .wf-widget h3 { margin: 0 0 0.85rem; font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.4; } .wf-widget ul, .wf-widget ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .wf-widget li { line-height: 1.45; } .wf-widget li a { color: var(--ink-soft); transition: color 0.18s ease-out; } .wf-widget li a:hover { color: var(--brand); } /* Category counts, which the categories block prints as a bare "(3)". */ .wf-widget .wp-block-categories li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } /* Tag clouds are inline, not a column. */ .wf-widget .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; } .wf-widget .wp-block-tag-cloud a { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--color-surface-alt, #f6f8fc); color: var(--ink-soft); font-size: var(--t-micro) !important; font-weight: 700; transition: all 0.18s ease-out; } .wf-widget .wp-block-tag-cloud a:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .wf-widget .wf-chip { margin: 0 0.25rem 0.25rem 0; } /* Sidebar promo — the one place the blog sells anything mid-article. */ .wf-promo { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 1.5rem; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-raised) 100%); color: #fff; box-shadow: var(--shadow-md); } .wf-promo::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%); pointer-events: none; } .wf-promo > * { position: relative; } .wf-promo__kicker { font-family: 'Space Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #bfdbfe; } .wf-promo__title { margin: 0.6rem 0 0.5rem; font-size: 1.35rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; color: #fff; } .wf-promo__copy { margin: 0 0 1.15rem; font-size: var(--t-small); line-height: 1.6; color: #c3d0e8; } .wf-promo__btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.15rem; border-radius: var(--r-full); background: #fff; color: var(--navy); font-weight: 800; font-size: var(--t-small); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; } .wf-promo__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .wf-promo__btn svg { width: 1rem; height: 1rem; } .wf-promo__meta { margin: 0.85rem 0 0; font-size: var(--t-micro); color: #93a4c4; } /* ═══════════════════════════════════════════════════════════════════════ Pagination ═══════════════════════════════════════════════════════════════════════ */ .wf-pagination { margin-top: 3rem; } .wf-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .wf-pagination .page-numbers { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 2.75rem; height: 2.75rem; padding: 0 0.9rem; justify-content: center; border-radius: var(--r-full); border: 1px solid var(--hairline); background: #fff; color: var(--ink-soft); font-weight: 700; font-size: var(--t-small); box-shadow: var(--shadow-sm); transition: all 0.18s ease-out; } .wf-pagination .page-numbers:hover { color: var(--brand); border-color: #c7d7f5; transform: translateY(-1px); } .wf-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; } .wf-pagination .page-numbers.dots { background: none; border-color: transparent; box-shadow: none; } .wf-pagination__icon { width: 1rem; height: 1rem; } .wf-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ Comments ═══════════════════════════════════════════════════════════════════════ */ .wf-comments { max-width: var(--wf-measure); margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--hairline); } .wf-comments__title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 2rem; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); } .wf-comments__title svg { width: 1.35rem; height: 1.35rem; color: var(--brand); } .wf-comments .comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .wf-comments .comment-list .children { list-style: none; margin: 1.25rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--hairline); display: flex; flex-direction: column; gap: 1.25rem; } .wf-comment__body { padding: 1.35rem 1.5rem; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .wf-comment__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; } .wf-comment__avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); flex-shrink: 0; } .wf-comment__author { font-weight: 700; color: var(--ink); font-size: var(--t-small); line-height: 1.3; } .wf-comment__date { display: block; font-size: var(--t-micro); color: var(--ink-muted); } .wf-comment__badge { margin-left: auto; } .wf-comment__text { font-size: var(--t-body); line-height: 1.7; color: var(--ink-soft); } .wf-comment__text p { margin: 0 0 0.85rem; } .wf-comment__text p:last-child { margin-bottom: 0; } .wf-comment__actions { margin-top: 0.85rem; display: flex; gap: 1rem; font-size: var(--t-small); font-weight: 700; } .wf-comment__actions a { color: var(--brand); } .wf-comment--pending .wf-comment__body { border-style: dashed; background: rgba(245, 158, 11, 0.05); } .wf-comments .comment-respond { padding: 1.75rem; background: var(--color-surface-alt, #f6f8fc); border: 1px solid var(--hairline); border-radius: var(--r-xl); } .wf-comments .comment-reply-title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } .wf-comments .comment-reply-title small { font-size: var(--t-small); font-weight: 600; margin-left: 0.75rem; } .wf-comments .comment-notes, .wf-comments .logged-in-as { font-size: var(--t-small); color: var(--ink-muted); margin: 0 0 1.25rem; } .wf-comments .comment-form { display: flex; flex-direction: column; gap: 1rem; } .wf-comments .comment-form p { margin: 0; } .wf-comments .comment-form label { display: block; margin-bottom: 0.35rem; font-size: var(--t-small); font-weight: 700; color: var(--ink); } .wf-comments input[type="text"], .wf-comments input[type="email"], .wf-comments input[type="url"], .wf-comments textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #fff; font: inherit; font-size: var(--t-small); color: var(--ink); transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out; } .wf-comments textarea { min-height: 8rem; resize: vertical; } .wf-comments input:focus, .wf-comments textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .wf-comments .comment-form-cookies-consent { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-small); } .wf-comments .comment-form-cookies-consent label { margin: 0; font-weight: 500; color: var(--ink-soft); } .wf-comments .form-submit { margin: 0; } .wf-comments .submit { padding: 0.85rem 1.75rem; border: 0; border-radius: var(--r-full); background: var(--brand); color: #fff; font-weight: 800; font-size: var(--t-small); cursor: pointer; transition: background 0.18s ease-out, transform 0.18s ease-out; } .wf-comments .submit:hover { background: #1d4ed8; transform: translateY(-1px); } .wf-comments .no-comments { font-size: var(--t-small); color: var(--ink-muted); } /* ═══════════════════════════════════════════════════════════════════════ Empty states and 404 ═══════════════════════════════════════════════════════════════════════ */ .wf-empty { max-width: 34rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; } .wf-empty__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem; padding: 0.9rem; color: var(--brand); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.18); border-radius: var(--r-lg); } .wf-empty__title { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.75rem; } .wf-empty__copy { color: var(--ink-soft); margin: 0 0 1.75rem; line-height: 1.7; } .wf-empty .wf-search { margin: 0 auto 1.5rem; } .wf-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: var(--r-full); background: var(--brand); color: #fff; font-weight: 800; font-size: var(--t-small); box-shadow: var(--shadow-sm); transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s ease-out; } .wf-btn:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: var(--shadow-md); } .wf-btn svg { width: 1rem; height: 1rem; } .wf-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--hairline); } .wf-btn--ghost:hover { background: #fff; color: var(--brand); border-color: #c7d7f5; } .wf-404 { font-family: 'Space Mono', ui-monospace, monospace; font-size: clamp(4rem, 16vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(120deg, var(--brand), var(--accent-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 1rem; } /* ═══════════════════════════════════════════════════════════════════════ Static pages ═══════════════════════════════════════════════════════════════════════ */ .wf-page-body { padding: 3rem 0 4rem; } /* ═══════════════════════════════════════════════════════════════════════ Small-screen adjustments ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 639px) { :root { --wf-header-offset: 7rem; } .wf-article-hero { margin-bottom: -3rem; } .wf-article-body-wrap { padding-top: 5rem; } .wf-lead__body { padding: 1.5rem; } .wf-author { flex-direction: column; } .wf-prose { font-size: var(--t-body); } .wf-prose > p:first-of-type { font-size: var(--t-lead); } } /* The nav is a fixed overlay; when the mobile drawer is open nothing behind it should be reachable. main.js already locks body scroll, this locks focus order visually. */ .mobile-menu:not(.active) { pointer-events: none; } .mobile-menu.active { pointer-events: auto; } @media print { .promo-banner, nav, .mobile-menu, .wf-rail, #finalCta, footer, .wf-share, .wf-adjacent, .wf-progress, .wf-comments { display: none !important; } .wf-article-body-wrap { padding-top: 0; } .wf-prose { max-width: none; font-size: 11pt; } }