/* ========================================================================== Biscuit blog -------------------------------------------------------------------------- The Blog page (page-blog.php), a post (single-blog.php), the category, tag and author pages, and the parts they share: the post card, the author box and Recommended Reading. Loaded only on those pages, by biscuit_is_blog_view() in functions.php. The cards are two to a row, the second column set lower than the first. Each card's image opens upward and its text rises as it scrolls in, and on hover the image eases in slightly and the title underlines itself. The scroll part is the scroll reveal in assets/js/biscuit.js (biscuit-blog.js until October 22, 2026), which adds html.has-reveal; without it, or under reduced motion, every card is simply there. style.css sets global rules on p, ol and li (margins, list indents, `transition: all` on a, img and li). Each block resets what reaches it, marked "style.css". Headings have brand defaults there since phase 3 of the stylesheet reorganization, October 13, 2026. Started October 12, 2026, step 5 of wordpress-conversion-2026.md. ========================================================================== */ /* ---------- Page frame ----------------------------------------------------- */ .blog-main__inner { background: var(--biscuit-page); } /* Flexible Page Content sections on the Blog page, October 14, 2026. They follow the Flexible pages rules in biscuit.css: with no head, the first section's top padding grows to clear the fixed header; after the head, it starts close under it. */ .blog-main__inner > .sec:first-child { padding-top: max(var(--sec-pt, 0px), clamp(130px, 13vw, 210px)); } .blog-head + .sec.sec--pt-l { --sec-pt: clamp(32px, 3.6vw, 64px); } /* A link in a label: muted, brightening to the brand orange. */ .label a { color: inherit; text-decoration: none; } .label a:hover, .label a:focus-visible { color: var(--biscuit-accent); } /* ---------- The head of the Blog, category, tag and author pages ----------- */ .blog-head { padding-top: clamp(130px, 13vw, 210px); padding-bottom: clamp(56px, 6.5vw, 116px); } @media (min-width: 992px) { .blog-head:not(.blog-head--author):has(.blog-head__intro) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: end; } .blog-head__label { grid-column: 1 / -1; } } .blog-head__label { margin: 0 0 18px; font-weight: var(--biscuit-weight-strong); } .blog-head__title { margin: 0; font-size: var(--display-xl); line-height: .96; letter-spacing: -0.02em; } .blog-head__intro { max-width: 34em; margin-top: clamp(24px, 2.5vw, 40px); font-size: var(--text-l); line-height: 1.5; color: var(--biscuit-body); } @media (min-width: 992px) { .blog-head:not(.blog-head--author):has(.blog-head__intro) .blog-head__intro { margin-top: 0; } } .blog-head__intro > :last-child { margin-bottom: 0; } /* Load-in, CSS only, as on the home hero: the title rises out of its mask, the intro follows. */ .blog-head__title .mask-line > span { transform: translateY(108%); animation: rise 1.15s var(--ease) .1s forwards; } .blog-head__intro { opacity: 0; animation: fade-up 1s var(--ease) .45s forwards; } /* The author page: the headshot beside the name. */ .blog-head--author { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 3.5vw, 64px); align-items: start; } .blog-head__photo { display: block; width: clamp(88px, 11vw, 180px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--biscuit-panel); } /* Every attachment image carries Bootstrap's w-100 from the gallery code in functions.php, so headshots are sized by a wrapper and fill it. */ .blog-head__photo img, .byline__photo img, .author-box__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .blog-head--author .blog-head__intro { margin-top: clamp(20px, 2vw, 32px); } .blog-head__role { margin: 0 0 1em; font-weight: var(--biscuit-weight-strong); color: var(--biscuit-heading); } .blog-head__links { margin: 1.2em 0 0; } @media (max-width: 575px) { .blog-head--author { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } } /* ---------- The list -------------------------------------------------------- */ .blog-list { padding-bottom: clamp(90px, 11vw, 200px); } /* Two to a row from 768px. The second column sits lower than the first, by moving each card rather than the rows, so the rows stay even and the last card needs only the grid's own bottom padding to clear the button. :nth-child(... of .post-card) counts cards only, whatever else the plugin puts in the list. */ .post-grid { --post-drop: 0px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 6vw, 96px); margin: 0; padding: 0; } @media (min-width: 768px) { .post-grid { --post-drop: clamp(60px, 9vw, 170px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5.5vw, 104px); row-gap: clamp(72px, 7vw, 128px); padding-bottom: var(--post-drop); } .post-grid > :nth-child(2n of .post-card) { translate: 0 var(--post-drop); } } /* With no posts, the plugin puts its message straight into the grid as text. */ .post-grid { color: var(--biscuit-muted); } /* ---------- The card --------------------------------------------------------- */ .post-card { min-width: 0; } /* The ground's heading color, so a card on a dark section (Featured Blog Posts, step 6) reads off-white. */ .post-card__link { display: block; text-decoration: none; color: var(--prose-heading, var(--biscuit-heading)); } .post-card__link:hover, .post-card__link:focus-visible, .post-card__link:active { color: var(--prose-heading, var(--biscuit-heading)); text-decoration: none; } .post-card__link:focus-visible { outline: 3px solid var(--biscuit-accent); outline-offset: 6px; } /* The image box holds its shape whatever size the upload is (THEME-RULES, "never trust a registered size to exist"). Cream shows until it loads. */ .post-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--biscuit-panel); } /* Two properties, two jobs: scale for the reveal, transform for the hover, so neither cancels the other. style.css gives every img `transition: all`. */ .post-card__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.1s var(--ease), scale 1.6s var(--ease); } .post-card__link:hover .post-card__img, .post-card__link:focus-visible .post-card__img { transform: scale(1.045); } .post-card__body { display: block; padding-top: clamp(18px, 1.7vw, 28px); } /* The label, with a small orange dot ahead of it. */ .post-card__label { display: inline-flex; align-items: center; gap: .75em; font-family: var(--font-text); font-size: var(--text-label); font-weight: var(--biscuit-weight-strong); text-transform: uppercase; letter-spacing: var(--biscuit-label-tracking); color: var(--biscuit-muted); } .post-card__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--biscuit-accent); } .post-card__title { max-width: 21em; margin: .55em 0 0; font-size: var(--h2); line-height: 1.12; letter-spacing: -0.012em; color: inherit; } /* The underline draws itself from the left on hover, under every line. */ .post-card__title > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); padding-bottom: .04em; } .post-card__link:hover .post-card__title > span, .post-card__link:focus-visible .post-card__title > span { background-size: 100% 2px; } /* The reveal, only once biscuit.js's scroll reveal is running. The image opens upward from its bottom edge and settles from a slight zoom; the text rises after it; the second column trails the first. */ .has-reveal .post-card .post-card__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); } .has-reveal .post-card .post-card__img { scale: 1.14; } .has-reveal .post-card .post-card__body { opacity: 0; translate: 0 28px; transition: opacity .9s ease .2s, translate 1.1s var(--ease) .2s; } .has-reveal .post-card.is-in .post-card__media { clip-path: inset(0 0 0 0); } .has-reveal .post-card.is-in .post-card__img { scale: 1; } .has-reveal .post-card.is-in .post-card__body { opacity: 1; translate: 0 0; } @media (min-width: 768px) { .has-reveal .post-grid > :nth-child(2n of .post-card) .post-card__media { transition-delay: .12s; } .has-reveal .post-grid > :nth-child(2n of .post-card) .post-card__body { transition-delay: .32s; } } /* ---------- More posts -------------------------------------------------------- Ajax Load More's button, in the pill's colors. The plugin prints its own styles inline; these outrank them. Its loading spinner is left alone. */ .blog-list .alm-btn-wrap { margin: 0; padding: clamp(40px, 4vw, 72px) 0 0; text-align: left; } .blog-list .alm-btn-wrap .alm-load-more-btn { height: 48px; padding: 0 calc(30px - .12em) 0 30px; /* less the spacing after the last letter */ border-radius: 999px; box-shadow: none; background: var(--biscuit-panel); font-family: var(--font-text); font-size: var(--text-s); font-weight: var(--biscuit-weight-strong); text-transform: uppercase; letter-spacing: .12em; color: var(--biscuit-heading); transition: background-color .3s ease, color .3s ease; } /* White on the deep orange is 6.05:1; on the brand orange it would fail. */ .blog-list .alm-btn-wrap .alm-load-more-btn:hover, .blog-list .alm-btn-wrap .alm-load-more-btn:focus-visible { background: var(--biscuit-button); color: var(--biscuit-button-label); } .blog-list .alm-btn-wrap .alm-load-more-btn:focus-visible { outline: 2px solid var(--biscuit-accent); outline-offset: 3px; } .blog-list .alm-btn-wrap .alm-load-more-btn.done, .blog-list .alm-btn-wrap:has(.done) { display: none; } /* ---------- A post ----------------------------------------------------------- */ /* One reading column, centered. .wide gives the gutter; this narrows it. The All posts button too, so it lines up with the text (Jason, October 15, 2026). */ .post-head, .post-body, .post-foot, .post-back { max-width: calc(800px + var(--gutter) * 2); } .post-head { padding-top: clamp(130px, 13vw, 210px); padding-bottom: clamp(32px, 3.4vw, 56px); } .post-head__label { display: flex; align-items: center; gap: .75em; margin: 0 0 20px; font-weight: var(--biscuit-weight-strong); } .post-head__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--biscuit-accent); } .post-head__title { margin: 0; font-size: clamp(2.375rem, 4.6vw, 4.75rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; } .byline { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: clamp(24px, 2.4vw, 36px) 0 0; font-size: var(--text-s); line-height: 1.4; color: var(--biscuit-body); } .byline__author { display: inline-flex; align-items: center; gap: 12px; } .byline__photo { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--biscuit-panel); } .byline a { color: var(--biscuit-heading); font-weight: var(--biscuit-weight-strong); text-decoration: none; } .byline a:hover, .byline a:focus-visible { color: var(--biscuit-link); text-decoration: underline; } .byline__title { display: block; color: var(--biscuit-muted); } .post-summary { margin: clamp(28px, 3vw, 44px) 0 0; padding: clamp(22px, 2.4vw, 36px); background: var(--biscuit-off-white); /* the lighter ground, not the cream panel. Jason, October 13, 2026 */ font-size: var(--text-m); line-height: 1.6; color: var(--biscuit-heading); } .post-summary .label { margin: 0 0 .8em; font-weight: var(--biscuit-weight-strong); } .post-summary > :last-child { margin-bottom: 0; } /* The featured video or image, wider than the text. */ .post-media { max-width: calc(1120px + var(--gutter) * 2); margin: clamp(16px, 2vw, 32px) auto clamp(40px, 4vw, 64px); } .post-media img { display: block; width: 100%; height: auto; } .post-media figcaption { margin-top: 12px; font-size: var(--text-xs); color: var(--biscuit-muted); } .post-media__video { aspect-ratio: 16 / 9; background: var(--biscuit-near-black); } .post-media__video iframe { display: block; width: 100%; height: 100%; border: 0; } /* The post itself. Its type is .prose, in biscuit.css (its biscuit-content.css part), shared with the flexible sections since step 6; only the spacing is here. */ .post-body { padding-top: clamp(8px, 1vw, 16px); } /* The end of a post: the author box, then the date and tags. */ /* A