/* Borderbeing essays page - layout refinements + polish. Typography intentionally untouched. */ /* ── Global: eliminate scrollbar from 100vw calculation ──────────────────── Without this, 100vw includes the scrollbar width (~15px on desktop), making full-bleed sections (margin-left: calc(-1*(100vw-100%)/2)) visibly short on the right side. overflow-x: hidden on html removes the scrollbar from the viewport so 100vw === content width everywhere. ─────────────────── */ html { overflow-x: hidden; } /* ═══════════════════════════════════════════════════════════════ SITEWIDE PAPER GRAIN — subtle noise texture over every background Inspired by anaiis.world's grain, but implemented as a lightweight tiled SVG (feTurbulence) overlay instead of a WebGL canvas shader — same organic paper feel, no JS/canvas cost. It sits in ::before on , fixed and pointer-events:none, blended softly over whatever color/section is underneath (cream, white, or the dark time-travel band) without changing any of the actual palette colors. ═══════════════════════════════════════════════════════════════ */ body { position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; background-size: 180px 180px; opacity: 0.2; mix-blend-mode: multiply; } @media (prefers-reduced-motion: reduce) { body::before { opacity: 0.03; } } /* ═══════════════════════════════════════════════════════════════ CARD LABEL - .bb-card-label Renders below the card image as: Section / Category Name The section prefix is injected via CSS ::before based on context. ═══════════════════════════════════════════════════════════════ */ /* Base label - always present */ .bb-card-label.wp-block-post-terms { display: flex; align-items: center; gap: 0; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.67rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: #2C1A0E !important; line-height: 1.4; padding-top: 8px !important; padding-bottom: 0 !important; } /* The category name links */ .bb-card-label.wp-block-post-terms a { color: #2C1A0E !important; text-decoration: none; transition: color 0.15s ease; } .bb-card-label.wp-block-post-terms a:hover { color: var(--wp--preset--color--contrast); } /* Separator between multiple categories - hide default, use custom */ .bb-card-label.wp-block-post-terms .wp-block-post-terms__separator { opacity: 0.5; } /* Section prefix - injected via CSS ::before, scoped per page context */ /* Essays page */ body.page-id-3891 .bb-card-label.wp-block-post-terms::before { content: none; } /* Homepage latest essays */ body.page-id-241 .bb-home-latest .bb-card-label.wp-block-post-terms::before { content: "Essays\00a0/\00a0"; color: rgba(44, 26, 14, 0.4); flex-shrink: 0; white-space: nowrap; } /* Homepage field notes */ body.page-id-241 .bb-home-fieldnotes .bb-card-label.wp-block-post-terms::before { content: "Notes\00a0/\00a0"; color: rgba(44, 26, 14, 0.4); flex-shrink: 0; white-space: nowrap; } /* ═════════════════════════════════════════════════════════════ */ /* ── Header: no underline on site title or nav links ────── */ .wp-block-site-title a:hover, .wp-block-site-title a:focus { text-decoration: none !important; } .wp-block-navigation-item__content:hover, .wp-block-navigation-item__content:focus { text-decoration: none !important; } /* ── Header nav: weight 500 for more presence ───────────────── */ .wp-block-header-group .wp-block-navigation-item__content, header .wp-block-navigation-item__content { font-weight: 500; letter-spacing: 0.01em; } /* ── Sitewide: lift all #686868 grey to warm dark ─────────── */ /* Post dates everywhere */ .wp-block-post-date, .wp-block-post-date time { color: #2C1A0E !important; } /* Enquiry labels ("Enquiry I/II/III") + italic subtext descriptions */ .bb-enquiry-item .has-text-color { color: #2C1A0E !important; } /* Essays "View All" button border */ .bb-essays-section .wp-block-button__link.has-border-color { border-color: #2C1A0E !important; color: #111111 !important; } body.page-id-3891 .entry-content > .wp-block-group { max-width: min( calc(100vw - 72px), 1320px ) !important; width: 100%; } body.page-id-3891 .entry-content > .wp-block-group > :where(p, .wp-block-spacer, .wp-block-buttons, .wp-block-coblocks-dynamic-separator) { max-width: 920px; } body.page-id-3891 .entry-content > p:first-child { max-width: 920px !important; } body.page-id-3891 .wp-block-query { max-width: 100% !important; } body.page-id-3891 .wp-block-query .wp-block-post-template { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(20px, 2.2vw, 34px) !important; align-items: start; } body.page-id-3891 .wp-block-query .wp-block-post-template > li { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; } body.page-id-3891 .wp-block-query .wp-block-post-template > li > .wp-block-group.is-style-section-1 { position: relative; z-index: 2; /* Flush with card edges - same width as the image */ width: 100% !important; max-width: none !important; margin-inline: 0 !important; margin-bottom: 0 !important; } /* Title text: tight gap below the top rule, comfortable below */ body.page-id-3891 .wp-block-query .wp-block-post-title { padding-top: 8px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Category label: single line, ellipsis on overflow, tighter tracking */ body.page-id-3891 .bb-card-label.wp-block-post-terms { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05em !important; } /* Show only the first category link - hide separator + subsequent links */ body.page-id-3891 .bb-card-label.wp-block-post-terms a:not(:first-child), body.page-id-3891 .bb-card-label.wp-block-post-terms .wp-block-post-terms__separator { display: none !important; } /* Between-section spacing: tight, consistent */ body.page-id-3891 .entry-content > .wp-block-group { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--30) !important; } /* Shrink gap between query block and "View All" button */ body.page-id-3891 .wp-block-query { margin-bottom: 0 !important; } body.page-id-3891 .entry-content > .wp-block-group + .wp-block-group { margin-top: 0 !important; border-top: none !important; } /* Cards without featured images: hide the empty figure */ body.page-id-3891 .wp-block-post:not(.has-post-thumbnail) .wp-block-post-featured-image { display: none !important; } /* Empty figure fallback - collapse height if image fails to load */ body.page-id-3891 .wp-block-post-featured-image:not(:has(img)) { display: none !important; } /* Cards stack naturally; only push Read→ to bottom when image is present */ body.page-id-3891 .wp-block-post.has-post-thumbnail { justify-content: space-between; } /* Gap between View All button and next section */ body.page-id-3891 .entry-content > .wp-block-group > .wp-block-buttons { margin-top: var(--wp--preset--spacing--30) !important; } /* Tighten the gap below the page H1 */ body.page-id-3891 h1.wp-block-post-title { margin-bottom: var(--wp--preset--spacing--30) !important; } /* Card grid: remove inner padding so cards align with section heading */ body.page-id-3891 .wp-block-post-template.is-layout-grid { padding-left: 0 !important; padding-right: 0 !important; } /* Title pill: remove full border, keep only a top indicator line so it sits flush and aligned with the image below it */ body.page-id-3891 .wp-block-group.is-style-section-1 { border: none !important; border-top: 2px solid var(--wp--preset--color--accent-4) !important; border-radius: 0 !important; } body.page-id-3891 .wp-block-query .wp-block-post-title, body.page-id-3891 .wp-block-query .wp-block-post-title a { display: block; } body.page-id-3891 .wp-block-query .wp-block-post-featured-image { width: 100% !important; max-width: none !important; margin: 0 !important; } body.page-id-3891 .wp-block-query .wp-block-post-featured-image img { width: 100%; height: auto; display: block; } body.page-id-3891 .wp-block-query .wp-block-read-more { margin-top: 0.35rem; line-height: 1.5 !important; } /* ── Card title pill: tighten radius so it reads as a tab, not a badge ── */ body.page-id-3891 .wp-block-query .wp-block-group.is-style-section-1 { border-radius: 7px !important; background-image: none !important; /* remove the two-stop radial gradient */ } /* ── Thumbnail images: subtler radius than the title pill ── */ body.page-id-3891 .wp-block-query .wp-block-post-featured-image img { border-radius: 10px !important; } /* ── "View All Essays" button: square it down, tighten padding ── */ body.page-id-3891 .wp-block-buttons .wp-block-button__link { border-radius: 6px !important; border-color: rgba(17, 17, 17, 0.35) !important; padding: 10px 28px !important; letter-spacing: 0.06em !important; transition: opacity 0.18s ease, border-color 0.18s ease !important; } body.page-id-3891 .wp-block-buttons .wp-block-button__link:hover { opacity: 0.7; border-color: rgba(17, 17, 17, 0.55) !important; } /* ── Dynamic essays sections block - arched title cap + link colour ── */ body.page-id-3891 .bb-essays-grid .wp-block-group.is-style-section-1 { border-width: 2px 0 0 0 !important; border-style: solid !important; border-color: var(--wp--preset--color--accent-4) !important; border-radius: 7px !important; background: var(--wp--preset--color--accent-5) !important; } body.page-id-3891 .bb-essays-grid .wp-block-post-title { padding-top: 8px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center !important; } body.page-id-3891 .bb-essays-grid .wp-block-post-title a { color: var(--wp--preset--color--contrast) !important; text-decoration: none; } /* ── Section heading: uppercase Manrope label with 2px rule above ── */ body.page-id-3891 .entry-content > .wp-block-group > p[style*="font-weight:500"], body.page-id-3891 .entry-content > .wp-block-group > p[style*="font-weight: 500"] { font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: #2C1A0E !important; padding-top: 0 !important; margin-bottom: 10px !important; line-height: 1.4 !important; } /* ── Section intro: narrow column, caption-sized italic ── */ body.page-id-3891 .entry-content > .wp-block-group > p[style*="font-weight:300"], body.page-id-3891 .entry-content > .wp-block-group > p[style*="font-weight: 300"] { max-width: 480px !important; font-size: 0.9rem !important; font-weight: 300 !important; line-height: 1.55 !important; color: var(--wp--preset--color--accent-4) !important; margin-bottom: var(--wp--preset--spacing--40) !important; padding-bottom: 0 !important; } /* ═══════════════════════════════════════════════════════════════ HOMEPAGE (page-id-241) styles ═══════════════════════════════════════════════════════════════ */ /* 1. Hide page H1 title + collapse template wrapper top spacing */ body.page-id-241 h1.wp-block-post-title { display: none; } html body.page-id-241 main.wp-block-group, body.page-id-241 main#wp--skip-link--target { margin-top: 0 !important; padding-top: 0 !important; } body.page-id-241 main.wp-block-group > .wp-block-group.alignfull.has-global-padding:first-of-type { padding-top: 0 !important; padding-bottom: 0 !important; } body.page-id-241 .entry-content.alignfull { padding-top: 0 !important; } /* 2. Cover hero - anchor text panel to bottom-left of the cover image. The cover block is already position:relative. We pull the inner-container out of the flex flow and re-position it absolutely at the bottom. */ body.page-id-241 .bb-home-hero .wp-block-cover__inner-container { position: absolute !important; bottom: 0; left: 0; right: 0; width: 100%; height: auto; } body.page-id-241 .bb-hero-inner { /* override the constrained layout centering - pin to left */ display: block !important; padding-bottom: var(--wp--preset--spacing--50) !important; } body.page-id-241 .bb-hero-inner > .bb-hero-text { /* constrained layout auto-centers max-width children; override with margin */ margin-left: 0 !important; margin-right: auto !important; max-width: 560px; border-left: 2px solid rgba(255,255,255,0.5); padding-left: 20px !important; } body.page-id-241 .bb-hero-text .wp-block-post-title a { color: #fff !important; text-decoration: none; } body.page-id-241 .bb-hero-text .wp-block-post-excerpt { max-width: 440px; } /* Featured hero - larger, heavier title + excerpt, legible against image */ body.page-id-241 .bb-hero-text .wp-block-post-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; line-height: 1.15 !important; font-weight: 500 !important; } body.page-id-241 .bb-hero-text .wp-block-post-excerpt__excerpt { font-size: 1rem !important; line-height: 1.6 !important; font-weight: 500 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.45); } body.page-id-241 .bb-hero-text .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 10px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; opacity: 0.85; color: #fff; } body.page-id-241 .bb-hero-text .wp-block-post-excerpt__more-link:hover { opacity: 1; } /* 3. Jetpack sharing hidden */ body.page-id-241 .sharedaddy { display: none; } /* 4. Quote of the day - strip the default blockquote border, style cite */ body.page-id-241 .bb-home-pullquote { border: none !important; padding-inline: 0 !important; text-align: center; max-width: 720px; margin-inline: auto; position: relative; } /* Large editorial quotation marks - Newsreader, warm brown, decorative */ body.page-id-241 .bb-home-pullquote p::before, body.page-id-241 .bb-home-pullquote p::after { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: 5rem; line-height: 0; color: rgba(44,26,14,0.22); position: absolute; pointer-events: none; } body.page-id-241 .bb-home-pullquote p::before { content: '\201C'; /* " */ top: 0.6em; left: -1rem; } body.page-id-241 .bb-home-pullquote p { position: relative; display: inline-block; padding: 0 2.5rem; } body.page-id-241 .bb-home-pullquote p::after { content: '\201D'; /* " */ bottom: -0.3em; right: -1rem; } body.page-id-241 .bb-home-pullquote cite { display: block; margin-top: var(--wp--preset--spacing--30); font-size: 0.7rem; font-style: normal; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); } /* Whole daily-quote block links to its source essay - no default link chrome, subtle hover cue on the cite line only so the quote text itself stays quiet. */ body.page-id-241 a.bb-home-pullquote-link { display: block; color: inherit; text-decoration: none; cursor: pointer; } body.page-id-241 a.bb-home-pullquote-link:hover .bb-home-pullquote cite { color: var(--wp--preset--color--contrast); } body.page-id-241 a.bb-home-pullquote-link:hover .bb-home-pullquote p { opacity: 0.85; } /* 5. Current enquiries - flex row, separator lines, typewritten stamp button */ /* Hairline separator between rows - not on the first item */ body.page-id-241 .bb-enquiry-item.wp-block-group { border-top: 1px solid rgba(44,26,14,0.15); padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); } body.page-id-241 .bb-enquiry-item.wp-block-group:first-child { border-top: none; padding-top: 0; } /* Typewritten stamp button - Manrope uppercase, warm brown outline */ body.page-id-241 .bb-enquiry-item .wp-block-button__link { white-space: nowrap; flex-shrink: 0; background: transparent !important; color: #2C1A0E !important; border: 1px solid rgba(44,26,14,0.35) !important; border-radius: 3px !important; font-family: 'Manrope', sans-serif !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; padding: 9px 20px !important; transition: background 0.15s, color 0.15s; } body.page-id-241 .bb-enquiry-item .wp-block-button__link:hover { background: #2C1A0E !important; color: #fff !important; } /* Button wrapper: don't shrink, prevent wrapping */ body.page-id-241 .bb-enquiry-item .wp-block-buttons { flex-shrink: 0; } /* 6. Poetry sidebar - vertical divider on the left */ body.page-id-241 .bb-split-poetry { border-left: 1px solid rgba(104,104,104,0.3); padding-left: var(--wp--preset--spacing--60) !important; } /* 7. Latest Essays + Field Notes - hide descriptions, tighten gaps */ body.page-id-241 .bb-home-latest > .wp-block-paragraph[style*="italic"], body.page-id-241 .bb-home-fieldnotes > .wp-block-paragraph[style*="italic"] { display: none; } body.page-id-241 .bb-home-latest > .wp-block-paragraph[style*="weight:500"] { margin-bottom: var(--wp--preset--spacing--40) !important; } /* 8. Field Notes - remove top border line */ body.page-id-241 .bb-home-fieldnotes { border-top: none !important; } /* 9. About section - remove bottom border; footer supplies its own top line */ body.page-id-241 .bb-home-about { border-bottom: none !important; } /* About section button - typewritten stamp style, matches the site's editorial register */ body.page-id-241 .bb-home-about .wp-element-button { background: transparent !important; color: rgba(44, 26, 14, 0.8) !important; border: 1px solid rgba(44, 26, 14, 0.35) !important; border-radius: 3px !important; font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; padding: 9px 22px !important; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } body.page-id-241 .bb-home-about .wp-element-button:hover { background: rgba(44, 26, 14, 0.06) !important; color: rgba(44, 26, 14, 1) !important; border-color: rgba(44, 26, 14, 0.6) !important; } /* 9. Field notes - text-only cards, no image */ body.page-id-241 .bb-fieldnote-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: var(--wp--preset--color--base); } body.page-id-241 .bb-fieldnote-card .wp-block-read-more { margin-top: auto; } /* ── Latest Essays cards - arched title cap (matches Essays page exactly) ── */ /* The title chip: 2px accent-4 top border only, 7px radius curves the cap, warm sand background, generous top headroom so title breathes under the arch */ body.page-id-241 .bb-home-latest .wp-block-group.is-style-section-1 { border-width: 2px 0 0 0 !important; border-style: solid !important; border-color: var(--wp--preset--color--accent-4) !important; border-radius: 7px !important; background: var(--wp--preset--color--accent-5) !important; } body.page-id-241 .bb-home-latest .wp-block-post-title { padding-top: 18px !important; padding-bottom: 14px !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center !important; } /* Category label: single line, ellipsis, no section prefix */ body.page-id-241 .bb-home-latest .bb-card-label.wp-block-post-terms { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-241 .bb-home-latest .bb-card-label.wp-block-post-terms::before { content: none; } body.page-id-241 .bb-home-latest .bb-card-label.wp-block-post-terms a:not(:first-child), body.page-id-241 .bb-home-latest .bb-card-label.wp-block-post-terms .wp-block-post-terms__separator { display: none !important; } /* ── Field Notes cards - paper slip scatter ── */ /* Query grid: give it room to breathe and allow slight overflow for tilts */ body.page-id-241 .bb-home-fieldnotes .wp-block-post-template { align-items: stretch; gap: 28px !important; padding: 12px 8px 20px; overflow: visible; } /* Query now fetches 4 posts (to support the tablet-portrait 2x2 grid below), but desktop and tablet-landscape keep the original 3-card display. */ body.page-id-241 .bb-home-fieldnotes .wp-block-post-template > li:nth-child(n + 4) { display: none; } /* Base paper slip - shared across all 3 */ body.page-id-241 .bb-fieldnote-card { position: relative; border-radius: 2px !important; border: none !important; padding: 28px 24px 22px !important; box-sizing: border-box; transition: transform 0.18s ease, box-shadow 0.18s ease; overflow: visible !important; } /* Pin dot */ body.page-id-241 .bb-fieldnote-card::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c8b8a0, #7a6a58); box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2); z-index: 3; } /* Card 1 */ body.page-id-241 .bb-home-fieldnotes li:nth-child(1) .bb-fieldnote-card { background-color: #fdf5e8 !important; background-image: repeating-linear-gradient( transparent, transparent 23px, rgba(44,26,14,0.065) 23px, rgba(44,26,14,0.065) 24px ) !important; box-shadow: 0 1px 3px rgba(44,26,14,0.08), 0 5px 14px rgba(44,26,14,0.07), 0 14px 28px rgba(44,26,14,0.05) !important; transform: rotate(-1.4deg); } body.page-id-241 .bb-home-fieldnotes li:nth-child(1) .bb-fieldnote-card:hover { transform: rotate(-0.3deg) translate(-3px, -6px) !important; z-index: 10; box-shadow: 0 6px 12px rgba(44,26,14,0.10), 0 18px 40px rgba(44,26,14,0.09), 0 32px 56px rgba(44,26,14,0.06) !important; } /* Card 2 */ body.page-id-241 .bb-home-fieldnotes li:nth-child(2) .bb-fieldnote-card { background-color: #fdf5e8 !important; background-image: repeating-linear-gradient( transparent, transparent 23px, rgba(44,26,14,0.07) 23px, rgba(44,26,14,0.07) 24px ) !important; box-shadow: 0 1px 3px rgba(44,26,14,0.07), 0 5px 14px rgba(44,26,14,0.06), 0 14px 28px rgba(44,26,14,0.04) !important; transform: rotate(0.7deg); z-index: 2; } body.page-id-241 .bb-home-fieldnotes li:nth-child(2) .bb-fieldnote-card:hover { transform: rotate(0deg) translateY(-8px) !important; z-index: 10; box-shadow: 0 8px 16px rgba(44,26,14,0.10), 0 20px 44px rgba(44,26,14,0.09), 0 36px 60px rgba(44,26,14,0.06) !important; } /* Card 3 */ body.page-id-241 .bb-home-fieldnotes li:nth-child(3) .bb-fieldnote-card { background-color: #fdf5e8 !important; background-image: repeating-linear-gradient( transparent, transparent 23px, rgba(44,26,14,0.075) 23px, rgba(44,26,14,0.075) 24px ) !important; box-shadow: 0 1px 3px rgba(44,26,14,0.08), 0 5px 14px rgba(44,26,14,0.07), 0 14px 28px rgba(44,26,14,0.05) !important; transform: rotate(-0.5deg); } body.page-id-241 .bb-home-fieldnotes li:nth-child(3) .bb-fieldnote-card:hover { transform: rotate(0.4deg) translate(3px, -6px) !important; z-index: 10; box-shadow: 0 6px 12px rgba(44,26,14,0.10), 0 18px 40px rgba(44,26,14,0.09), 0 32px 56px rgba(44,26,14,0.06) !important; } /* Date */ body.page-id-241 .bb-home-fieldnotes .wp-block-post-date { font-family: Manrope, sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #2C1A0E !important; opacity: 0.45; margin-bottom: 10px !important; margin-top: 14px !important; } /* Title - large, bold, Newsreader */ body.page-id-241 .bb-home-fieldnotes .wp-block-post-title { font-family: Newsreader, serif !important; font-size: 1.25rem !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: #111111 !important; padding: 0 !important; margin: 0 0 12px !important; text-align: left !important; } /* Excerpt */ body.page-id-241 .bb-home-fieldnotes .wp-block-post-excerpt__excerpt { font-size: 0.82rem !important; font-weight: 300 !important; line-height: 1.65 !important; color: #2C1A0E !important; opacity: 0.82; } /* "All field notes" button - typewritten label feel */ body.page-id-241 .bb-home-fieldnotes .wp-element-button { background: transparent !important; background-color: transparent !important; color: #2C1A0E !important; border: 1px solid rgba(44,26,14,0.35) !important; border-radius: 3px !important; font-family: Manrope, sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; padding: 10px 20px !important; transition: background 0.15s, border-color 0.15s, color 0.15s !important; } body.page-id-241 .bb-home-fieldnotes .wp-element-button:hover { background: #2C1A0E !important; background-color: #2C1A0E !important; color: #fdf5e8 !important; border-color: #2C1A0E !important; } /* Read link */ body.page-id-241 .bb-fieldnote-card .wp-block-read-more { margin-top: auto; font-size: 0.78rem !important; font-weight: 400 !important; letter-spacing: 0.04em !important; color: #2C1A0E !important; opacity: 0.65; } /* Hide card label on fieldnotes */ body.page-id-241 .bb-home-fieldnotes .bb-card-label.wp-block-post-terms { display: none !important; } /* 5. Responsive */ @media (max-width: 768px) { body.page-id-241 .bb-hero-text { max-width: 100%; } /* Fix: on mobile the absolute-bottom-pinned inner container (a desktop trick to anchor text to the bottom of the hero image) grows UPWARD past the top of the cover box when content is taller than the forced 320px min-height - pushing the title off-screen above the viewport with no way to scroll to it. Un-pin to normal flow so the cover grows to contain all its content instead of clipping it. */ body.page-id-241 .bb-home-hero .wp-block-cover__inner-container { position: static !important; height: auto !important; } body.page-id-241 .bb-home-enquiry .wp-block-columns { flex-direction: column !important; } body.page-id-241 .bb-home-enquiry .wp-block-column { flex-basis: 100% !important; } } @media (prefers-reduced-motion: reduce) { body.page-id-241 .bb-hero-text .wp-block-post-excerpt__more-link { transition: none; } } /* ═══════════════════════════════════════════════════════════════ ESSAYS PAGE (page-id-3891) - responsive ═══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { body.page-id-3891 .entry-content > .wp-block-group { max-width: min( calc(100vw - 60px), 540px ) !important; } body.page-id-3891 .wp-block-query .wp-block-post-template { grid-template-columns: 1fr !important; gap: 40px !important; } body.page-id-3891 .wp-block-query .wp-block-post-template > li > .wp-block-group.is-style-section-1 { width: 100%; margin-inline: 0 !important; } } /* ═══════════════════════════════════════════════════════════════ HOMEPAGE - Time travel section ═══════════════════════════════════════════════════════════════ */ /* ── Time-travel: dark band threshold - sitewide ───────────────────────────── The only dark section on every page. Full-bleed near-black, cream text. Two lines of presence, same voice → horizontal scroll ticker below. ─────────────────────────────────────────────────────────────────────────── */ /* ── Break out of WP constrained layout - take full 1040px ───────────────── */ .bb-home-timetravel { background-color: #1a1612 !important; border-top: none !important; padding-bottom: 0 !important; } /* Override constrained layout: make direct children fill full width */ .bb-home-timetravel.is-layout-constrained > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* All text cream */ .bb-home-timetravel, .bb-home-timetravel h2, .bb-home-timetravel p { color: #f0ebe2 !important; } /* Eyebrow: THE ARCHIVE */ .bb-home-timetravel .bb-archive-eyebrow { font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-align: center !important; color: #f0ebe2 !important; opacity: 0.65; margin: 0 0 3.5rem !important; padding: 0 !important; width: 100% !important; display: block; } /* Counter - Newsreader, weight 300, muted */ .bb-home-timetravel .bb-timetravel-counter { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-size: clamp(1.5rem, 3.2vw, 2.6rem) !important; font-weight: 300 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; text-align: center !important; text-transform: none !important; color: #f0ebe2 !important; opacity: 0.55; margin: 0 0 0.35em !important; padding: 0 !important; width: 100% !important; display: block; } /* Invite - same, full opacity */ .bb-home-timetravel .bb-timetravel-invite { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-size: clamp(1.5rem, 3.2vw, 2.6rem) !important; font-weight: 300 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; text-align: center !important; color: #f0ebe2 !important; opacity: 1; margin: 0 0 2.4rem !important; padding: 0 !important; width: 100% !important; display: block; } /* ── Year strip: full-bleed horizontal wheel ticker ───────────────────── */ .bb-home-timetravel .bb-year-strip-wrap { /* Escape the constrained column entirely - negate padding on both sides */ width: 100vw !important; max-width: 100vw !important; margin-left: calc(-1 * (100vw - 100%) / 2) !important; margin-right: calc(-1 * (100vw - 100%) / 2) !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 1.4rem 0 1.8rem !important; border-top: 1px solid rgba(240,235,226,0.12); overflow: hidden; position: relative; cursor: grab; user-select: none; -webkit-user-select: none; box-sizing: border-box; } .bb-home-timetravel .bb-year-strip-wrap:active { cursor: grabbing; } /* Fade edges */ .bb-home-timetravel .bb-year-strip-wrap::before, .bb-home-timetravel .bb-year-strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .bb-home-timetravel .bb-year-strip-wrap::before { left: 0; background: linear-gradient(to right, #1a1612 30%, transparent 100%); } .bb-home-timetravel .bb-year-strip-wrap::after { right: 0; background: linear-gradient(to left, #1a1612 30%, transparent 100%); } /* Nav: single row, no transition (JS handles smoothness) */ .bb-home-timetravel .bb-year-strip { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: max-content; /* No padding here - fade runway is handled by wrap::before/::after pseudoelements. Padding here created a dead gap at the right edge when the list runs out. */ padding: 0; gap: 0; will-change: transform; transition: none !important; } /* "Go to" label hidden */ .bb-home-timetravel .bb-year-strip__label { display: none !important; } /* Year list */ .bb-home-timetravel .bb-year-strip__list { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .bb-home-timetravel .bb-year-strip__item { list-style: none !important; position: relative; } /* Year links */ .bb-home-timetravel .bb-year-strip__list a { display: block; font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important; font-weight: 500 !important; letter-spacing: 0.03em !important; text-transform: none !important; color: #f0ebe2 !important; opacity: 0.75; padding: 0 clamp(22px, 3vw, 40px) !important; text-decoration: none !important; transition: opacity 0.18s ease; white-space: nowrap; } .bb-home-timetravel .bb-year-strip__list a:hover { opacity: 1 !important; text-decoration: none !important; } /* Dot separators */ .bb-home-timetravel .bb-year-strip__item + .bb-year-strip__item::before { content: "·"; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); color: #f0ebe2; opacity: 0.2; pointer-events: none; font-size: 0.75em; z-index: 1; } /* Active year */ .bb-home-timetravel .bb-year-strip__list a[aria-current="page"] { opacity: 1 !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════════════ ARCHIVE PAGES - category, tag, date archives ═══════════════════════════════════════════════════════════════ */ /* ── Archive Stream - type-grouped sections ───────────────────────── */ .bb-archive-stream { margin-top: var(--wp--preset--spacing--60); } /* Group: label */ .bb-archive-group { margin-bottom: var(--wp--preset--spacing--70); } .bb-archive-group__label { font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2C1A0E; margin: 0 0 var(--wp--preset--spacing--40) 0; } /* Shared list reset */ .bb-archive-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } /* Shared item */ .bb-archive-item { border-bottom: 1px solid rgba(17,17,17,0.08); } .bb-archive-item:first-child { border-top: 1px solid rgba(17,17,17,0.08); } /* ─ Essay card: image left, text right ──────────────────────────── */ .bb-archive-essay-link { display: grid; grid-template-columns: 180px 1fr; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40) 0; text-decoration: none; color: inherit; align-items: center; transition: opacity 0.15s; } .bb-archive-essay-link:hover { opacity: 0.75; } .bb-archive-essay-thumb { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: var(--wp--preset--color--accent-5); flex-shrink: 0; } .bb-archive-essay-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-archive-essay-body { display: flex; flex-direction: column; gap: 6px; } /* ─ Poetry card: typographic, no image ──────────────────────── */ .bb-archive-poetry-link { display: flex; flex-direction: column; gap: 6px; padding: var(--wp--preset--spacing--40) 0; text-decoration: none; color: inherit; transition: opacity 0.15s; } .bb-archive-poetry-link:hover { opacity: 0.75; } .bb-archive-item__verse { font-style: italic !important; font-weight: 300 !important; } /* ─ Note / imageless essay: date left, body right ────────────── */ .bb-archive-note-link { display: grid; grid-template-columns: 100px 1fr; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40) 0; text-decoration: none; color: inherit; align-items: start; transition: opacity 0.15s; } .bb-archive-note-link:hover { opacity: 0.75; } .bb-archive-note-body { display: flex; flex-direction: column; gap: 4px; } /* ─ Shared type tokens ──────────────────────────────────────── */ .bb-archive-item__label { font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2C1A0E; margin: 0; } .bb-archive-item__title { font-family: Newsreader, serif; font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.3), 1.25rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: #111111; } .bb-archive-item__excerpt { font-size: 0.88rem; font-weight: 300; line-height: 1.5; color: #2C1A0E; margin: 0; } .bb-archive-item__date { font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.06em; color: rgba(17,17,17,0.45); white-space: nowrap; padding-top: 4px; } /* ─ Count badge ──────────────────────────────────────────── */ .bb-archive-group__count { font-family: Manrope, sans-serif; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(17,17,17,0.4); vertical-align: middle; margin-left: 6px; } /* ─ Items hidden beyond 4 ────────────────────────────────────── */ .bb-archive-item[data-index][data-hidden] { display: none; } /* ─ Show more button ──────────────────────────────────────── */ .bb-archive-showmore { display: block; margin-top: var(--wp--preset--spacing--30); background: none; border: 1px solid rgba(17,17,17,0.2); border-radius: 20px; padding: 7px 20px; font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #2C1A0E; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .bb-archive-showmore:hover { background: rgba(44,26,14,0.06); border-color: rgba(44,26,14,0.4); } .bb-archive-showmore[aria-expanded="true"] { background: #111111; color: #f5f1eb; border-color: #111111; } /* ─ Responsive ─────────────────────────────────────────────── */ @media (max-width: 600px) { .bb-archive-essay-link { grid-template-columns: 1fr; } .bb-archive-essay-thumb { aspect-ratio: 16/9; } .bb-archive-note-link { grid-template-columns: 1fr; } .bb-archive-note-link .bb-archive-item__date { padding-top: 0; } } /* Card grid - pulled 60px inward from both edges */ .archive .bb-archive-grid.wp-block-post-template { padding-left: 60px !important; padding-right: 60px !important; } /* ── Year strip (plain / light-theme context, e.g. archive.html header) ── Rewritten to match the SAME JS-driven transform ticker model as the dark time-travel band (.bb-home-timetravel .bb-year-strip-wrap below), instead of the old native-scrollbar (overflow-x:auto) approach. The old model constrained nav's own box to the wrap's width, which broke the JS's maxPos = nav.offsetWidth - wrap.offsetWidth calculation (it came out to ~0), so dragging/scrolling this strip could never reach 2008. */ .bb-year-strip-wrap { position: relative; margin-bottom: var(--wp--preset--spacing--50); overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; } .bb-year-strip-wrap:active { cursor: grabbing; } .bb-year-strip-wrap::before, .bb-year-strip-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .bb-year-strip-wrap::before { left: 0; background: linear-gradient(to right, var(--wp--preset--color--base) 30%, transparent 100%); } .bb-year-strip-wrap::after { right: 0; background: linear-gradient(to left, var(--wp--preset--color--base) 30%, transparent 100%); } .bb-year-strip { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0; padding: 18px 0 20px; border-top: 1px solid rgba(17,17,17,0.12); border-bottom: 1px solid rgba(17,17,17,0.12); margin: 0; width: max-content; will-change: transform; } .bb-year-strip__label { display: none; } .bb-year-strip__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; gap: 0; } .bb-year-strip__item { display: flex; align-items: center; flex-shrink: 0; } .bb-year-strip__list a { display: block; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.82rem; font-weight: 600; color: #111111; opacity: 0.75; text-decoration: none; letter-spacing: 0.03em; padding: 0 clamp(16px, 2vw, 26px); transition: opacity 0.18s ease, color 0.15s ease; white-space: nowrap; } .bb-year-strip__list a:hover { opacity: 1; color: var(--wp--preset--color--accent-3); } /* Active year - bold + violet, signals current location in time */ .bb-year-strip__list a[aria-current="page"] { font-weight: 700; opacity: 1; color: var(--wp--preset--color--accent-3); } /* ── Responsive - archive grid ────────────────────────── */ /* Tablet: 3-column, moderate inset */ @media (max-width: 900px) and (min-width: 601px) { .archive .bb-archive-grid.wp-block-post-template { padding-left: 30px !important; padding-right: 30px !important; grid-template-columns: repeat(3, 1fr) !important; } } /* Mobile: 2-column, tight inset */ @media (max-width: 600px) { .archive .bb-archive-grid.wp-block-post-template { padding-left: 16px !important; padding-right: 16px !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } /* Smaller title text in 2-col mobile cards */ .archive .bb-archive-grid .wp-block-post-title { font-size: 0.85rem !important; padding-top: 6px !important; padding-bottom: 8px !important; } /* Card inset on mobile archive header */ .archive .bb-archive-header .wp-block-query-title, .archive .bb-archive-header h1.wp-block-query-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; } } /* NOTE: an ".archive .bb-archive-eyebrow" rule used to live here, intended for an "Archive" label above the archive-header title. No template ever actually uses that markup (dead selector) — but because .bb-home-timetravel .bb-archive-eyebrow ("The Archive" label in the dark time-travel band) ALSO matches any ".archive" ancestor, and this dead rule shared the same class name and appeared later in the cascade, it was silently overriding the real eyebrow's cream color/opacity with grey accent-4 on every archive/date/category page. Removed to fix that collision. */ /* Archive title - Newsreader, left-aligned, generous size */ .archive .bb-archive-header .wp-block-query-title, .archive .bb-archive-header h1.wp-block-query-title { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-size: clamp(2.2rem, 4vw, 3.5rem) !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; text-align: left !important; margin-bottom: var(--wp--preset--spacing--20) !important; } /* Term description - narrow italic lead */ .archive .bb-archive-header .wp-block-term-description { max-width: 560px; font-size: 0.95rem; font-weight: 300; font-style: italic; line-height: 1.6; color: var(--wp--preset--color--accent-4); margin-top: var(--wp--preset--spacing--20); } /* Arched title cap - same as Essays page */ .archive .bb-archive-grid .wp-block-group.is-style-section-1 { border-width: 2px 0 0 0 !important; border-style: solid !important; border-color: var(--wp--preset--color--accent-4) !important; border-radius: 7px !important; background: var(--wp--preset--color--accent-5) !important; } .archive .bb-archive-grid .wp-block-post-title { padding-top: 8px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center !important; } .archive .bb-archive-grid .wp-block-post-title a { color: var(--wp--preset--color--contrast) !important; text-decoration: none; } /* Category label - hide on category archives (user already knows the category) */ .category .bb-archive-grid .bb-card-label.wp-block-post-terms { display: none !important; } /* Category label - single line, ellipsis, no prefix (tag/date archives) */ .archive:not(.category) .bb-archive-grid .bb-card-label.wp-block-post-terms { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0 !important; padding-right: 0 !important; } .archive:not(.category) .bb-archive-grid .bb-card-label.wp-block-post-terms a:not(:first-child), .archive:not(.category) .bb-archive-grid .bb-card-label.wp-block-post-terms .wp-block-post-terms__separator { display: none !important; } /* Hide empty featured image containers */ .archive .bb-archive-grid .wp-block-post:not(.has-post-thumbnail) .wp-block-post-featured-image { display: none !important; } /* Pagination */ .archive .wp-block-query-pagination { font-size: 0.85rem; letter-spacing: 0.04em; } .archive .wp-block-query-pagination a, .archive .wp-block-query-pagination .wp-block-query-pagination-numbers a { color: var(--wp--preset--color--contrast); text-decoration: none; padding: 6px 12px; border: 1px solid rgba(17,17,17,0.2); border-radius: 4px; transition: background 0.15s ease; } .archive .wp-block-query-pagination a:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* ═══════════════════════════════════════════════════════════════ FOOTER - .bb-footer ═══════════════════════════════════════════════════════════════ */ /* Non-link body text: lift from mid-grey #686868 to near-black */ .bb-footer p:not(.bb-footer-col-label) { color: #1a1a1a !important; } /* Column labels: deep brown, same as section headers */ .bb-footer .bb-footer-col-label { color: #2C1A0E !important; } /* Donate + Join the Circle: true black border + text, medium weight */ .bb-footer .wp-block-button__link.has-border-color { border-color: #000000 !important; color: #000000 !important; font-weight: 500 !important; } /* Social icons in footer: deep black strokes */ .bb-footer .bb-social-icon .wp-block-button__link, .bb-footer .bb-social-icons .wp-block-button__link { color: #111111 !important; } .bb-footer .bb-social-icon svg, .bb-footer .bb-social-icons svg { stroke: #111111 !important; } /* Share bar icons on single posts: deep black */ .bb-share-bar .bb-social-icon .wp-block-button__link { color: #111111 !important; } .bb-share-bar .bb-social-icon svg { stroke: #111111 !important; } .bb-share-bar .bb-social-icon .wp-block-button__link:hover { opacity: 0.5; } /* Jetpack "Like this" - hide on all pages except single posts */ .page .sd-block.sd-like, .page .jetpack-likes-widget-wrapper, .archive .sd-block.sd-like, .archive .jetpack-likes-widget-wrapper, .home .sd-block.sd-like, .home .jetpack-likes-widget-wrapper { display: none !important; } /* Site title in footer — exact match to header: Hauora weight 700 */ .bb-footer .wp-block-site-title, .bb-footer .wp-block-site-title a { font-family: var(--wp--preset--font-family--hauora), sans-serif !important; font-size: 1.4rem !important; font-weight: 700 !important; letter-spacing: -0.5px; color: var(--wp--preset--color--contrast); text-decoration: none; } /* Navigation links in footer */ .bb-footer .wp-block-navigation a { color: var(--wp--preset--color--contrast); text-decoration: none; transition: opacity 0.15s ease; } .bb-footer .wp-block-navigation a:hover { opacity: 0.5; } /* Explore nav - vertical list, no gaps, clean line height */ .bb-footer-nav .wp-block-navigation__container { display: flex; flex-direction: column; gap: 0; } .bb-footer-nav .wp-block-navigation-item__content { padding: 0 !important; line-height: 1.9; } /* Community buttons - full-width, left-aligned */ .bb-footer-community .wp-block-button { width: 100%; } .bb-footer-community .bb-footer-btn .wp-element-button { width: 100%; text-align: center; background: transparent; color: var(--wp--preset--color--contrast) !important; transition: background 0.15s ease, color 0.15s ease; } .bb-footer-community .bb-footer-btn .wp-element-button:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-5) !important; } /* Jetpack subscribe form - compact, matches footer tone */ .bb-footer-subscribe .wp-block-jetpack-subscriptions__container { display: flex; flex-direction: column; gap: 8px; } .bb-footer-subscribe .wp-block-jetpack-subscriptions__container form { display: flex; gap: 0; width: 100%; } .bb-footer-subscribe input[type="email"] { flex: 1; border: 1px solid rgba(17, 17, 17, 0.3); border-right: none; border-radius: 4px 0 0 4px; padding: 9px 14px; font-size: 0.82rem; font-family: var(--wp--preset--font-family--manrope), sans-serif; background: transparent; color: var(--wp--preset--color--contrast); outline: none; transition: border-color 0.15s ease; } .bb-footer-subscribe input[type="email"]:focus { border-color: var(--wp--preset--color--contrast); } .bb-footer-subscribe input[type="email"]::placeholder { color: rgba(17, 17, 17, 0.4); } .bb-footer-subscribe .wp-block-jetpack-subscriptions__container .wp-element-button, .bb-footer-subscribe button[type="submit"] { border: 1px solid var(--wp--preset--color--contrast); border-radius: 0 4px 4px 0; padding: 9px 18px; font-size: 0.82rem; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-weight: 500; letter-spacing: 0.04em; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-5); cursor: pointer; transition: opacity 0.15s ease; white-space: nowrap; } .bb-footer-subscribe .wp-block-jetpack-subscriptions__container .wp-element-button:hover, .bb-footer-subscribe button[type="submit"]:hover { opacity: 0.75; } /* ── Footer search ───────────────────────────────────────────────────── */ .bb-footer-search.wp-block-search { display: flex; align-items: stretch; margin-top: var(--wp--preset--spacing--40); width: 100% !important; } .bb-footer-search .wp-block-search__inside-wrapper { width: 100% !important; } .bb-footer-search .wp-block-search__input { width: 0 !important; flex: 1 1 auto; min-width: 0; } .bb-footer-search .wp-block-search__inside-wrapper { display: flex; align-items: stretch; border: 1px solid rgba(44, 26, 14, 0.25) !important; border-radius: 3px !important; overflow: hidden; width: 100%; background-color: var(--wp--preset--color--accent-5) !important; transition: border-color 0.18s ease; } .bb-footer-search .wp-block-search__inside-wrapper:focus-within { border-color: rgba(44, 26, 14, 0.6) !important; } .bb-footer-search .wp-block-search__input { flex: 1; background: transparent; border: none !important; outline: none !important; box-shadow: none !important; padding: 8px 12px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.8rem; font-weight: 300; color: rgba(44, 26, 14, 0.85); min-width: 0; } .bb-footer-search .wp-block-search__input::placeholder { color: rgba(44, 26, 14, 0.35); font-style: italic; } .bb-footer-search .wp-block-search__button { background: transparent !important; border: none !important; border-left: 1px solid rgba(44, 26, 14, 0.15) !important; border-radius: 0 !important; padding: 8px 14px; color: rgba(44, 26, 14, 0.6); font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.04em; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .bb-footer-search .wp-block-search__button:hover { color: rgba(44, 26, 14, 1); border-left-color: rgba(44, 26, 14, 0.35) !important; } /* ── Search results page ──────────────────────────────────────────── */ .bb-search-header .wp-block-query-title { font-family: var(--wp--preset--font-family--newsreader), serif; font-weight: 300; color: #2C1A0E; } .bb-search-header .wp-block-search__inside-wrapper { border: 1px solid rgba(44, 26, 14, 0.25); border-radius: 3px; overflow: hidden; transition: border-color 0.18s ease; max-width: 480px; } .bb-search-header .wp-block-search__inside-wrapper:focus-within { border-color: rgba(44, 26, 14, 0.6); } .bb-search-header .wp-block-search__input { border: none !important; outline: none !important; box-shadow: none !important; padding: 10px 14px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.9rem; font-weight: 300; color: rgba(44, 26, 14, 0.85); } .bb-search-header .wp-block-search__input::placeholder { color: rgba(44, 26, 14, 0.35); font-style: italic; } .bb-search-header .wp-block-search__button { background: rgba(44, 26, 14, 0.06); border: none; border-left: 1px solid rgba(44, 26, 14, 0.15); padding: 10px 18px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(44, 26, 14, 0.7); cursor: pointer; transition: background 0.15s, color 0.15s; } .bb-search-header .wp-block-search__button:hover { background: rgba(44, 26, 14, 0.12); color: rgba(44, 26, 14, 1); } /* Result rows */ .bb-search-results .bb-search-list { list-style: none !important; padding: 0 !important; margin: 0; } .bb-search-item { display: flex !important; gap: 2.5rem; align-items: flex-start; } .bb-search-item__meta { flex: 0 0 110px; padding-top: 3px; } .bb-search-item__meta .wp-block-post-terms { fonT-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(44, 26, 14, 0.45); display: block; } .bb-search-item__meta .wp-block-post-date { font-size: 0.72rem; font-weight: 300; color: rgba(44, 26, 14, 0.4); display: block; margin-top: 4px; } .bb-search-item__content .wp-block-post-title { margin: 0 0 6px !important; } .bb-search-item__content .wp-block-post-title a { color: #2C1A0E; font-weight: 500; text-decoration: none; } .bb-search-item__content .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .bb-search-item__content .wp-block-post-excerpt__excerpt { margin: 0; color: rgba(44, 26, 14, 0.65); font-size: 0.875rem; line-height: 1.65; font-weight: 300; } /* Pagination */ .bb-search-results .wp-block-query-pagination { display: flex; justify-content: center; gap: 8px; margin-top: var(--wp--preset--spacing--60); } .bb-search-results .wp-block-query-pagination a, .bb-search-results .wp-block-query-pagination-numbers .page-numbers { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.8rem; font-weight: 500; color: rgba(44, 26, 14, 0.6); padding: 6px 12px; border: 1px solid rgba(44, 26, 14, 0.2); border-radius: 3px; text-decoration: none; transition: border-color 0.15s, color 0.15s; } .bb-search-results .wp-block-query-pagination a:hover { border-color: rgba(44, 26, 14, 0.5); color: rgba(44, 26, 14, 1); } /* Mobile search results */ @media (max-width: 600px) { .bb-search-item { flex-direction: column; gap: 0.5rem; } .bb-search-item__meta { flex: none; display: flex; gap: 1rem; align-items: center; } } /* Native bb-subscribe-form (shortcode) - same visual language as Jetpack form above */ .bb-subscribe-form { margin: 0; padding: 0; } .bb-subscribe-row { display: flex; gap: 0; width: 100%; } .bb-subscribe-input { flex: 1; min-width: 0; border: 1px solid rgba(17,17,17,0.3); border-right: none; border-radius: 4px 0 0 4px; padding: 9px 12px; font-size: 0.82rem; font-family: var(--wp--preset--font-family--manrope), sans-serif; background: transparent; color: var(--wp--preset--color--contrast); outline: none; transition: border-color 0.15s ease; } .bb-subscribe-input:focus { border-color: var(--wp--preset--color--contrast); } .bb-subscribe-input::placeholder { color: rgba(17,17,17,0.38); font-weight: 300; } .bb-subscribe-btn { border: 1px solid var(--wp--preset--color--contrast); border-radius: 0 4px 4px 0; padding: 9px 14px; font-size: 0.78rem; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-weight: 500; letter-spacing: 0.05em; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--accent-5); cursor: pointer; white-space: nowrap; transition: opacity 0.15s ease; } .bb-subscribe-btn:hover { opacity: 0.75; } .bb-subscribe-note { margin: 8px 0 0 !important; padding: 0 !important; font-size: 0.68rem !important; font-weight: 300 !important; color: rgba(17,17,17,0.4) !important; letter-spacing: 0.02em; line-height: 1.4; } /* ═════════════════════════════════════════════════════════════ SOCIAL ICONS - .bb-social-icons / .bb-social-icon Used in header (right of nav) and footer (identity column). core/buttons wrapper + core/button per icon, SVG as button label. ═════════════════════════════════════════════════════════════ */ /* Strip all button chrome - make it a bare icon link */ .bb-social-icon .wp-element-button { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--wp--preset--color--accent-4); transition: color 0.15s ease, opacity 0.15s ease; } .bb-social-icon .wp-element-button:hover { color: var(--wp--preset--color--contrast); opacity: 1; background: transparent !important; } /* SVG inherits color from the */ .bb-social-icon svg { display: block; width: 16px; height: 16px; flex-shrink: 0; } /* Header icons - right-aligned, sit below nav */ .bb-header-right .bb-social-icons { padding-top: 6px; } /* Footer icons - left-aligned, sit below tagline */ .bb-footer-identity .bb-social-icons { display: flex; gap: 16px; } /* ═════════════════════════════════════════════════════════════ */ /* Bottom bar */ .bb-footer-bottom .wp-block-navigation { gap: var(--wp--preset--spacing--30); } /* Tablet - 2-col grid (identity full-width top, then pairs) */ @media (max-width: 900px) and (min-width: 601px) { .bb-footer-main.wp-block-columns { flex-wrap: wrap !important; row-gap: var(--wp--preset--spacing--40) !important; } .bb-footer-identity.wp-block-column { flex-basis: 100% !important; width: 100% !important; margin-bottom: 0; padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid rgba(17,17,17,0.12); } .bb-footer-nav.wp-block-column, .bb-footer-constellations.wp-block-column, .bb-footer-subscribe.wp-block-column, .bb-footer-community.wp-block-column { flex-basis: calc(50% - 20px) !important; width: calc(50% - 20px) !important; } } /* Mobile - single column stack */ @media (max-width: 600px) { .bb-footer .wp-block-columns { flex-direction: column !important; } .bb-footer .wp-block-column { flex-basis: 100% !important; width: 100% !important; } /* Tighter gap between stacked columns on mobile */ .bb-footer-main.wp-block-columns { gap: var(--wp--preset--spacing--50) !important; } .bb-footer-subscribe input[type="email"], .bb-footer-subscribe .wp-block-jetpack-subscriptions__container .wp-element-button, .bb-footer-subscribe button[type="submit"] { font-size: 1rem; padding: 12px 16px; } .bb-footer-bottom { flex-direction: column !important; gap: var(--wp--preset--spacing--20); align-items: flex-start; } /* Community buttons - fit content width on mobile, not full column */ .bb-footer-community .wp-block-button, .bb-footer-community .bb-footer-btn .wp-element-button { width: auto !important; } /* Search box - full width on mobile is fine */ .bb-footer-search.wp-block-search { width: 100% !important; } /* Single post: collapse 36/64 columns to stacked */ .single .wp-block-columns.are-vertically-aligned-top { flex-direction: column !important; } .single .wp-block-columns.are-vertically-aligned-top .wp-block-column { width: 100% !important; flex-basis: 100% !important; } /* Post title scale down on mobile */ .single .wp-block-post-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; line-height: 1.15 !important; } /* About page - tighten gap between intro and manifesto sections */ .bb-about-intro { padding-bottom: var(--wp--preset--spacing--50) !important; } .bb-about-manifesto { padding-top: var(--wp--preset--spacing--50) !important; } } @media (prefers-reduced-motion: reduce) { .bb-footer a, .bb-footer .wp-element-button, .bb-footer input[type="email"] { transition: none; } } /* ═════════════════════════════════════════════════════════════ PRIVACY POLICY PAGE (ID 4255) ═════════════════════════════════════════════════════════════ */ /* "LEGAL" eyebrow */ .bb-privacy-intro .bb-privacy-eyebrow { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(44, 26, 14, 0.4); margin-bottom: var(--wp--preset--spacing--20); } /* "Last updated" dateline */ .bb-privacy-intro .bb-privacy-meta { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.72rem; font-weight: 400; color: rgba(44, 26, 14, 0.45); letter-spacing: 0.02em; margin-bottom: var(--wp--preset--spacing--50); } /* Opening lede paragraph */ .bb-privacy-intro .bb-privacy-lede { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 300; line-height: 1.7; color: #2C1A0E; margin-bottom: var(--wp--preset--spacing--30); } /* Each section block — separated by a hairline */ .bb-privacy-section { border-top: 1px solid rgba(44, 26, 14, 0.1); padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--50) !important; margin-bottom: 0 !important; } /* Section headings — Manrope uppercase, tight and authoritative */ .bb-privacy-section .wp-block-heading.bb-privacy-heading { font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: #2C1A0E !important; margin-bottom: var(--wp--preset--spacing--40) !important; margin-top: 0 !important; } /* Body paragraphs — readable, editorial */ .bb-privacy-section p { font-family: var(--wp--preset--font-family--hauora), sans-serif; font-size: 0.95rem; line-height: 1.75; color: rgba(44, 26, 14, 0.85); margin-bottom: var(--wp--preset--spacing--30); } /* Lists — clean, no bullets by default, indented softly */ .bb-privacy-section .wp-block-list.bb-privacy-list { padding-left: 0; list-style: none; margin: 0 0 var(--wp--preset--spacing--30); } .bb-privacy-section .wp-block-list.bb-privacy-list li { font-family: var(--wp--preset--font-family--hauora), sans-serif; font-size: 0.95rem; line-height: 1.75; color: rgba(44, 26, 14, 0.85); padding: 4px 0; border-bottom: 1px solid rgba(44, 26, 14, 0.07); } .bb-privacy-section .wp-block-list.bb-privacy-list li:last-child { border-bottom: none; } .bb-privacy-section .wp-block-list.bb-privacy-list a { color: #2C1A0E; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(44, 26, 14, 0.3); } /* Strong terms in legal basis section */ .bb-privacy-section p strong { font-weight: 600; color: #2C1A0E; } /* Contact section — slightly warm background card */ .bb-privacy-section--contact { background: var(--wp--preset--color--accent-5); border-radius: 6px; padding-left: var(--wp--preset--spacing--50) !important; padding-right: var(--wp--preset--spacing--50) !important; border-top: none !important; margin-top: var(--wp--preset--spacing--50) !important; } /* ═════════════════════════════════════════════════════════════ SINGLE POST - share bar, likes, prev/next nav ═════════════════════════════════════════════════════════════ */ /* ── Copyright notice ───────────────────────────────────────────────────── */ .bb-copyright { margin: var(--wp--preset--spacing--60) 0 0; padding: var(--wp--preset--spacing--40) 0; border-top: 1px solid rgba(44, 26, 14, 0.1); } .bb-copyright__line { font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: rgba(44, 26, 14, 0.9) !important; margin: 0 0 0.5em !important; } .bb-copyright__body { font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.72rem !important; font-weight: 400 !important; line-height: 1.65 !important; color: rgba(44, 26, 14, 0.65) !important; margin: 0 !important; } /* Post footer: vertically centre both sides within the track */ .bb-post-footer.wp-block-group { align-items: center !important; padding-bottom: var(--wp--preset--spacing--50) !important; } /* Support bar: tagline sits just above, buttons centred in track */ .bb-support-bar.wp-block-group { flex-direction: column !important; align-items: flex-end !important; gap: 10px !important; } /* Tagline - small label above the buttons */ .bb-support-tagline { font-size: 0.62rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #2C1A0E !important; margin: 0 !important; line-height: 1 !important; } /* Both buttons: matching outline style */ .bb-support-btn .wp-block-button__link { border-radius: 6px !important; background: transparent !important; color: #111111 !important; border-color: #111111 !important; font-weight: 400 !important; transition: background 0.15s, color 0.15s; } .bb-support-btn .wp-block-button__link:hover { background: #111111 !important; color: #f5f1eb !important; } /* Wrap gracefully on narrow screens */ @media (max-width: 600px) { .bb-post-footer { flex-wrap: wrap !important; gap: var(--wp--preset--spacing--40) !important; } .bb-support-bar { width: 100%; align-items: flex-start !important; } } /* ═════════════════════════════════════════════════════════════ SINGLE POST - pull quotes & secondary media Left col: flex-basis 36% of 940px wide = ~338px, starts at x=50 Right col: flex-basis 64%, starts at x=435 (gap ≈ 73px) Pull-left correction = 385px (435px offset - 50px left edge) ═════════════════════════════════════════════════════════════ */ /* -- Pull quote -- */ .entry-content .wp-block-pullquote { /* Float toward body - 45px right of flush, width reduced to keep right edge in the gutter, close enough to feel in dialogue with body text */ margin-left: calc(var(--bb-pull-left, -385px) + 65px) !important; width: calc(var(--bb-left-col-width, 312px) - 65px) !important; max-width: calc(var(--bb-left-col-width, 312px) - 65px) !important; /* Comfortable breathing room before body text */ margin-right: var(--wp--preset--spacing--50) !important; margin-top: 0 !important; margin-bottom: var(--wp--preset--spacing--50) !important; border-left: none !important; padding: 0 !important; text-align: left; } .entry-content .wp-block-pullquote blockquote { border-left: 2px solid var(--wp--preset--color--contrast); padding-left: var(--wp--preset--spacing--30); margin: 0; } .entry-content .wp-block-pullquote blockquote p { /* Slightly larger than body (17.3px) - editorial presence */ font-size: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem); font-weight: 300; line-height: 1.55; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); margin: 0; opacity: 1; } /* -- Secondary / inline images (alignleft inside post content) -- */ .entry-content .wp-block-image.alignleft { /* Same pull-left as pullquote - JS sets --bb-pull-left precisely */ margin-left: var(--bb-pull-left, -385px) !important; /* Fill the left column exactly */ width: var(--bb-left-col-width, 312px) !important; max-width: var(--bb-left-col-width, 312px) !important; /* Comfortable gap before body text */ margin-right: var(--wp--preset--spacing--50) !important; margin-bottom: var(--wp--preset--spacing--50) !important; margin-top: 0 !important; } .entry-content .wp-block-image.alignleft img { width: 100%; height: auto; display: block; /* Match the featured image aspect ratio 3:2 */ aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; } /* -- Responsive: below 700px columns collapse, undo the pull -- */ @media (max-width: 700px) { .entry-content .wp-block-pullquote, .entry-content .wp-block-image.alignleft { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; float: none !important; } } /* ═══════════════════════════════════════════════════════════════════ SINGLE POST - body text legibility ═══════════════════════════════════════════════════════════════════ */ /* Body paragraphs: open line-height, breathing paragraph gap */ .entry-content p { line-height: 1.62 !important; margin-top: 0 !important; margin-bottom: 1.3em !important; letter-spacing: 0.01em; } /* Last paragraph in a section - no trailing gap */ .entry-content p:last-child { margin-bottom: 0 !important; } /* Section headings inside the essay body */ .entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 2.2em !important; margin-bottom: 0.6em !important; line-height: 1.25 !important; } /* -- Essay voice reading: floating matte-paper card (matches poetry cards) -- */ .bb-essay-audio { position: relative; width: 100%; margin: 0 0 var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); background: #f5f1eb; border-radius: 14px; box-sizing: border-box; overflow: hidden; box-shadow: 0 1px 3px rgba(44,26,14,0.08), 0 6px 18px rgba(44,26,14,0.10), 0 24px 56px rgba(44,26,14,0.10), inset 0 1px 0 rgba(255,255,255,0.7); --bb-audio-progress: 0%; } /* Grain overlay via SVG turbulence filter, same as poetry cards */ .bb-essay-audio::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; mix-blend-mode: soft-light; } .bb-essay-audio > * { position: relative; z-index: 2; } .bb-essay-audio__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); } .bb-essay-audio__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #2C1A0E; } /* Three quiet bars that breathe while the reading plays */ .bb-essay-audio__pulse { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; opacity: 0; transition: opacity 0.4s ease; } .bb-essay-audio__pulse i { display: block; width: 2px; height: 4px; border-radius: 1px; background: #2C1A0E; } .bb-essay-audio.is-playing .bb-essay-audio__pulse { opacity: 0.85; } .bb-essay-audio.is-playing .bb-essay-audio__pulse i { animation: bb-audio-pulse 1.1s ease-in-out infinite; } .bb-essay-audio.is-playing .bb-essay-audio__pulse i:nth-child(2) { animation-delay: 0.25s; } .bb-essay-audio.is-playing .bb-essay-audio__pulse i:nth-child(3) { animation-delay: 0.5s; } @keyframes bb-audio-pulse { 0%, 100% { height: 4px; } 50% { height: 10px; } } @media (prefers-reduced-motion: reduce) { .bb-essay-audio.is-playing .bb-essay-audio__pulse i { animation: none; height: 7px; } } .bb-essay-audio__meta { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.72rem; font-weight: 400; color: #686868; text-align: right; } /* Custom controls stay hidden until the script takes over */ .bb-essay-audio__controls, .bb-essay-audio__note { display: none; } .bb-essay-audio.is-ready .bb-essay-audio__controls { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); } .bb-essay-audio.is-ready .bb-essay-audio__note { display: block; margin: 0; padding-top: 16px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.02em; color: #8a7c6d; } .bb-essay-audio__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%; background: #2C1A0E; color: #f5f1eb; cursor: pointer; box-shadow: 0 2px 8px rgba(44,26,14,0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .bb-essay-audio__toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(44,26,14,0.32); } .bb-essay-audio__toggle:active { transform: translateY(0); } .bb-essay-audio__toggle:focus-visible { outline: 2px solid #2C1A0E; outline-offset: 3px; } .bb-essay-audio__toggle svg { width: 22px; height: 22px; } .bb-essay-audio__icon-pause { display: none; } .bb-essay-audio.is-playing .bb-essay-audio__icon-play { display: none; } .bb-essay-audio.is-playing .bb-essay-audio__icon-pause { display: block; } .bb-essay-audio__track { flex: 1 1 auto; min-width: 0; } /* Hairline seek bar, echoing the editorial rules */ .bb-essay-audio__seek { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px; margin: 0; padding: 0; background: transparent; cursor: pointer; } .bb-essay-audio__seek::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient( to right, #2C1A0E 0, #2C1A0E var(--bb-audio-progress), rgba(44,26,14,0.18) var(--bb-audio-progress), rgba(44,26,14,0.18) 100% ); } .bb-essay-audio__seek::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(44,26,14,0.18); } .bb-essay-audio__seek::-moz-range-progress { height: 2px; border-radius: 1px; background: #2C1A0E; } .bb-essay-audio__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -5px; border: none; border-radius: 50%; background: #2C1A0E; transition: transform 0.15s ease; } .bb-essay-audio__seek::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #2C1A0E; transition: transform 0.15s ease; } .bb-essay-audio__seek:hover::-webkit-slider-thumb, .bb-essay-audio__seek:focus-visible::-webkit-slider-thumb { transform: scale(1.25); } .bb-essay-audio__seek:hover::-moz-range-thumb, .bb-essay-audio__seek:focus-visible::-moz-range-thumb { transform: scale(1.25); } .bb-essay-audio__seek:focus-visible { outline: 2px solid rgba(44,26,14,0.4); outline-offset: 4px; border-radius: 2px; } .bb-essay-audio__times { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.68rem; font-variant-numeric: tabular-nums; color: #686868; } /* Touch devices: bigger scrub thumb and a taller touch strip */ @media (pointer: coarse) { .bb-essay-audio__seek { height: 28px; } .bb-essay-audio__seek::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -7px; } .bb-essay-audio__seek::-moz-range-thumb { width: 16px; height: 16px; } } /* Native fallback (no JS): keep the tinted browser player */ .bb-essay-audio__player { display: block; width: 100%; height: 38px; } .bb-essay-audio.is-ready .bb-essay-audio__player { display: none; } .bb-essay-audio__player::-webkit-media-controls-panel { background-color: rgba(245,241,235,0.75); } @media (max-width: 600px) { .bb-essay-audio { border-radius: 10px; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); } .bb-essay-audio__header { align-items: flex-start; flex-direction: column; gap: 4px; } .bb-essay-audio__meta { text-align: left; } .bb-essay-audio__toggle { width: 48px; height: 48px; } } /* Category / taxonomy term links - match accent-4, no theme blue */ .wp-block-post-terms a { color: var(--wp--preset--color--accent-4) !important; text-decoration: none; transition: opacity 0.15s ease; } .wp-block-post-terms a:hover { opacity: 0.6; } /* -- Hide the default Jetpack sharing block -- */ .sharedaddy { display: none !important; } /* -- Share bar -- */ .bb-share-label { margin: 0 !important; line-height: 1 !important; } /* Share icons - allow wrap on narrow viewports */ .bb-share-icons.wp-block-buttons { flex-wrap: wrap !important; } /* Share icon links - reuse .bb-social-icon chrome, already defined above */ .bb-share-icons .bb-social-icon .wp-element-button { color: var(--wp--preset--color--accent-4); } /* Copy-link icon shows a tooltip on success */ .bb-share-copy .wp-element-button { position: relative; } .bb-share-copy .wp-element-button::after { content: "Copied"; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-size: 0.6rem; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .bb-share-copy.copied .wp-element-button::after { opacity: 1; } /* -- Jetpack Likes widget -- */ /* Hide the default "Like this:" heading - the icon speaks for itself */ .jetpack-likes-widget-wrapper .sd-title, .sd-block.sd-like > h3.sd-title { display: none !important; } /* Wrapper: stack icon + label vertically, right-aligned to share bar */ .jetpack-likes-widget-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } /* The iframe holds the heart button + liker avatars */ .jetpack-likes-widget-wrapper iframe { border: none !important; max-width: 100% !important; } /* Muted eyebrow label beneath the heart - replaces the clunky heading */ .jetpack-likes-widget-wrapper .sd-content::before { content: 'Appreciate this'; display: block; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(44, 26, 14, 0.4); margin-bottom: 6px; } /* ── Comment form ────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────── COMMENT FORM — native WP + Jetpack iframe wrapper ────────────────────────────────────────────────────────────────────── */ /* Section wrapper — add a quiet top hairline to separate from prev/next */ .wp-block-comments { border-top: 1px solid rgba(44, 26, 14, 0.1); } /* "Leave a Reply" / "Leave a response" heading */ .comment-reply-title { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-size: clamp(1rem, 1.5vw, 1.25rem) !important; font-weight: 300 !important; color: rgba(44, 26, 14, 0.5) !important; letter-spacing: 0.01em !important; margin-top: 0 !important; margin-bottom: var(--wp--preset--spacing--40) !important; } /* "Cancel reply" link inside heading */ .comment-reply-title .cancel-reply-link, .comment-reply-title small a { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(44, 26, 14, 0.4); text-decoration: none; } /* Disclaimer note — "Your email address will not be published" */ .comment-notes { font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.7rem !important; color: rgba(44, 26, 14, 0.35) !important; margin-bottom: var(--wp--preset--spacing--40) !important; letter-spacing: 0.02em; } /* Field labels */ .comment-form label { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(44, 26, 14, 0.4); display: block; margin-bottom: 6px; } /* All inputs and textarea */ .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { background-color: var(--wp--preset--color--accent-5) !important; border: 1px solid rgba(44, 26, 14, 0.15) !important; border-radius: 3px !important; color: rgba(44, 26, 14, 0.85) !important; font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.875rem !important; font-weight: 400 !important; padding: 10px 14px !important; width: 100% !important; box-sizing: border-box; transition: border-color 0.18s ease; outline: none; } .comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form input[type="url"]:focus, .comment-form textarea:focus { border-color: rgba(44, 26, 14, 0.4) !important; box-shadow: 0 0 0 3px rgba(44, 26, 14, 0.05) !important; } .comment-form textarea { min-height: 160px; resize: vertical; } /* "Post Comment" button — typewritten stamp style */ .form-submit #submit { background: transparent !important; color: rgba(44, 26, 14, 0.75) !important; border: 1px solid rgba(44, 26, 14, 0.3) !important; border-radius: 3px !important; font-family: var(--wp--preset--font-family--manrope), sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; padding: 9px 22px !important; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .form-submit #submit:hover { background: rgba(44, 26, 14, 0.05) !important; color: rgba(44, 26, 14, 1) !important; border-color: rgba(44, 26, 14, 0.55) !important; } /* Jetpack comment iframe wrapper — strip all chrome Jetpack adds around it */ .jetpack_remote_comment, iframe#jetpack_remote_comment { border: none !important; background: transparent !important; width: 100% !important; display: block !important; } /* Container Jetpack injects: no extra margins or borders */ #respond.wp-block-post-comments-form { padding-top: 0 !important; } /* Hide the "Required fields are marked *" disclaimer on Jetpack form (Jetpack handles this internally inside the iframe) */ .jetpack_remote_comment ~ .comment-notes, form#commentform.has-jetpack ~ .comment-notes { display: none; } /* -- Prev / Next navigation -- */ .bb-post-nav { gap: 0 !important; } /* Each nav link takes exactly half the width */ .bb-post-nav .wp-block-post-navigation-link { width: 50%; display: flex; flex-direction: column; gap: 5px; } .bb-post-nav .bb-nav-next { text-align: right; align-items: flex-end; } .bb-post-nav .bb-nav-prev { align-items: flex-start; } /* Direction label - the "Previous" / "Next" text */ .bb-post-nav .wp-block-post-navigation-link .post-navigation-link__label, .bb-post-nav .wp-block-post-navigation-link .wp-block-post-navigation-link__label { display: block; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); margin-bottom: 4px; } /* Post title */ .bb-post-nav .wp-block-post-navigation-link a { font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--wp--preset--color--contrast); text-decoration: none; max-width: 380px; display: block; transition: opacity 0.15s ease; } .bb-post-nav .bb-nav-next a { text-align: right; margin-left: auto; } .bb-post-nav .wp-block-post-navigation-link a:hover { opacity: 0.55; } /* -- Responsive -- */ @media (max-width: 600px) { .bb-post-nav { flex-direction: column !important; gap: var(--wp--preset--spacing--50) !important; } .bb-post-nav .wp-block-post-navigation-link { width: 100%; } .bb-post-nav .bb-nav-next { text-align: left; align-items: flex-start; } .bb-post-nav .bb-nav-next a { text-align: left; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .bb-post-nav .wp-block-post-navigation-link a, .bb-share-copy .wp-element-button::after { transition: none; } } /* ═══════════════════════════════════════════════════════════════ POETRY - .bb-poem ═══════════════════════════════════════════════════════════════ */ /* Verse block - poem body */ .bb-poem.wp-block-verse { font-family: var(--wp--preset--font-family--newsreader), serif; max-width: 560px; padding: 0; background: none; border: none; color: #111111 !important; font-weight: 400 !important; } /* Poetry card - matte paper float (homepage + poetry page + single poem) */ body.page-id-241 .bb-poetry-card.wp-block-group, body.page-id-3892 .bb-poetry-card.wp-block-group, body.is-single-poetry .entry-content { position: relative; background: #f5f1eb !important; border-color: transparent !important; border-width: 0px !important; border-radius: 14px; padding: var(--wp--preset--spacing--50) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow: hidden; box-shadow: 0 1px 3px rgba(44,26,14,0.08), 0 6px 18px rgba(44,26,14,0.10), 0 24px 56px rgba(44,26,14,0.10), inset 0 1px 0 rgba(255,255,255,0.7); } @media (max-width: 700px) { body.is-single-poetry .entry-content { border-radius: 10px; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important; } } /* Grain overlay via SVG turbulence filter */ body.page-id-241 .bb-poetry-card.wp-block-group::after, body.page-id-3892 .bb-poetry-card.wp-block-group::after, body.is-single-poetry .entry-content::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; mix-blend-mode: soft-light; } /* Ensure card content sits above the grain */ body.page-id-241 .bb-poetry-card.wp-block-group > *, body.page-id-3892 .bb-poetry-card.wp-block-group > *, body.is-single-poetry .entry-content > * { position: relative; z-index: 2; } /* Poetry card excerpt - line-break mode so
renders vertically */ .bb-poetry-card .wp-block-post-excerpt__excerpt { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-style: normal !important; white-space: normal; font-size: 1rem !important; color: #111111 !important; font-weight: 400 !important; line-height: 1.8 !important; padding-left: 30px !important; padding-right: 30px !important; } /* Title also indented to align with the verse lines */ .bb-poetry-card .wp-block-post-title { padding-left: 30px !important; padding-right: 30px !important; } /* Title link colour - override theme default teal */ .bb-poetry-card .wp-block-post-title a { color: var(--wp--preset--color--contrast) !important; text-decoration: none; } /* Read link indented to match */ .bb-poetry-card .wp-block-read-more { padding-left: 30px !important; } /* "Read full poem →" more-link - warm, italic, Newsreader, no underline */ .bb-poetry-card .wp-block-post-excerpt__more-link { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-style: italic; font-weight: 300; font-size: 0.9rem !important; color: rgba(44,26,14,0.55) !important; text-decoration: none !important; letter-spacing: 0.01em; transition: color 0.15s; } .bb-poetry-card .wp-block-post-excerpt__more-link:hover { color: rgba(44,26,14,0.9) !important; } .bb-poetry-card .wp-block-post-excerpt__more-text { padding-left: 30px !important; margin-top: var(--wp--preset--spacing--20); } /* ── Poetry page ───────────────────────────────── */ /* Intro + filter sit tightly below the page title */ .page-id-3892 .entry-content { margin-top: 0 !important; } .page-id-3892 .bb-poetry-intro { padding-top: var(--wp--preset--spacing--20) !important; padding-bottom: var(--wp--preset--spacing--40) !important; } /* Close the gap between the page h1 and the intro block */ .page-id-3892 .entry-content.wp-block-post-content { margin-top: 0 !important; padding-top: 0 !important; } /* 3-col grid */ .page-id-3892 .bb-poetry-grid.wp-block-post-template { grid-template-columns: repeat(3, 1fr) !important; gap: var(--wp--preset--spacing--40) !important; } /* Card title */ .page-id-3892 .bb-poetry-card .wp-block-post-title { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-size: 1.05rem !important; font-weight: 400 !important; line-height: 1.3 !important; } .page-id-3892 .bb-poetry-card .wp-block-post-title a { color: var(--wp--preset--color--contrast) !important; text-decoration: none; } /* Verse excerpt - upright Newsreader, line-break preserved */ .page-id-3892 .bb-poetry-card .wp-block-post-excerpt__excerpt { font-family: var(--wp--preset--font-family--newsreader), serif !important; font-style: normal !important; line-height: 1.75 !important; font-size: 0.95rem !important; font-weight: 400 !important; } /* ── Category filter pills ─────────────────────── */ .bb-poetry-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--wp--preset--spacing--50); } .bb-poetry-filter__btn { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--contrast); background: transparent; border: 1px solid rgba(17,17,17,0.25); border-radius: 4px; padding: 6px 14px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; appearance: none; -webkit-appearance: none; } .bb-poetry-filter__btn:hover { border-color: var(--wp--preset--color--contrast); } .bb-poetry-filter__btn.is-active { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); } /* Smooth hide/show transition when filtering */ .bb-poetry-grid .wp-block-post { transition: opacity 0.2s ease; } /* Responsive */ @media (max-width: 900px) and (min-width: 601px) { .page-id-3892 .bb-poetry-grid.wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .page-id-3892 .bb-poetry-grid.wp-block-post-template { grid-template-columns: 1fr !important; } .bb-poetry-filter { gap: 6px; } } /* Attribution line under the poem */ .bb-poem-attribution { max-width: 560px; padding-top: var(--wp--preset--spacing--30) !important; border-top: 1px solid rgba(17,17,17,0.12); font-family: var(--wp--preset--font-family--manrope), sans-serif !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE - homepage, essays & global ═══════════════════════════════════════════════════════════════ */ /* ── Tablet (601-900px) ─────────────────────── */ @media (max-width: 900px) and (min-width: 601px) { /* ─ Time-travel dark band ──────────────────────── */ .bb-home-timetravel .bb-timetravel-counter, .bb-home-timetravel .bb-timetravel-invite { font-size: clamp(1.4rem, 3.5vw, 2rem) !important; } .bb-home-timetravel .bb-year-strip__list a { font-size: 1rem !important; padding: 0 20px !important; } /* Hero: weight carries through to tablet */ .bb-hero-text .wp-block-post-title { font-weight: 500 !important; } .bb-hero-text .wp-block-post-excerpt__excerpt { font-weight: 500 !important; } /* Homepage - Latest Essays: 2-col, 4 cards (2 rows) */ .bb-home-essays-row.wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; } .bb-home-essays-row.wp-block-post-template > li:nth-child(n + 5) { display: none !important; } /* Homepage - Field Notes: 2-col, 4 cards (2 rows) */ .bb-home-fieldnotes .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; } .bb-home-fieldnotes .wp-block-post-template > li:nth-child(n + 4) { display: block !important; } /* Homepage - Enquiries/Poetry: stack columns */ .bb-home-split .wp-block-columns { flex-direction: column !important; } .bb-home-split .wp-block-column { width: 100% !important; flex-basis: 100% !important; } /* Poetry column on tablet - remove left border/padding, use top separator */ .bb-split-poetry.wp-block-column { border-left: none !important; padding-left: 0 !important; padding-top: var(--wp--preset--spacing--40) !important; border-top: 1px solid rgba(104,104,104,0.3) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow: visible; } .bb-poetry-card.wp-block-group { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Essays plugin - 2-col grid on tablet */ .bb-essays-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Mobile (≤600px) ───────────────────────── */ @media (max-width: 600px) { /* ─ Global ────────────────────────────── */ /* Prevent any horizontal overflow */ .wp-site-blocks, body { overflow-x: hidden; max-width: 100vw; } /* ─ Header nav - hamburger fix ────────────── */ /* The outer row has is-nowrap + alignwide which pushes content beyond the 390px viewport. Clip it to 100% and add breathing room. */ header .wp-block-group.has-global-padding { padding-left: 16px !important; padding-right: 16px !important; } header .wp-block-group.alignwide.is-nowrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible; } /* Shrink site title so there's room for the hamburger */ .wp-block-site-title a, .wp-block-site-title { font-size: 0.95rem !important; white-space: nowrap; } /* Hamburger: always in-flow, right-aligned, fully tappable */ .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; position: relative !important; z-index: 100; } /* Keep the bb-header-right group fully on-screen */ .bb-header-right { max-width: calc(100vw - 160px) !important; overflow: visible !important; } /* ─ Homepage hero ─────────────────────── */ .bb-home-hero.wp-block-cover { min-height: 320px !important; } .bb-hero-text .wp-block-post-title { font-size: clamp(1.5rem, 6vw, 1.9rem) !important; line-height: 1.2 !important; font-weight: 500 !important; } /* Show description on mobile - weight matches desktop */ .bb-hero-text .wp-block-post-excerpt { display: block !important; max-width: 100% !important; } .bb-hero-text .wp-block-post-excerpt__excerpt { font-size: 0.9rem !important; line-height: 1.55 !important; font-weight: 500 !important; } /* ─ Homepage Latest Essays ─────────────── */ /* Use ul selector + !important to beat the scoped wp-container-* rule */ ul.bb-home-essays-row.wp-block-post-template { grid-template-columns: 1fr !important; gap: 24px !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } ul.bb-home-essays-row.wp-block-post-template > li:nth-child(n + 4) { display: none !important; } .bb-home-essays-row .wp-block-post-title { font-size: 1.05rem !important; font-weight: 500 !important; padding: 8px 10px 10px !important; line-height: 1.3 !important; } /* Keep featured images proportional */ .bb-home-essays-row .wp-block-post-featured-image img { max-height: 200px; object-fit: cover; width: 100%; } /* ─ Homepage Field Notes ──────────────── */ .bb-home-fieldnotes .wp-block-post-template { grid-template-columns: 1fr !important; } .bb-fieldnote-card { padding: var(--wp--preset--spacing--30) !important; } .bb-home-fieldnotes .wp-block-post-title { font-size: 1.1rem !important; font-weight: 500 !important; line-height: 1.3 !important; } /* ─ Homepage pullquote ───────────────── */ .bb-home-pullquote { font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important; font-weight: 400 !important; } /* ─ Homepage Enquiries / Poetry ───────── */ .bb-home-split .wp-block-columns { flex-direction: column !important; } .bb-home-split .wp-block-column { width: 100% !important; flex-basis: 100% !important; min-width: 0 !important; } /* Enquiry rows: stack label + button vertically */ .bb-enquiry-item.wp-block-group { flex-direction: column !important; align-items: flex-start !important; gap: var(--wp--preset--spacing--20) !important; } /* Poetry column on mobile - remove left border/padding, use top separator */ .bb-split-poetry.wp-block-column { border-left: none !important; padding-left: 0 !important; padding-top: var(--wp--preset--spacing--40) !important; border-top: 1px solid rgba(104,104,104,0.3) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow: visible; } .bb-poetry-card.wp-block-group { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .bb-poetry-card .wp-block-post-title { font-size: 1rem !important; font-weight: 500 !important; line-height: 1.3 !important; } .bb-poetry-card .wp-block-post-excerpt__excerpt, .bb-poetry-card .wp-block-post-title, .bb-poetry-card .wp-block-read-more { padding-left: 0 !important; padding-right: 0 !important; } /* ─ Time-travel dark band: mobile ──────────────── */ /* Use full container width - reduce side padding so text breathes */ .bb-home-timetravel { padding-left: 20px !important; padding-right: 20px !important; } /* Both text lines: scale down slightly, still same voice */ .bb-home-timetravel .bb-timetravel-counter, .bb-home-timetravel .bb-timetravel-invite { font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important; } /* Year strip: smaller font so more years visible at once */ .bb-home-timetravel .bb-year-strip__list a { font-size: 0.95rem !important; padding: 0 16px !important; } /* Tighten strip padding */ .bb-home-timetravel .bb-year-strip { padding: 0 60px; } .bb-home-timetravel .bb-year-strip-wrap::before, .bb-home-timetravel .bb-year-strip-wrap::after { width: 60px; } /* ─ Essays page plugin grid ───────────── */ .bb-essays-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* Section label - allow wrapping */ .bb-essays-section-label { white-space: normal !important; font-size: 0.55rem !important; } /* View All Essays button - full width on mobile */ .bb-essays-grid + .wp-block-buttons, body.page-id-3891 .wp-block-buttons { padding-left: 0 !important; } /* ─ Essays page intro columns ─────────── */ body.page-id-3891 .wp-block-columns { flex-direction: column !important; } body.page-id-3891 .wp-block-column { flex-basis: 100% !important; min-width: 0 !important; } } /* ============================================================ CONVERSATIONS PAGE (page-id-3893) ============================================================ */ /* Tighten gap between page title and content - all menu pages share this rule */ body.page-id-3893 main .wp-block-group.alignfull, body.page-id-3891 main .wp-block-group.alignfull, body.page-id-3892 main .wp-block-group.alignfull, body.page-id-3894 main .wp-block-group.alignfull, body.page-id-3895 main .wp-block-group.alignfull { padding-top: var(--wp--preset--spacing--30) !important; } body.page-id-3893 .wp-block-post-content, body.page-id-3891 .wp-block-post-content, body.page-id-3892 .wp-block-post-content, body.page-id-3894 .wp-block-post-content, body.page-id-3895 .wp-block-post-content { padding-top: 0 !important; } body.page-id-3893 .wp-block-post-content > *, body.page-id-3891 .wp-block-post-content > *, body.page-id-3892 .wp-block-post-content > *, body.page-id-3894 .wp-block-post-content > *, body.page-id-3895 .wp-block-post-content > * { margin-top: 0 !important; } /* Essays: reduce the baked-in padding-top on the intro columns block + separator */ body.page-id-3891 .wp-block-post-content > .wp-block-columns:first-child { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; border-bottom: 1px solid rgba(17,17,17,0.12); margin-bottom: var(--wp--preset--spacing--50) !important; } /* ============================================================ ABOUT PAGE ============================================================ */ /* Collapse gap between page title and hero block */ body.page-id-1 .entry-content { margin-top: 0 !important; } body.page-id-1 .bb-about-hero { padding-top: var(--wp--preset--spacing--30) !important; } body.page-id-1 .bb-about-body { padding-bottom: var(--wp--preset--spacing--40) !important; } /* Hero lede - large manifesto heading */ body.page-id-1 .bb-about-lede { font-family: Newsreader, serif; font-size: clamp(1.8rem, 1.8rem + ((1vw - 0.2rem) * 2.2), 3.4rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: #000000; margin-top: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); max-width: 820px; } /* Eyebrow */ body.page-id-1 .bb-about-hero .bb-section-eyebrow { color: #000000; } /* Sub lede */ body.page-id-1 .bb-about-sub { font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.45), 1.25rem); font-weight: 300; line-height: 1.65; color: #2C1A0E; max-width: 640px; margin-bottom: 0; } /* Hairline below hero */ body.page-id-1 .bb-about-hero { border-bottom: 1px solid rgba(17,17,17,0.12); } /* Body text */ body.page-id-1 .bb-about-body .wp-block-paragraph { font-size: clamp(0.95rem, 0.95rem + ((1vw - 0.2rem) * 0.2), 1.1rem); font-weight: 300; line-height: 1.75; color: #2C1A0E; max-width: 640px; } /* Author intro section - tighten bottom gap */ body.page-id-1 .bb-about-intro { padding-bottom: var(--wp--preset--spacing--40) !important; } /* Proverb paragraph - italic, warm, sits just before the cite label */ body.page-id-1 .bb-about-proverb { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: clamp(1rem, 1.5vw, 1.15rem) !important; font-style: italic; font-weight: 300; line-height: 1.6; color: rgba(44,26,14,0.75); margin-bottom: 4px !important; } /* Pullquote cite - inline label, not block */ body.page-id-1 .bb-about-pullquote cite { display: inline; font-size: 0.65rem; font-style: normal; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(44,26,14,0.4); } /* Pullquote (cite label only - proverb text is a sibling paragraph) */ body.page-id-1 .bb-about-pullquote { margin: 0 !important; padding: 0 !important; border: none !important; background: none; max-width: none !important; width: auto; } /* Author wrap - tight padding, no extra space */ body.page-id-1 .bb-about-author-wrap { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--30) !important; min-height: unset !important; margin-bottom: 0 !important; } /* Author section toggle button */ body.page-id-1 .bb-about-author-toggle-wrap { margin-bottom: 0; } body.page-id-1 .bb-about-author-btn .wp-element-button { background: none; border: none; padding: 12px 0; color: #111111; font-family: Newsreader, serif; font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.3), 1.2rem); font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; border-radius: 0 !important; box-shadow: none; } body.page-id-1 .bb-about-author-btn .wp-element-button:hover { background: none; color: #000; } body.page-id-1 .bb-author-chevron { display: inline-block; font-family: Manrope, sans-serif; font-style: normal; font-size: 0.85rem; font-weight: 400; line-height: 1; opacity: 0.5; } /* Author body - portrait + bio */ body.page-id-1 .bb-about-author-body { margin-top: 0; max-width: none !important; width: 100%; padding: 0 !important; } body.page-id-1 .bb-about-author-body.is-open { margin-top: var(--wp--preset--spacing--40); } body.page-id-1 .bb-about-author-cols { align-items: start; gap: var(--wp--preset--spacing--50); } body.page-id-1 .bb-about-portrait { margin: 0; } body.page-id-1 .bb-about-portrait img { border-radius: 6px; width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3 / 4; filter: grayscale(100%); } body.page-id-1 .bb-about-author-bio { font-size: 0.92rem !important; font-weight: 300; line-height: 1.8; color: #2C1A0E !important; } /* Mobile */ @media (max-width: 700px) { body.page-id-1 .bb-about-author-cols { flex-direction: column; } body.page-id-1 .bb-about-pullquote { padding: var(--wp--preset--spacing--30); } } /* Visual Diary single: deep black title + eyebrow */ body.single-bb_visual_diary .bb-vd-header .wp-block-post-title, body.single-bb_visual_diary .bb-vd-header .bb-section-eyebrow { color: #000000 !important; } body.single-bb_visual_diary .bb-section-eyebrow { font-family: Manrope, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } /* Visual Diary listing page intro + separator */ body.page-id-3894 .bb-vd-page-intro { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; border-bottom: 1px solid rgba(17,17,17,0.12); margin-bottom: 0 !important; } body.page-id-3894 .bb-section-eyebrow, body.page-id-3894 .bb-vd-page-intro p:not(.bb-section-eyebrow) { color: #2C1A0E; } body.page-id-3894 .bb-vd-grid-wrap { padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--50) !important; } /* Poetry: reduce the baked-in padding-top on the intro block + separator */ body.page-id-3892 .bb-poetry-intro { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--30) !important; border-bottom: 1px solid rgba(17,17,17,0.12); margin-bottom: var(--wp--preset--spacing--50) !important; } /* Poetry intro text: match Essays size and colour */ body.page-id-3892 .bb-poetry-intro p { font-size: clamp(0.929rem, 0.929rem + ((1vw - 0.2rem) * 0.698), 1.4rem) !important; font-weight: 300 !important; color: #2C1A0E !important; } /* Filter pills - match Poetry page style */ body.page-id-3893 .bb-media-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--wp--preset--spacing--50); padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); max-width: 1100px; margin-left: auto; margin-right: auto; } body.page-id-3893 .bb-filter-pill { font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; color: #2C1A0E; border: 1px solid rgba(44,26,14,0.3); border-radius: 20px; padding: 6px 16px; transition: background 0.15s, color 0.15s, border-color 0.15s; cursor: pointer; background: transparent; } body.page-id-3893 .bb-filter-pill:hover { background: rgba(44,26,14,0.07); border-color: rgba(44,26,14,0.5); } body.page-id-3893 .bb-filter-pill.bb-filter-active { background: #111111; color: #f5f1eb; border-color: #111111; } /* Pagination */ body.page-id-3893 .bb-media-pagination { display: flex; align-items: center; gap: 6px; justify-content: center; padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); flex-wrap: wrap; } body.page-id-3893 .bb-page-btn { font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-decoration: none; color: #2C1A0E; border: 1px solid rgba(44,26,14,0.25); border-radius: 6px; padding: 7px 13px; background: transparent; transition: background 0.15s, color 0.15s; } body.page-id-3893 .bb-page-btn:hover { background: rgba(44,26,14,0.07); } body.page-id-3893 .bb-page-btn.bb-page-active { background: #111111; color: #f5f1eb; border-color: #111111; } body.page-id-3893 .bb-page-prev, body.page-id-3893 .bb-page-next { font-size: 0.8rem; padding: 7px 11px; } @media (max-width: 700px) { body.page-id-3893 .bb-media-filters { padding-left: 0; padding-right: 0; } } /* Intro block: sits right under the title, label then lead copy */ body.page-id-3893 .bb-conversations-intro { padding-top: 0 !important; padding-bottom: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); margin-top: 0 !important; position: relative; } /* Full-bleed separator line - breaks out of the alignwide container */ body.page-id-3893 .bb-conversations-intro::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: rgba(17,17,17,0.12); } body.page-id-3893 .bb-section-eyebrow, body.page-id-3891 .bb-section-eyebrow { font-family: Manrope, sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2C1A0E; margin: 0 0 8px 0 !important; } body.page-id-3893 .bb-conversations-lead { font-family: Hauora, sans-serif; font-size: clamp(0.929rem, 0.929rem + ((1vw - 0.2rem) * 0.698), 1.4rem); font-weight: 300; color: #2C1A0E; max-width: 640px; line-height: 1.65; margin: 0; } /* Stream: 2-col grid - equal-height cards via align-items stretch */ body.page-id-3893 .bb-conversations-stream { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--50); align-items: start; padding-bottom: var(--wp--preset--spacing--70); max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); } /* Kill the WordPress block-gap margin that offsets the second card */ body.page-id-3893 .bb-conversations-stream > .bb-media-card { margin-top: 0 !important; } /* Media card shell */ body.page-id-3893 .bb-media-card { background: #ffffff; border: 1px solid rgba(17,17,17,0.12); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease; } body.page-id-3893 .bb-media-card:hover { box-shadow: 0 6px 28px rgba(17,17,17,0.1); transform: translateY(-2px); } /* Thumbnail wrap: relative container for play button overlay */ body.page-id-3893 .bb-media-thumb-wrap { position: relative; margin: 0; overflow: hidden; background: var(--wp--preset--color--accent-5); /* cream - no black bleed */ } /* Video thumbnail: 16:9 */ body.page-id-3893 .bb-media-card--video .bb-media-thumb-wrap { aspect-ratio: 16 / 9; } /* Podcast thumbnail: same height as 16:9 video card */ body.page-id-3893 .bb-media-card--podcast .bb-media-thumb-wrap { aspect-ratio: 16 / 9; } /* Thumbnail image: fills wrap entirely, no gaps */ body.page-id-3893 .bb-media-thumb-img { margin: 0 !important; height: 100%; } /* img tag injected directly by PHP renderer */ body.page-id-3893 .bb-media-thumb-wrap img.bb-media-thumb-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; /* remove inline gap */ transition: transform 0.3s ease; } body.page-id-3893 .bb-media-thumb-wrap:hover img.bb-media-thumb-img { transform: scale(1.03); } /* Play/mic button overlay - centred, injected by JS */ body.page-id-3893 .bb-media-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; z-index: 2; } body.page-id-3893 .bb-media-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; } /* Iframe after click: fills the wrap, no chrome */ body.page-id-3893 .bb-media-iframe { width: 100% !important; display: block; border: none; } /* Video iframe: maintain 16:9 inside aspect-ratio wrap */ body.page-id-3893 .bb-media-card--video .bb-media-playing { height: 100%; } body.page-id-3893 .bb-media-card--video .bb-media-playing .bb-media-iframe { height: 100% !important; position: absolute; top: 0; left: 0; } /* Podcast iframe: taller to show artwork + controls */ body.page-id-3893 .bb-media-card--podcast .bb-media-playing .bb-media-iframe { height: 100% !important; min-height: 232px; } /* Photo card: spans both columns, image left / caption right */ body.page-id-3893 .bb-media-card--photo { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-height: 380px; overflow: hidden; } body.page-id-3893 .bb-media-card--photo .bb-media-thumb-img { grid-column: 1; grid-row: 1; margin: 0 !important; overflow: hidden; height: 380px; } body.page-id-3893 .bb-media-card--photo .bb-media-thumb-img img { width: 100%; height: 380px; object-fit: cover; object-position: center 30%; display: block; } body.page-id-3893 .bb-media-card--photo .bb-media-caption-block { grid-column: 2; grid-row: 1; padding: 36px 36px 36px 40px; justify-content: center; } /* Caption block: inner padding, always left-aligned */ body.page-id-3893 .bb-media-caption-block { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; gap: 6px; text-align: left !important; } /* Override constrained layout auto-margins on heading/paragraph inside caption */ body.page-id-3893 .bb-media-caption-block > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } /* Type · Project label */ body.page-id-3893 .bb-media-label { font-family: Manrope, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2C1A0E; margin: 0 0 6px 0 !important; opacity: 0.7; } /* Title */ body.page-id-3893 .bb-media-title { font-family: Newsreader, serif; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; color: #111111; margin: 0 0 4px 0; text-align: left !important; } /* Meta line */ body.page-id-3893 .bb-media-meta { font-family: Manrope, sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2C1A0E; margin: 0; opacity: 0.7; text-align: left !important; } /* Description */ body.page-id-3893 .bb-media-description { font-family: Hauora, sans-serif; font-size: 0.9rem; font-weight: 300; line-height: 1.6; color: #2C1A0E; margin: 4px 0 0; text-align: left !important; } /* ============================================================ Notes page (ID 3895) - intro block ============================================================ */ body.page-id-3895 .bb-notes-intro { padding-top: 0 !important; padding-bottom: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); margin-top: 0 !important; position: relative; } body.page-id-3895 .bb-notes-intro::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: rgba(17,17,17,0.12); } body.page-id-3895 .bb-section-eyebrow { font-family: Manrope, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2C1A0E; margin-bottom: 10px; } body.page-id-3895 .bb-notes-lead { font-size: 1rem; font-weight: 300; font-style: italic; line-height: 1.6; color: #2C1A0E; max-width: 560px; margin: 0; } body.page-id-3895 .bb-notes-board-wrap { background: transparent; padding-top: var(--wp--preset--spacing--40) !important; } /* Mobile: single column */ @media (max-width: 700px) { body.page-id-3893 .bb-conversations-stream { grid-template-columns: 1fr !important; } body.page-id-3893 .bb-media-card:hover { transform: none; box-shadow: none; } /* Photo card: stack vertically on mobile */ body.page-id-3893 .bb-media-card--photo { grid-column: span 1 !important; grid-template-columns: 1fr !important; } body.page-id-3893 .bb-media-card--photo .bb-media-thumb-img, body.page-id-3893 .bb-media-card--photo .bb-media-caption-block { grid-column: 1 !important; grid-row: auto !important; } body.page-id-3893 .bb-media-card--photo .bb-media-caption-block { padding: 20px 24px 24px !important; } body.page-id-3893 .bb-media-card--podcast .bb-media-thumb-wrap { max-height: 200px; } } /* ============================================================ Notes single post template ============================================================ */ /* Featured image hero */ .bb-notes-hero { margin: 0 0 var(--wp--preset--spacing--50); padding: 0; max-width: 100%; line-height: 0; } .bb-notes-hero-img { width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: center top; border-radius: 6px; display: block; } /* Event meta bar - with poster: two-column flex */ .bb-event-meta--has-poster { align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-left: none; border-radius: 4px; border: 1px solid rgba(44,26,14,0.15); } .bb-event-meta--has-poster .bb-event-info { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 24px; background: #fdf5e8; border-left: 3px solid #2C1A0E; flex: 1; } .bb-event-poster { width: 180px; flex-shrink: 0; overflow: hidden; background: #1a1612; } .bb-event-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Eyebrow label injected via the_content filter */ .bb-notes-eyebrow { font-family: Manrope, sans-serif !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #2C1A0E !important; opacity: 0.5; margin: 0 0 18px !important; } /* Notes single header - title sizing */ .bb-notes-single .bb-notes-single-header .wp-block-post-title { font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important; } /* Meta row - date · category */ .bb-notes-single-meta { gap: 16px; } .bb-notes-single-meta .wp-block-post-date, .bb-notes-single-meta .bb-notes-single-cat { font-family: Manrope, sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2C1A0E; opacity: 0.55; } .bb-notes-single-meta .bb-notes-single-cat a { color: inherit; text-decoration: none; } /* Jottings + Invitations - compact heading */ body.is-notes-jotting .bb-notes-single-header .wp-block-post-title, body.is-notes-invitation .bb-notes-single-header .wp-block-post-title { font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important; font-weight: 400 !important; } body.is-notes-jotting .bb-notes-single .wp-block-post-content, body.is-notes-invitation .bb-notes-single .wp-block-post-content { font-size: 0.95rem; max-width: 560px; } /* Event Dispatch - event meta block */ .bb-event-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; margin: 0 0 32px; padding: 18px 20px; background: #fdf5e8; border-left: 3px solid #2C1A0E; border-radius: 0 2px 2px 0; } .bb-event-date, .bb-event-location { font-family: Manrope, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2C1A0E; } .bb-event-date::before { content: '◊ '; opacity: 0.5; } .bb-event-location::before { content: '○ '; opacity: 0.5; } .bb-event-link { font-family: Manrope, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #2C1A0E; text-decoration: none; margin-left: auto; opacity: 0.75; } .bb-event-link:hover { opacity: 1; } /* Regular posts tagged as Notes - small eyebrow via .bb-notes-eyebrow (injected by the_content filter on is-notes-single body class) Suppressed on shelf posts which have their own hero layout */ body.is-notes-single:not(.is-shelf-post) .entry-content > .bb-notes-eyebrow:first-child { margin-bottom: 24px; } body.is-shelf-post .bb-notes-eyebrow { display: none !important; } /* ── Notes single: mobile + tablet responsive ─────────────────────────────── */ /* Tablet (≤ 900px): poster column narrows */ @media (max-width: 900px) { .bb-event-poster { width: 140px; } .bb-notes-hero-img { max-height: 380px; } } /* Mobile (≤ 600px): poster bar collapses to vertical stack */ @media (max-width: 600px) { /* Event meta bar - stack info above poster image */ .bb-event-meta, .bb-event-meta--has-poster { flex-direction: column !important; padding: 0 !important; gap: 0 !important; border-left: none !important; border-radius: 4px !important; border: 1px solid rgba(44,26,14,0.15) !important; overflow: hidden; } .bb-event-meta--has-poster .bb-event-info { border-left: 3px solid #2C1A0E; padding: 16px 18px !important; flex: none; width: auto; } .bb-event-poster { width: 100% !important; flex-shrink: 1; max-height: 180px; } .bb-event-poster-img { width: 100%; height: 180px; object-fit: cover; } /* Hero image - tighter on mobile */ .bb-notes-hero-img { max-height: 260px; border-radius: 4px; } /* Jotting/invitation compact heading already handled by body class */ /* Share/support bar - already covered by shared .bb-post-footer rule */ } /* ============================================================ Poetry single post template (single-poetry.html, DB 4232) ============================================================ */ /* Eyebrow */ .bb-poetry-eyebrow { opacity: 0.5; } /* Header title - slightly smaller than essays, fits narrow column */ .bb-poetry-single-header .wp-block-post-title { font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important; } /* Meta row */ .bb-poetry-single-meta { gap: 16px; } .bb-poetry-single-meta .wp-block-post-date, .bb-poetry-single-meta .bb-poetry-single-cat { font-family: Manrope, sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2C1A0E; opacity: 0.55; } .bb-poetry-single-meta .bb-poetry-single-cat a { color: inherit; text-decoration: none; } /* Content column - 560px cap keeps verse intimate */ .bb-poetry-single-content { --wp--style--global--content-size: 560px !important; } /* Extend matte-paper treatment to new template (existing rules target .entry-content; this mirrors them) */ body.is-single-poetry .bb-poetry-single-content.wp-block-post-content { position: relative; background: #f5f1eb !important; border-color: transparent !important; border-radius: 14px; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) !important; box-shadow: 0 2px 8px rgba(44,26,14,0.06), 0 8px 32px rgba(44,26,14,0.04), 0 1px 0 rgba(255,255,255,0.7) inset; } body.is-single-poetry .bb-poetry-single-content.wp-block-post-content::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.28; mix-blend-mode: soft-light; pointer-events: none; z-index: 1; } body.is-single-poetry .bb-poetry-single-content.wp-block-post-content > * { position: relative; z-index: 2; } /* Mobile */ @media (max-width: 600px) { .bb-poetry-single-header .wp-block-post-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; } body.is-single-poetry .bb-poetry-single-content.wp-block-post-content { border-radius: 10px; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important; } } /* ── Poetry single: layout overrides on the essay template ────────────────── The DB single template (ID 3913) is shared. These rules scope to body.is-single-poetry. The essay template has a 36/64 two-column layout (image left / content right) - poetry inherits that when a featured image is set. Without an image the left column collapses naturally and verse sits in the full-width right column. ---------------------------------------------------- */ /* Featured image: show it (essay layout, image left) - override the old hide */ body.is-single-poetry .wp-block-post-featured-image { display: block !important; } /* Rounded corners on the image to match essay style */ body.is-single-poetry .wp-block-post-featured-image img { border-radius: 6px; } /* Title: smaller than the 60px essay heading - poetry titles read better lighter */ body.is-single-poetry .wp-block-post-title { font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important; font-weight: 400 !important; line-height: 1.2 !important; } /* Hide comments form */ body.is-single-poetry .wp-block-comments { display: none !important; } /* Eyebrow: injected via the_content filter */ .bb-poetry-eyebrow { opacity: 0.5; } /* Mobile: stack image above content */ @media (max-width: 700px) { body.is-single-poetry .wp-block-post-featured-image img { max-height: 260px; object-fit: cover; width: 100%; } } /* ============================================================ Concepts single post Category ID 790299371 - top-level, separate from Notes. Uses single-notes.html template via bb_is_notes_post(). Body class: is-notes-single is-notes-concept ============================================================ */ /* Eyebrow: slightly warmer / more prominent than a plain Note */ body.is-notes-concept .bb-notes-eyebrow { opacity: 0.75; letter-spacing: 0.2em !important; } /* Left accent rule on the content area - signals intellectual register */ body.is-notes-concept .wp-block-post-content { border-left: 2px solid rgba(44,26,14,0.18); padding-left: var(--wp--preset--spacing--50); margin-left: 0; } /* Hide comments - Concepts are not discussion threads */ body.is-notes-concept .wp-block-comments { display: none !important; } /* "A place to begin" further-reading link */ body.is-notes-concept .bb-concept-further { color: rgba(44,26,14,0.75) !important; font-weight: 400 !important; } body.is-notes-concept .bb-concept-further a { color: rgba(44,26,14,0.75) !important; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.15s; } body.is-notes-concept .bb-concept-further a:hover { color: rgba(44,26,14,1) !important; } /* Remove the accent on mobile where horizontal space is tight */ @media (max-width: 600px) { body.is-notes-concept .wp-block-post-content { border-left: none; padding-left: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ FROM THE SHELF — 3D book card + two-column layout ═══════════════════════════════════════════════════════════════════════════ */ /* Section wrapper — warm cream background, full bleed via parent group */ .bb-home-shelf { background-color: #f0ece4 !important; } /* Section is full-width (edge-to-edge, matches Notes/Enquiries) and holds two INDEPENDENT children — .bb-shelf-header and .bb-shelf-row-wrap. They are separate boxes, not one shared wrapper, so each can be positioned/resized without affecting the other. */ /* No top/bottom padding here — .bb-home-shelf (the outer group) already provides that padding, same as .bb-home-fieldnotes does for "Notes". Adding padding here on top of the group's own padding was doubling the gap above the title compared to Notes. */ .bb-shelf-section { padding: 0; } /* Header: title + description, flush left — matches "Notes" above/below it */ .bb-shelf-header { margin-bottom: var(--wp--preset--spacing--30); } .bb-shelf-section-title { font-weight: 500; font-style: normal; margin: 0 0 var(--wp--preset--spacing--20); } .bb-shelf-section-sub { font-weight: 300; font-style: normal; margin: 0; } /* Row wrap: centers the fixed-width book+text row on wide screens so it doesn't stretch into an empty void — independent of the header above, which stays flush left. Nudged right + down from the header so the book mockup doesn't crowd the section title/description directly above it. */ .bb-shelf-row-wrap { box-sizing: border-box; max-width: 1040px; margin: var(--wp--preset--spacing--50) auto 0; padding-left: clamp(3rem, 16vw, 11rem); } /* Two-column row: book left, text right. Fixed widths so it never stretches. */ .bb-shelf-inner { display: grid; grid-template-columns: 260px minmax(300px, 620px); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .bb-shelf-book-col { display: flex; flex-direction: column; align-items: flex-start; /* Nudges the book down slightly so its top edge lines up with the "Poetics of Relation" title baseline in the text column beside it, instead of sitting a bit higher due to center-alignment in the grid. */ margin-top: 26px; } /* ── 3D Book ─────────────────────────────────────────────────────────────── */ .bb-shelf-book-wrap { display: flex; flex-direction: column; align-items: center; perspective: 900px; } .bb-shelf-book { position: relative; width: 210px; height: 322px; transform-style: preserve-3d; transform: rotateY(-22deg); transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .bb-shelf-book:hover { transform: rotateY(-5deg); } /* Front cover */ .bb-shelf-cover { position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; overflow: hidden; background: #e8e0d5; box-shadow: 3px 3px 8px rgba(0,0,0,0.20), 6px 6px 20px rgba(0,0,0,0.16), 12px 12px 40px rgba(0,0,0,0.10); z-index: 2; } .bb-shelf-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .bb-shelf-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; background: #f5f1eb; font-family: var(--wp--preset--font-family--newsreader), serif; font-size: 0.85rem; color: #2C1A0E; text-align: center; line-height: 1.4; } /* Light sheen across cover */ .bb-shelf-cover-sheen { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.06) 100% ); pointer-events: none; z-index: 3; } /* Spine — left edge */ .bb-shelf-spine { position: absolute; top: 2px; left: -23px; bottom: 2px; width: 23px; background: linear-gradient(to right, #0f0d0b, #2e1e16, #3a2820); border-radius: 2px 0 0 2px; transform-origin: right center; transform: rotateY(90deg) translateZ(-14px); box-shadow: inset -4px 0 8px rgba(0,0,0,0.5); z-index: 1; } /* Page stack — right edge */ .bb-shelf-pages { position: absolute; top: 3px; right: -12px; bottom: 3px; width: 12px; background: repeating-linear-gradient( to bottom, #ede8e0 0px, #ede8e0 1px, #d8d0c4 1px, #d8d0c4 2px ); border-radius: 0 2px 2px 0; transform-origin: left center; transform: rotateY(-90deg) translateZ(-7px); z-index: 1; } /* Drop shadow on surface */ .bb-shelf-shadow { width: 198px; height: 18px; background: radial-gradient(ellipse, rgba(0,0,0,0.28) 0%, transparent 70%); margin-top: 16px; border-radius: 50%; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .bb-shelf-book-wrap:hover .bb-shelf-shadow { transform: scaleX(0.85) translateX(12px); } /* ── Text panel (right) ──────────────────────────────────────────────────── */ .bb-shelf-text { display: flex; flex-direction: column; gap: 0; } .bb-shelf-book-title { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.3px; color: #111111; margin: 0 0 6px; } .bb-shelf-book-author { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: #2C1A0E; opacity: 0.6; margin: 0 0 24px; } .bb-shelf-rule { width: 40px; height: 1px; background: rgba(44, 26, 14, 0.3); margin-bottom: 20px; } .bb-shelf-post-label { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #2C1A0E; opacity: 0.4; margin-bottom: 6px; } .bb-shelf-post-title { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 400; font-style: italic; line-height: 1.35; color: #2C1A0E; margin: 0 0 12px; } .bb-shelf-excerpt { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: clamp(1rem, 1.4vw, 1.1rem); font-style: normal; font-weight: 400; line-height: 1.75; color: #2C1A0E; opacity: 1; margin: 0 0 28px; max-width: 55ch; } /* Link color — brown (matches site's sitewide ink color) instead of near-black */ .bb-shelf-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2C1A0E; text-decoration: none; border-bottom: 1px solid rgba(44,26,14,0.35); padding-bottom: 2px; transition: border-color 0.2s, color 0.2s; } .bb-shelf-cta:hover { color: #1a0f08; border-color: #1a0f08; } .bb-shelf-cta svg { transition: transform 0.2s; } .bb-shelf-cta:hover svg { transform: translateX(3px); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .bb-shelf-section-title, .bb-shelf-section-sub { margin-left: 0; } .bb-shelf-row-wrap { padding-left: 0; margin-top: var(--wp--preset--spacing--40); } .bb-shelf-inner { grid-template-columns: 180px 1fr; gap: var(--wp--preset--spacing--40); align-items: center; } .bb-shelf-book-col { align-items: flex-start; } .bb-shelf-book { width: 180px; height: 275px; } .bb-shelf-shadow { width: 165px; } .bb-shelf-book-title { font-size: clamp(1.4rem, 3.5vw, 1.9rem); } } @media (max-width: 600px) { .bb-shelf-inner { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); } /* On mobile: labels centre above the book */ .bb-shelf-book-col { align-items: center; width: 100%; } .bb-shelf-section-title, .bb-shelf-section-sub { text-align: center; } .bb-shelf-section-sub { margin-bottom: var(--wp--preset--spacing--30); } .bb-shelf-book-wrap { align-items: center; } .bb-shelf-book { width: 160px; height: 245px; transform: rotateY(-14deg); } .bb-shelf-book:hover { transform: rotateY(-4deg); } .bb-shelf-shadow { width: 148px; } .bb-shelf-book-title { font-size: clamp(1.5rem, 6vw, 2rem); } } /* ── From the Shelf — single post hero book mockup ───────────────────────── */ /* Hero zone — warm paper background, visually distinct from page white */ .bb-shelf-single-hero { background-color: #ede8df !important; } /* Row layout: book left, meta text right and top-aligned */ .bb-shelf-hero-wrap { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: clamp(40px, 6vw, 80px); padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40); background: transparent; } /* Suppress the auto-injected category label in post content on shelf posts */ body.is-shelf-post .bb-card-label, body.is-shelf-post .wp-block-post-terms.bb-card-label { display: none !important; } .bb-shelf-hero-book-wrap { display: flex; flex-direction: column; align-items: center; perspective: 1000px; flex-shrink: 0; } .bb-shelf-hero-book { width: 220px !important; height: 330px !important; transform: rotateY(-20deg) !important; } .bb-shelf-hero-book:hover { transform: rotateY(-5deg) !important; } /* Meta: left-aligned, nudged up to sit near top of book */ .bb-shelf-hero-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 0; padding-top: 8px; text-align: left; max-width: 240px; } .bb-shelf-hero-label { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #2C1A0E; opacity: 0.45; margin-bottom: 4px; } .bb-shelf-hero-booktitle { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 300; color: #111111; line-height: 1.2; } .bb-shelf-hero-bookauthor { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: #2C1A0E; opacity: 0.55; } /* Tablet: slightly tighter gap */ @media (max-width: 900px) { .bb-shelf-hero-wrap { gap: 36px; } .bb-shelf-hero-meta { margin-top: 12px; } } /* Mobile: revert to column, centred */ @media (max-width: 600px) { .bb-shelf-hero-wrap { flex-direction: column; align-items: center; gap: 24px; } .bb-shelf-hero-meta { align-items: center; text-align: center; margin-top: 0; max-width: 100%; } .bb-shelf-hero-book { width: 160px !important; height: 245px !important; } } /* ═══════════════════════════════════════════════════════════════ RELATED POSTS - end-of-article, light/airy (not a full card grid) ═══════════════════════════════════════════════════════════════ */ .bb-related-posts { max-width: 700px; } .bb-related-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #2C1A0E; opacity: 0.55; margin: 0 0 var(--wp--preset--spacing--30); } .bb-related-grid { display: flex; flex-direction: column; } .bb-related-card { display: flex; flex-direction: column; gap: 4px; padding: var(--wp--preset--spacing--30) 0; border-top: 1px solid rgba(17,17,17,0.1); text-decoration: none; transition: padding-left 0.15s ease; } .bb-related-grid .bb-related-card:last-child { border-bottom: 1px solid rgba(17,17,17,0.1); } .bb-related-card:hover { padding-left: 8px; } .bb-related-card-label { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #686868; } .bb-related-card-title { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: 1.05rem; font-weight: 400; color: #111111; line-height: 1.4; } .bb-related-card-date { font-family: var(--wp--preset--font-family--manrope), sans-serif; font-size: 0.72rem; font-weight: 400; color: #686868; opacity: 0.75; } @media (max-width: 600px) { .bb-related-card-title { font-size: 0.95rem; } } /* ── Essay provenance note + restyled footnotes ─────────────────────────── */ .bb-essay-provenance { font-family: var(--wp--preset--font-family--newsreader), serif; font-style: italic; font-size: 0.97rem; line-height: 1.6; color: #5c4c3f; margin: 0.9em 0 0; max-width: 42em; } .bb-essay-provenance__mark { color: #7e8f84; font-style: normal; margin-right: 0.35em; } /* Porous-dot divider before the Notes section — the doorway's dissolving edge, laid flat. Only appears when footnotes are present. */ .bb-notes-divider { display: flex; gap: 8px; margin: 2.75em 0 1.4em; } .bb-notes-divider span { width: 6px; height: 6px; background: #7e8f84; display: inline-block; } .bb-notes-label { font-family: var(--wp--preset--font-family--hauora), sans-serif !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: #686868 !important; margin: 0 0 1em !important; } /* Inline footnote markers — WordPress core's own N, recoloured only; the numbering/insertion mechanism is untouched. */ .wp-block-post-content sup a[id$="-link"] { color: #7e8f84; font-weight: 600; text-decoration: none; } .wp-block-post-content sup a[id$="-link"]:hover { text-decoration: underline; } /* The footnotes list itself */ .wp-block-post-content .wp-block-footnotes { font-family: var(--wp--preset--font-family--newsreader), serif; font-size: 0.95rem; line-height: 1.6; color: #2c1a0e; padding-left: 1.4em; } .wp-block-post-content .wp-block-footnotes li { margin-bottom: 0.85em; padding-left: 0.3em; } .wp-block-post-content .wp-block-footnotes li::marker { font-family: var(--wp--preset--font-family--hauora), sans-serif; font-size: 0.8rem; font-weight: 600; color: #6e8074; } .wp-block-post-content .wp-block-footnotes li a { color: #686868; text-decoration: none; margin-left: 0.3em; } /* Site-wide focus outline — suppress the browser's default ring on mouse clicks (which reads as a stray box border), keep a visible on-brand one for real keyboard navigation so accessibility isn't lost. */ a:focus, button:focus, .wp-element-button:focus, input:focus, textarea:focus { outline: none; } a:focus-visible, button:focus-visible, .wp-element-button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #7e8f84; outline-offset: 2px; }