/** * Personal Blog (mediocreopinions.com) — visual layer * * Loaded ONLY when nicparkes_is_personal_blog() is true (see * inc/personal-blog.php enqueue). Stacks on top of main.css. * * Black & white treatment, "header band only": * - The site header bar is painted black with white type. * - Page-title bands (archive header, single-post header) are painted * black with white type. * - Body / cards / footer keep the main-site light layout. * - Inter 800 used for headings (the wordmark, page titles, post titles). * * Re-tune by editing --pb-band / --pb-band-ink / --pb-display below. */ body.personal-blog { --pb-band: #0F0F0F; --pb-band-ink: #FFFFFF; --pb-band-ink-soft: rgba(255, 255, 255, 0.72); --pb-band-rule: rgba(255, 255, 255, 0.18); --pb-accent: #FF5A1F; /* RGB triplet for the accent so we can compose alpha tints with rgba(var(--pb-accent-rgb), x) — keeps every tinted background in sync with the master --pb-accent value. */ --pb-accent-rgb: 255, 90, 31; /* Darker accent for hover states on text-link primaries. */ --pb-accent-soft: #c43d10; --pb-display: 'Google Sans Flex', 'Google Sans', system-ui, 'Helvetica Neue', Arial, sans-serif; /* Approximate height of the breadcrumb strip (wordmark padding + glyph). Used to offset the reading-progress bar below the sticky breadcrumb. */ --pb-breadcrumb-h: 3.7rem; } /* Apply Google Sans Flex across the entire PB surface — body, headings, chrome, the lot. Inherits down from . */ body.personal-blog, body.personal-blog input, body.personal-blog button, body.personal-blog select, body.personal-blog textarea { font-family: var(--pb-display); } /* ========================================================================== Site header — hidden on PB. The wordmark in the hero serves as the brand identifier; the personal blog has no menu nav (visitors get back via breadcrumbs on inner pages). ========================================================================== */ body.personal-blog .site-header { display: none; } /* main.css adds padding-top: var(--header-height) on body.has-sticky-header to make room for the fixed header. Hiding the header doesn't remove that spacer — kill it on PB so the hero band starts at the very top. */ body.personal-blog.has-sticky-header, body.has-sticky-header.personal-blog { padding-top: 0; } /* The rest of these rules are kept so the header bar styles itself correctly if it's ever re-enabled (e.g. by removing the rule above). They cost nothing while hidden. */ body.personal-blog .site-header { background: #FFFFFF; color: var(--pb-band); border-bottom: 1px solid rgba(15, 15, 15, 0.08); box-shadow: none; } body.personal-blog .site-header__inner { background: transparent; } body.personal-blog .site-header__content { color: var(--pb-band); } /* Typed wordmark fallback (header.php) — Inter 800, black. */ body.personal-blog .site-header__wordmark, body.personal-blog .site-header__wordmark:visited { font-family: var(--pb-display); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -0.01em; line-height: 1; color: var(--pb-band); text-decoration: none; display: inline-block; } body.personal-blog .site-header__wordmark:hover, body.personal-blog .site-header__wordmark:focus { color: var(--pb-band); opacity: 0.7; } /* Primary nav links — black. */ body.personal-blog .main-navigation .nav__list a, body.personal-blog .main-navigation .nav__list a:visited { color: var(--pb-band); } body.personal-blog .main-navigation .nav__list a:hover, body.personal-blog .main-navigation .nav__list a:focus { color: var(--pb-band); opacity: 0.65; } /* Header CTA — hidden on PB. The personal blog has its own primary menu and doesn't need the main-site "Get in Touch" pill. Hide both desktop and the duplicated mobile drawer instance. */ body.personal-blog .btn--header, body.personal-blog .mobile-nav__cta { display: none !important; } /* Mobile menu toggle bars + drawer — match the white header. */ body.personal-blog .mobile-menu-toggle__bar { background: var(--pb-band); } body.personal-blog .mobile-nav { background: #FFFFFF; color: var(--pb-band); } body.personal-blog .mobile-nav__list a, body.personal-blog .mobile-nav__list a:visited { color: var(--pb-band); } /* ========================================================================== Page-title bands — same treatment as the site header. Two surfaces: - .section--archive-header (templates/personal-blog-archive.php) - .single-post__header (single.php) ========================================================================== */ body.personal-blog .section--archive-header, body.personal-blog .single-post__header { background: var(--pb-band); color: var(--pb-band-ink); padding: clamp(2rem, 5vw, 4rem) 0; } /* main.css overlays a faint purple→blue brand gradient on every .section--archive-header via a ::before pseudo. On our black band that reads as a purple tint — kill it on PB. */ body.personal-blog .section--archive-header::before, body.personal-blog .single-post__header::before { display: none; } /* ========================================================================== Breadcrumbs (single posts and tag archives — they sit above the dark hero band on a white page surface). main.css gives them a light-grey strip and a purple hover — both clash with the PB stark black/white. Restyle to a clean white strip with black text. ========================================================================== */ body.personal-blog .breadcrumbs { background: #FFFFFF; border-bottom: 1px solid rgba(15, 15, 15, 0.06); padding: 0.75rem 0; position: sticky; top: 0; z-index: 100; } body.personal-blog .breadcrumbs__list { color: var(--pb-band); } body.personal-blog .breadcrumbs__link, body.personal-blog .breadcrumbs__link:visited { color: var(--pb-band); opacity: 0.7; text-decoration: none; } body.personal-blog .breadcrumbs__link:hover { color: var(--pb-band); opacity: 1; text-decoration: none; } body.personal-blog .breadcrumbs__item--current { color: var(--pb-band); font-weight: 600; } /* On PB the first crumb plays the role of the wordmark — bold, slightly larger, full opacity. Doesn't affect main-site breadcrumbs. */ body.personal-blog .breadcrumbs__link--home-pb, body.personal-blog .breadcrumbs__link--home-pb:visited { font-family: var(--pb-display); font-weight: 800; font-size: clamp(1.75rem, 2.4vw, 2.4rem) !important; line-height: 1; letter-spacing: -0.02em; color: var(--pb-band); opacity: 1; } body.personal-blog .breadcrumbs__link--home-pb:hover { color: var(--pb-accent); opacity: 1; text-decoration: none; } body.personal-blog .breadcrumbs__item:not(:last-child)::after { color: var(--pb-accent); font-weight: 600; } /* The first breadcrumb item contains the big wordmark, so its separator inherits a baseline-aligned position which sits low against tall text. Scale the separator up and centre-align it so it sits on the wordmark's midline. */ body.personal-blog .breadcrumbs__item:first-child:not(:last-child)::after { font-size: clamp(1.5rem, 2.2vw, 2rem); vertical-align: middle; line-height: 1; margin-left: 0.5rem; margin-right: 0.25rem; } /* ========================================================================== Reading progress bar — main.css fixes it to top:0. On PB the breadcrumb strip is sticky there, so the bar would sit hidden behind it. Push it down to align with the bottom edge of the breadcrumb, and recolour it with the orange accent so the progress reads as a brand wipe. ========================================================================== */ body.personal-blog .reading-progress { top: var(--pb-breadcrumb-h); z-index: 99; /* below the breadcrumb strip itself */ } body.personal-blog .reading-progress__bar { background: var(--pb-accent); } /* ========================================================================== Text selection — stark black highlight, white text. Reinforces the editorial monochrome. ========================================================================== */ body.personal-blog ::selection { background: var(--pb-accent); color: var(--pb-band); } body.personal-blog ::-moz-selection { background: var(--pb-accent); color: var(--pb-band); } /* ========================================================================== Footer — simplified on PB. The main panel is kept *only* to display the footer logo (PB branding); everything else inside it is hidden — about text / tagline, social links, widget areas, contact info, accreditations. The slim bottom strip below shows copyright + legal menu (legal links point to the main domain via the home_url skip flag in PHP, so a click goes straight to nicparkes.com without a redirect hop). ========================================================================== */ /* Hide everything inside the "about" column except the logo. Catches the tagline, the about copy, and the social-links block. */ body.personal-blog .site-footer__column--about > *:not(.site-footer__logo) { display: none; } /* Hide the other columns wholesale. */ body.personal-blog .site-footer__column--widgets, body.personal-blog .site-footer__column--contact, body.personal-blog .site-footer__column--accreditations { display: none; } /* With only one column visible, let it sit naturally rather than stretching to fill a multi-column grid. */ body.personal-blog .site-footer__grid { display: block; } body.personal-blog .site-footer__main { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); } /* main.css sets .site-footer to dark-grey background with light text — we keep that dark-on-dark band but the bottom-strip elements need light text colours, otherwise our earlier near-black overrides render invisible. */ body.personal-blog .site-footer__bottom { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: clamp(1rem, 2vw, 1.5rem) 0; } body.personal-blog .site-footer__copyright { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; } body.personal-blog .site-footer__legal-nav .legal-nav__list a, body.personal-blog .site-footer__legal-nav .legal-nav__list a:visited { color: rgba(255, 255, 255, 0.7); } body.personal-blog .site-footer__legal-nav .legal-nav__list a:hover { color: #FFFFFF; } /* Two-column hero: title/description/tag-filter on the left, profile card on the right. Stacks on narrow viewports. .pb-hero wraps the page-header and the optional .pb-profile aside. */ body.personal-blog .pb-hero { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } body.personal-blog .section--archive-header--with-profile .pb-hero { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { body.personal-blog .section--archive-header--with-profile .pb-hero { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); } } /* Profile card itself */ body.personal-blog .pb-profile { color: var(--pb-band-ink); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--pb-band-rule); border-radius: 4px; } /* Top row: image + first-sentence greeting side-by-side. */ body.personal-blog .pb-profile__top { display: flex; align-items: center; gap: 1rem; width: 100%; } body.personal-blog .pb-profile__greeting { margin: 0; color: var(--pb-band-ink); font-family: var(--pb-display); font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; } body.personal-blog .pb-profile__image { width: 88px; height: 88px; border-radius: 999px; overflow: hidden; flex-shrink: 0; } body.personal-blog .pb-profile__img { width: 100%; height: 100%; object-fit: cover; display: block; } body.personal-blog .pb-profile__intro, body.personal-blog .pb-profile__intro p { color: var(--pb-band-ink-soft); font-size: 0.95rem; line-height: 1.55; margin: 0; } body.personal-blog .pb-profile__intro p + p { margin-top: 0.5em; } body.personal-blog .pb-profile__more, body.personal-blog .pb-profile__more:visited { color: var(--pb-band-ink); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.25rem; } body.personal-blog .pb-profile__more:hover { color: var(--pb-band-ink); opacity: 0.75; } /* PB Page template — body content section after the dark hero band. */ body.personal-blog .site-main--personal-blog-page .section--page-content { background: transparent; padding: clamp(2rem, 5vw, 4rem) 0; } body.personal-blog .site-main--personal-blog-page .entry-content { color: inherit; } /* Archive hero — left-aligned editorial layout. main.css's `.page-header--centered` constrains the block to 800px and auto-margins it; reset both so the H1 aligns with the tag-filter row below it. */ body.personal-blog .section--archive-header .page-header, body.personal-blog .section--archive-header .page-header--centered { text-align: left; max-width: none; margin-left: 0; margin-right: 0; } body.personal-blog .section--archive-header .archive-description { margin-left: 0; margin-right: auto; } /* (Earlier we visually-hid the PB archive H1 because it duplicated the wordmark in the header bar. With the header now hidden, the H1 is the brand identifier — let it render normally.) */ /* Page title inside the archive band (tag archives use this — the PB category archive's title is visually hidden above). White, heavy, sized confidently to fill the band. The descendant selector also recolours the `.page-description` span (where "Posts about:" sits) so it doesn't inherit main.css's muted heading colour. */ body.personal-blog .section--archive-header .page-title, body.personal-blog .section--archive-header .page-title * { color: var(--pb-band-ink); } body.personal-blog .section--archive-header .page-title { font-family: var(--pb-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1; margin: 0 0 0.4em; text-align: left; /* Allow wrap; main.css doesn't constrain width but be explicit. */ max-width: 100%; word-break: normal; overflow-wrap: break-word; } /* Orange full stop on the archive-band H1 — applies across the PB category archive, the Personal Blog Page template, and PB tag archives (all of which carry body.personal-blog and the .section--archive-header band). */ body.personal-blog .section--archive-header .page-title::after { content: '.'; color: var(--pb-accent); } /* On the PB *category* archive (with the profile card), the description below the H1 duplicates what the profile card already says — hide it. */ body.personal-blog .site-main--personal-blog .section--archive-header .archive-description { display: none; } body.personal-blog .section--archive-header .page-title .page-description { font-weight: 500; color: var(--pb-band-ink-soft); } /* Single-post hero — bold, left-aligned editorial layout. main.css centres this block; on PB we want it to read like a magazine article opener: eyebrow row left, oversized display title left, sub-deck left, meta left. single.php wraps the hero in .container--narrow (800px) which keeps the block visually centred on the page even with text-align:left — break it out to the wider .container width to match the archive hero's flush edge. */ body.personal-blog .single-post__header { text-align: left; } body.personal-blog .single-post__header .container--narrow { max-width: var(--container-max); text-align: left; } body.personal-blog .single-post__badges { justify-content: flex-start; gap: 0.75rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); } body.personal-blog .single-post__title { font-family: var(--pb-display); font-weight: 800; letter-spacing: -0.02em; color: var(--pb-band-ink); font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 1.05; margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem); text-align: left; text-wrap: balance; /* Cap title width so short titles ("Do I need a wallet any more?") wrap to multiple lines like long ones — keeps the hero rhythm consistent across posts instead of some titles fitting on one line and others breaking onto three. ch units track font size so this scales with the clamp() above. */ max-width: 16ch; } /* Orange end-mark — either the title's own terminal punctuation (recoloured) or an appended "." from the PHP helper. */ body.personal-blog .single-post__title .pb-title-end { color: var(--pb-accent); } /* "This post is X years old…" notice on imported / pre-2025 PB posts. Sits directly above the entry content. Soft accent-tinted card with the clock icon pulled out into its own column. */ body.personal-blog .pb-old-notice { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 2rem; padding: 1rem 1.15rem; border-radius: var(--radius-md, 8px); background: rgba(var(--pb-accent-rgb), 0.08); border-left: 3px solid var(--pb-accent); color: var(--color-text, inherit); font-size: 0.95rem; line-height: 1.5; } body.personal-blog .pb-old-notice__icon { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--pb-accent); margin-top: 0.15rem; } body.personal-blog .pb-old-notice__icon svg { width: 100%; height: 100%; } body.personal-blog .pb-old-notice__body { flex: 1 1 auto; } body.personal-blog .pb-old-notice__lead, body.personal-blog .pb-old-notice__follow { margin: 0; } body.personal-blog .pb-old-notice__follow { margin-top: 0.5rem; opacity: 0.85; } /* Goodreads reading-challenge card — main.css uses --color-primary (purple) for the header gradient, progress fill and percent number. Recolour to the PB orange accent so it sits in with the rest of the personal-blog chrome. */ body.personal-blog .gr-challenge-card__header { background: linear-gradient(135deg, var(--pb-accent) 0%, var(--pb-accent-soft) 100%); } body.personal-blog .gr-challenge-card__progress-fill { background: linear-gradient(90deg, var(--pb-accent) 0%, var(--pb-accent-soft) 100%); } body.personal-blog .gr-challenge-card__percent { color: var(--pb-accent); } body.personal-blog .gr-challenge-card__link:hover { color: var(--pb-accent); } body.personal-blog .single-post__excerpt { margin-left: 0; margin-right: 0; text-align: left; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; /* Tight measure (45ch ≈ ~50 characters per line) keeps the excerpt sitting in the left column on hero-with-media layouts so the text doesn't run under the image strip, and keeps it inside a comfortable reading measure on text-only heroes too. */ max-width: 45ch; } /* Inline links inside the hero excerpt — main.css renders them as primary purple, which clashes on the PB black band. Recolour to the orange accent with an underline so they still read as links against the muted-white excerpt copy. */ body.personal-blog .single-post__excerpt a, body.personal-blog .single-post__excerpt a:visited { color: var(--pb-accent); text-decoration: underline; text-underline-offset: 0.15em; } body.personal-blog .single-post__excerpt a:hover, body.personal-blog .single-post__excerpt a:focus-visible { color: var(--pb-band-ink); text-decoration-thickness: 2px; } body.personal-blog .section--archive-header .archive-description, body.personal-blog .section--archive-header .archive-description p, body.personal-blog .single-post__excerpt { color: var(--pb-band-ink-soft); } /* Series navigation — bottom-of-post block listing every part of the writing series. main.css paints the dark header in gray-800 and the active/hover accents in primary purple; on PB we want the header to match the page-title band (pure black + Inter display title) and every purple touch to switch to the orange accent. */ /* Card frame: keep neutral gray surround so the dark header band reads strongly, but tighten the corner radius slightly to feel editorial. */ body.personal-blog .series-nav { border-radius: var(--radius-md); } /* Header band — pure black to mirror .single-post__header / archive band, with the series title in the PB display face. */ body.personal-blog .series-nav__header { background: var(--pb-band); color: var(--pb-band-ink); } body.personal-blog .series-nav__label { color: var(--pb-accent); } body.personal-blog .series-nav__title { font-family: var(--pb-display); font-weight: 800; letter-spacing: -0.02em; color: var(--pb-band-ink); } body.personal-blog .series-nav__description { color: var(--pb-band-ink-soft); } /* Prev/next arrow row — recolour the hover state from purple to orange. */ body.personal-blog .series-nav__arrow:hover { color: var(--pb-accent); } /* Current-part card — orange tint instead of purple tint, with an orange inset rule on the leading edge so the "you are here" row reads as the focal point of the list. */ body.personal-blog .series-nav__card--current { background: rgba(var(--pb-accent-rgb), 0.08); /* var(--pb-accent) at 8% */ box-shadow: inset 3px 0 0 var(--pb-accent); } body.personal-blog .series-nav__card--current .series-nav__card-part { color: var(--pb-accent); } body.personal-blog .series-nav__card-current { color: var(--pb-accent); } /* Hover state on linked cards — title goes orange, matching the rest of the link hover treatment on PB. */ body.personal-blog a.series-nav__card:hover .series-nav__card-title { color: var(--pb-accent); } /* Table of contents — main.css paints the active item purple (text + left rule + tinted background). Recolour to the PB accent so the active section pops in brand orange instead of bleeding the main site's primary into the personal blog. */ body.personal-blog .toc__link--active { color: var(--pb-accent); border-left-color: var(--pb-accent); background: rgba(var(--pb-accent-rgb), 0.08); /* var(--pb-accent) at 8% */ } /* Meta strip — pills below the title/excerpt with orange icons. Sits at the foot of the hero so the article opens with the editorial badge row, then the oversized title and sub-deck, then a glanceable "[date] · [read time]" tag pair as the closing detail. */ body.personal-blog .single-post__topmeta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(0.5rem, 1.5vw, 1rem) 0 0; } body.personal-blog .single-post__pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--pb-band-rule); border-radius: 999px; color: var(--pb-band-ink); font-size: 0.8rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; background: transparent; } body.personal-blog .single-post__pill-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--pb-accent); } /* Hero with featured image — image lives inside the .single-post__header on PB only (single.php branches on $pb_hero_thumb_id), pinned to the right edge and bleeding into the black band via a stark linear-gradient overlay. The text content (.container--narrow) stays in the same place it'd be without the image; on desktop the gradient eats the left ~half of the image so the title overlaps cleanly with no opacity drop on the text. Mobile hides the image — at narrow widths the title needs the full hero width and the image would compress to a tiny strip. */ body.personal-blog .single-post__header--has-media { position: relative; overflow: hidden; } body.personal-blog .single-post__header--has-media .container--narrow { position: relative; z-index: 2; } body.personal-blog .single-post__header-media { display: none; } @media (min-width: 900px) { body.personal-blog .single-post__header-media { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: 1; pointer-events: none; } body.personal-blog .single-post__header-media-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Stark gradient: solid black for the leftmost ~12% of the image strip (so any title overlap reads cleanly), then a relatively short fade to fully visible by ~45%. Right ~55% of the strip is unobscured image. Tweak the stops below to soften / sharpen. */ body.personal-blog .single-post__header-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to right, var(--pb-band) 0%, var(--pb-band) 12%, transparent 45% ); } } /* Category pills + series pill on the dark band — outline in white. */ body.personal-blog .single-post__header .post-categories__item, body.personal-blog .single-post__header .post-categories__item:visited { border: 1px solid var(--pb-band-rule); color: var(--pb-band-ink); background: transparent; } body.personal-blog .single-post__header .post-categories__item:hover { background: var(--pb-band-ink); color: var(--pb-band); border-color: var(--pb-band-ink); } /* Tag filter row on the PB archive hero — mirrors `.category-filter` from the main writing archive, but inverted to sit on the black band. */ body.personal-blog .section--archive-header .tag-filter { display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem); text-align: left; } body.personal-blog .section--archive-header .tag-filter__label { display: block; color: var(--pb-accent); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.75rem; } body.personal-blog .section--archive-header .tag-filter__list { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-start; } body.personal-blog .section--archive-header .tag-filter__btn, body.personal-blog .section--archive-header .tag-filter__btn:visited { display: inline-block; padding: 0.7em 1.4em; font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--pb-band-ink); background: transparent; border: 1px solid var(--pb-band-rule); border-radius: 999px; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } /* When the tag-filter sits inside the page-header (archive home), align it to the left to match the H1 above. On tag archives the filter is a sibling of .page-header at full width and stays centered. */ body.personal-blog .pb-hero .page-header .tag-filter { text-align: left; margin-top: clamp(1.25rem, 2vw, 2rem); } body.personal-blog .pb-hero .page-header .tag-filter__list { justify-content: flex-start; } body.personal-blog .section--archive-header .tag-filter__btn:hover, body.personal-blog .section--archive-header .tag-filter__btn:focus-visible { background: var(--pb-band-ink); color: var(--pb-band); border-color: var(--pb-band-ink); } /* Active state — orange fill so the visitor sees clearly which tag they're filtering by. Listed alongside :visited to beat the visited-link rule above on specificity. */ body.personal-blog .section--archive-header .tag-filter__btn--active, body.personal-blog .section--archive-header .tag-filter__btn--active:visited { background: var(--pb-accent); color: var(--pb-band); border-color: var(--pb-accent); font-weight: 700; } /* "← Show all" reset pill — sits at the end of the tag list on tag archives. Visually distinct from the tag chips (no border, muted ink, lighter weight) so it reads as a clear/reset action rather than another tag. Hover swaps to the orange accent with an underline for a clean text-link affordance. */ body.personal-blog .section--archive-header .tag-filter__btn--clear, body.personal-blog .section--archive-header .tag-filter__btn--clear:visited { border-color: transparent; background: transparent; color: var(--pb-band-ink-soft); font-weight: 400; padding-left: 0.6em; padding-right: 0.6em; } body.personal-blog .section--archive-header .tag-filter__btn--clear:hover, body.personal-blog .section--archive-header .tag-filter__btn--clear:focus-visible { background: transparent; color: var(--pb-accent); border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; } body.personal-blog .single-post__series-pill, body.personal-blog .single-post__series-pill:visited { border: 1px solid var(--pb-band-rule); color: var(--pb-band-ink); background: transparent; } body.personal-blog .single-post__series-pill:hover { background: var(--pb-band-ink); color: var(--pb-band); border-color: var(--pb-band-ink); } /* main.css renders the series name in tinted gray-700, which is unreadable on the PB black band. Recolour to the orange accent so the series title pops, and let the on-hover (white-fill) state flip it back to the dark band colour for legibility. */ body.personal-blog .single-post__series-pill strong { color: var(--pb-accent); font-weight: 700; } body.personal-blog .single-post__series-pill:hover strong { color: var(--pb-band); } /* ========================================================================== Headings outside the dark bands — heavier face, body ink colour. Card titles, related-posts heading, in-body H2/H3. ========================================================================== */ body.personal-blog .post-card__title, body.personal-blog .post-list-item__title, body.personal-blog .related-posts__title, body.personal-blog .entry-content h2, body.personal-blog .entry-content h3 { font-family: var(--pb-display); font-weight: 800; letter-spacing: -0.015em; } /* ========================================================================== Pagination — current chip in black to match the band. ========================================================================== */ body.personal-blog .pagination__number--current { background: var(--pb-band); color: var(--pb-band-ink); } /* ========================================================================== Accent treatments on the light surfaces (the "2a" layer). ========================================================================== */ /* In-body content links — pure black with a clear underline so they read as intentional emphasis, not the main-site's softer accent. Scoped to .entry-content so chrome links (menu, breadcrumbs) aren't touched. */ body.personal-blog .entry-content a:not(.btn):not([class*="series-nav"]):not([class*="post-navigation"]):not(.single-post__tag), body.personal-blog .entry-content a:not(.btn):not([class*="series-nav"]):not([class*="post-navigation"]):not(.single-post__tag):visited { color: var(--pb-band); text-decoration: underline; text-decoration-color: var(--pb-band); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } body.personal-blog .entry-content a:not(.btn):not([class*="series-nav"]):not([class*="post-navigation"]):not(.single-post__tag):hover { text-decoration-thickness: 2px; } /* Card titles on the light card grid — body ink stays, but pull to true black on hover for a stronger hover state (default cards keep their main-site feel; PB just sharpens the interaction). */ body.personal-blog .post-card__title .post-card__link, body.personal-blog .post-card__title .post-card__link:visited { color: inherit; } body.personal-blog .post-card__title .post-card__link:hover { color: var(--pb-band); } body.personal-blog .post-list-item__link:hover .post-list-item__title { color: var(--pb-band); } /* Category/tag pills on light surfaces (post cards) — kill the pastel chip from main.css and replace with a clean black outline that matches the black accents elsewhere. */ body.personal-blog .post-card .post-categories__item, body.personal-blog .post-card .post-categories__item:visited, body.personal-blog .post-list-item .post-categories__item, body.personal-blog .post-list-item .post-categories__item:visited { background: transparent; background-color: transparent; background-image: none; border: 1px solid var(--pb-band); color: var(--pb-band); border-radius: 999px; padding: 0.25em 0.7em; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; } body.personal-blog .post-card .post-categories__item:hover, body.personal-blog .post-list-item .post-categories__item:hover { background: var(--pb-band); color: #FFFFFF; } /* Post-card titles — pick up the heavy display face so they feel of-a-piece with the hero H1 instead of inheriting main.css's heading weight. */ body.personal-blog .post-card__title, body.personal-blog .post-list-item__title, body.personal-blog .related-posts__title { font-family: var(--pb-display); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; } /* Profile card — give "About me" link some breathing room from the bottom of the card border. */ body.personal-blog .pb-profile { padding-bottom: clamp(1.25rem, 2vw, 1.75rem); } body.personal-blog .pb-profile__more { margin-top: 0.75rem; } /* Tags on a single post (below the body) — black outline accent to match. */ body.personal-blog .single-post__tag, body.personal-blog .single-post__tag:visited { border-color: var(--pb-band); color: var(--pb-band); background: transparent; } body.personal-blog .single-post__tag:hover { background: var(--pb-band); color: var(--pb-band-ink); border-color: var(--pb-band); } /* Pull-quote in body content — black left rule, italic, slightly heavier. */ body.personal-blog .entry-content blockquote, body.personal-blog .entry-content .wp-block-quote { border-left: 3px solid var(--pb-band); } /* In-line images inside PB post content get a thin grey border so they sit neatly on the white page without floating. Featured images (.single-post__featured-image) live outside .entry-content and are unaffected. */ body.personal-blog .entry-content img { border: 1px solid rgba(15, 15, 15, 0.12); box-sizing: border-box; } /* Share buttons at the end of single posts — main.css hover background uses --color-primary (purple). Override to the black accent so we don't leak the main-site brand colour into the PB reading experience. */ body.personal-blog .share-buttons__link:hover, body.personal-blog .share-buttons__link:focus-visible { background: var(--pb-band); color: #FFFFFF; } /* Previous/Next post navigation — main.css turns the title purple on hover. Recolour to the orange accent so the hover stays on-brand. */ body.personal-blog .post-navigation__link:hover .post-navigation__title, body.personal-blog .post-navigation__link:focus-visible .post-navigation__title { color: var(--pb-accent); } /* ========================================================================== Brand-recolour pass — every component that can be inserted into a PB blog post (or into the chrome around it) where main.css uses the primary purple. Each block flips purple to --pb-accent so an article reads as a coherent monochrome-plus-orange piece, not a main-site article in PB wrapping. Tinted backgrounds use rgba(var(--pb-accent-rgb),…) — var(--pb-accent) exploded — because no --pb-accent-rgb token exists yet. ========================================================================== */ /* --- Editorial blocks inside .entry-content ----------------------------- */ /* Blockquote — purple 4px left rule on the main blog. */ body.personal-blog .entry-content blockquote { border-left-color: var(--pb-accent); } /* Callouts — main.css ships .callout--info as a purple-tinted card with a purple icon, header background, and content tint. Recolour the lot. */ body.personal-blog .callout--info { background: rgba(var(--pb-accent-rgb), 0.05); border-color: rgba(var(--pb-accent-rgb), 0.25); } body.personal-blog .callout--info .callout__header { background: rgba(var(--pb-accent-rgb), 0.1); color: var(--pb-accent); } body.personal-blog .callout--info .callout__icon { color: var(--pb-accent); } body.personal-blog .callout--info .callout__content { background: rgba(var(--pb-accent-rgb), 0.08); border-color: rgba(var(--pb-accent-rgb), 0.3); } /* Pullquotes — author byline and decorative ::after stripe + mobile bg. */ body.personal-blog .pullquote::after { background: rgba(var(--pb-accent-rgb), 0.3); } body.personal-blog .pullquote__author { color: var(--pb-accent); } @media (max-width: 768px) { body.personal-blog .pullquote__text p { background: rgba(var(--pb-accent-rgb), 0.4); } } /* References / footnotes — citation pills, target highlight, and the in-body sources block. The 1/2/3 superscript link pills lean on primary purple as a "this is a footnote" cue; orange does the same job. */ body.personal-blog .reference__link { color: var(--pb-accent); } body.personal-blog .reference__link:hover { background-color: var(--pb-accent); color: var(--pb-band-ink); } body.personal-blog .reference__link:focus-visible { outline-color: var(--pb-accent); } body.personal-blog .reference:target { background-color: rgba(var(--pb-accent-rgb), 0.2); } body.personal-blog .references__text a { color: var(--pb-accent); } body.personal-blog .references__text a:hover { color: var(--pb-accent-soft); } body.personal-blog .sources__header:focus-visible { outline-color: var(--pb-accent); } body.personal-blog .sources__item::before { background-color: rgba(var(--pb-accent-rgb), 0.1); } body.personal-blog .sources__backlink:hover { color: var(--pb-accent); } body.personal-blog .sources__backlink:focus-visible { outline-color: var(--pb-accent); } body.personal-blog .sources__link { color: var(--pb-accent); } body.personal-blog .sources__link:hover { color: var(--pb-accent-soft); } /* Comparison table — highlighted column header + cell tint. */ body.personal-blog .comparison-table__header--highlighted { background: rgba(var(--pb-accent-rgb), 0.1); color: var(--pb-accent); } body.personal-blog .comparison-table__header--highlighted::after { background: var(--pb-accent); } body.personal-blog .comparison-table__cell--highlighted { background: rgba(var(--pb-accent-rgb), 0.03); } @media (prefers-color-scheme: dark) { body.personal-blog .comparison-table__header { background: rgba(var(--pb-accent-rgb), 0.15); color: var(--pb-accent); } } /* Embed cards — eyebrow label + CTA. */ body.personal-blog .embed-card__label { background: rgba(var(--pb-accent-rgb), 0.1); color: var(--pb-accent); } body.personal-blog .embed-card__cta { color: var(--pb-accent); } /* Accordion — header hover. */ body.personal-blog .accordion__header:hover { color: var(--pb-accent); } /* External link cards — badge + hover title + disclaimer link hover. */ body.personal-blog .external-link-card__badge { background: var(--pb-accent); color: var(--pb-band); } body.personal-blog .external-link-card:hover .external-link-card__title { color: var(--pb-accent); } body.personal-blog .external-links-disclaimer a:hover { color: var(--pb-accent); } /* Inline-video fallback link. */ body.personal-blog .inline-video__fallback a { color: var(--pb-accent); } /* Timeline shortcode — markers, year pill, dots, subtitles, nav hover. */ body.personal-blog .timeline__year { color: var(--pb-accent); background: rgba(var(--pb-accent-rgb), 0.1); } body.personal-blog .timeline__subtitle { color: var(--pb-accent); } body.personal-blog .timeline--vertical .timeline__marker, body.personal-blog .timeline--horizontal .timeline__marker { border-color: var(--pb-accent); } body.personal-blog .timeline--vertical .timeline__dot, body.personal-blog .timeline--horizontal .timeline__dot { background: var(--pb-accent); } body.personal-blog .timeline-nav:hover { background: var(--pb-accent); border-color: var(--pb-accent); } body.personal-blog .timeline-nav:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(var(--pb-accent-rgb), 0.4); } /* Book card hover. */ body.personal-blog .book-card__link:hover { color: var(--pb-accent); } /* --- Around-the-post chrome --------------------------------------------- */ /* Featured image credit licence link. */ body.personal-blog .single-post__image-licence:hover { color: var(--pb-accent); } /* Pagination next-arrow hover (current-page pill is already overridden). */ body.personal-blog .pagination__next:hover { color: var(--pb-accent); } /* Post card placeholder + focus + featured-badge. Covers the related-posts strip below an article and the PB archive grid when posts lack featured images. */ body.personal-blog .post-card:focus-within { outline-color: var(--pb-accent); } body.personal-blog .post-card--featured { border-color: var(--pb-accent); } body.personal-blog .post-card--featured:focus-within { box-shadow: var(--shadow-xl), 0 0 0 4px rgba(var(--pb-accent-rgb), 0.15); } body.personal-blog .post-card__featured-badge { background: var(--pb-accent); color: var(--pb-band); } body.personal-blog .post-card__image--placeholder { background: linear-gradient(135deg, rgba(var(--pb-accent-rgb), 0.12), rgba(var(--pb-accent-rgb), 0.05)); } body.personal-blog .post-card__image--placeholder svg { color: var(--pb-accent); } /* Search results — when a PB visitor searches the site. */ body.personal-blog .search-form__wrapper:focus-within { border-color: var(--pb-accent); } body.personal-blog .search-form__submit:hover { color: var(--pb-accent); } body.personal-blog .search-filters__tab--active, body.personal-blog .search-filters__tab--active:hover { background: var(--pb-accent); color: var(--pb-band); } body.personal-blog .search-result__type--post { background: rgba(var(--pb-accent-rgb), 0.1); color: var(--pb-accent); } body.personal-blog .search-result:hover .search-result__title { color: var(--pb-accent); } body.personal-blog .search-highlight { background: rgba(var(--pb-accent-rgb), 0.18); color: var(--pb-accent); } body.personal-blog .search-none__category:hover { background: var(--pb-accent); color: var(--pb-band); } body.personal-blog .search-none__post:hover .search-none__post-title { color: var(--pb-accent); } /* --- Site-wide chrome that PB inherits ---------------------------------- */ /* Skip link. */ body.personal-blog .skip-link { background: var(--pb-accent); color: var(--pb-band); } /* Generic focus outlines + button focus halos. */ body.personal-blog *:focus-visible { outline-color: var(--pb-accent); } body.personal-blog .btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--pb-accent-rgb), 0.4); } /* Back-to-top. */ body.personal-blog .back-to-top { background: var(--pb-accent); color: var(--pb-band); } body.personal-blog .back-to-top:hover { background: var(--pb-accent-soft); } body.personal-blog .back-to-top:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(var(--pb-accent-rgb), 0.4); } /* Cookie consent banner. */ body.personal-blog .cookie-consent__link:hover { color: var(--pb-accent); } /* Infinite-scroll spinner (PB archive). */ body.personal-blog .infinite-scroll-spinner { border-top-color: var(--pb-accent); } /* 404 — only seen if a PB-domain URL misses, but main.css paints those purple decorations regardless of body class. */ body.personal-blog .error-404__decoration--1 { background: var(--pb-accent); } body.personal-blog .error-404__category:hover { background: rgba(var(--pb-accent-rgb), 0.1); color: var(--pb-accent); }