/* ========================================================================== Journal post styling — Think Outside Gardens Location: /your-theme/css/journal-post.css Applies to single Journal posts only. NOTE ON SELECTORS The wrapper below assumes your theme outputs `.single-post` on and `.entry-content` around the post body. If your theme differs, inspect the post and swap those two selectors — everything else is scoped inside them. ========================================================================== */ .single-post { --tog-ink: #1c1c19; --tog-ink-soft: #3a3a34; --tog-body: #4a4a44; --tog-muted: #8a8a80; --tog-accent: #45543a; --tog-panel: #faf9f5; --tog-rule: #e4e2da; } /* ---------- Breadcrumb ---------- */ .single-post .tog-breadcrumb { max-width: 740px; margin: 0 auto 2rem; padding: 0 24px; font-family: 'Public Sans', system-ui, -apple-system, sans-serif; font-size: 0.8rem; } .single-post .tog-breadcrumb a { color: var(--tog-muted); text-decoration: none; } .single-post .tog-breadcrumb a:hover { color: var(--tog-accent); } .single-post .tog-breadcrumb__sep { margin: 0 6px; color: var(--tog-rule); } .single-post .tog-breadcrumb__current { color: var(--tog-ink-soft); } /* ---------- Content column ---------- */ .single-post .entry-content { max-width: 740px; margin: 0 auto; padding: 0 24px; font-family: 'Public Sans', system-ui, -apple-system, sans-serif; color: var(--tog-ink); } /* ---------- Post title ---------- */ .single-post .entry-title, .single-post h1.entry-title { font-family: 'Jost', system-ui, sans-serif; font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; } .post-heading{ max-width: 750px; margin: auto; } /* ---------- Meta eyebrow: category + reading time ---------- */ .single-post .entry-meta { font-family: 'Jost', system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin: 0 0 10px!important; } .single-post .entry-meta__category { color: var(--tog-accent); } .single-post .entry-meta__time { color: var(--tog-muted); } .single-post .entry-meta__sep { margin: 0 6px; } /* ---------- Excerpt ---------- */ .single-post .entry-excerpt { max-width: 740px; margin: 0 auto 20px; padding: 0 24px; font-size: 1.08rem; line-height: 1.7; color: var(--tog-body); } /* ---------- Body copy ---------- */ .single-post .entry-content p { font-size: 1rem; line-height: 1.8; color: var(--tog-ink-soft); margin: 0 0 22px; } /* Lead paragraph — the intro before the first image */ .single-post .entry-content > p:first-of-type { font-size: 1.08rem; line-height: 1.7; color: var(--tog-body); margin-bottom: 34px; } /* Paragraph-fallback TOC anchors (h2-less posts) — stops the sticky header covering the target, same as the h2 scroll-margin below. */ .single-post .entry-content > p[id] { scroll-margin-top: 90px; } /* ---------- Section headings ---------- */ .single-post .entry-content h2 { font-family: 'Jost', system-ui, sans-serif; font-size: 1.4rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.01em; color: var(--tog-ink); margin: 44px 0 16px; padding-top: 4px; scroll-margin-top: 90px; /* stops sticky headers covering the anchor */ } /* The "01 |" prefix picks up the accent colour automatically */ .single-post .entry-content h2 .tog-num { color: var(--tog-accent); font-weight: 500; margin-right: 2px; } .single-post .entry-content h3 { font-family: 'Jost', system-ui, sans-serif; font-size: 1.05rem; font-weight: 600; margin: 12px 0 12px; } /* ---------- Images ---------- */ .single-post .entry-content img { display: block; width: 100%; height: auto; border-radius: 4px; margin: 0 auto; } .single-post .entry-content a:has(img), .single-post .entry-content p:has(img) { display: block; margin: 36px 0 8px; } /* Portrait project shots — cap the height so they don't dominate the scroll */ .single-post .entry-content img.size-large { max-height: 620px; object-fit: cover; object-position: center; } /* First image after the intro reads as the hero — full bleed of the column */ .single-post .entry-content > a:first-of-type img, .single-post .entry-content > p:first-of-type + a img { max-height: 540px; } .single-post .entry-content img:hover { opacity: 0.94; transition: opacity 0.2s ease; } /* WP alignment classes */ .single-post .entry-content .alignnone { margin-left: 0; margin-right: 0; } .single-post .entry-content .aligncenter { margin-left: auto; margin-right: auto; } /* Captions */ .single-post .entry-content .wp-caption-text { font-size: 0.78rem; color: var(--tog-muted); font-style: italic; margin: 8px 0 0; } /* ---------- Links ---------- */ .single-post .entry-content a { color: var(--tog-accent); text-decoration: none; } .single-post .entry-content a:hover { text-decoration: underline; } .single-post .entry-content a:has(img):hover { text-decoration: none; } /* ---------- Blockquote / pull quote ---------- */ .single-post .entry-content blockquote { border-left: 3px solid var(--tog-accent); padding: 4px 0 4px 20px; margin: 30px 0; } .single-post .entry-content blockquote p { font-size: 1.05rem; line-height: 1.65; color: #2e3826; font-style: italic; margin: 0; } /* ---------- Lists ---------- */ .single-post .entry-content ul, .single-post .entry-content ol { margin: 0 0 22px; padding-left: 22px; } .single-post .entry-content li { font-size: 1rem; line-height: 1.75; color: var(--tog-ink-soft); margin-bottom: 8px; } /* ========================================================================== Post FAQs — accordion under the post body, toggled by journal-post.js ========================================================================== */ .single-post .tog-faq { max-width: 740px; margin: 56px auto 0; } .single-post .tog-faq__heading { font-family: 'Jost', system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--tog-ink); margin: 0 0 20px; } .single-post .tog-faq__list { border-top: 1px solid var(--tog-rule); } .single-post .tog-faq__item { border-bottom: 1px solid var(--tog-rule); } .single-post .tog-faq__q-heading { margin: 0; } .single-post .tog-faq__trigger { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 18px 0; background: none; border: none; text-align: left; font-family: 'Jost', system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: var(--tog-ink); cursor: pointer; } .single-post .tog-faq__trigger:hover { color: var(--tog-accent); } /* Plus/minus marker built from two bars — the vertical one hides and rotates away when the panel opens, leaving just the minus. */ .single-post .tog-faq__marker { position: relative; flex: 0 0 auto; width: 14px; height: 14px; } .single-post .tog-faq__marker::before, .single-post .tog-faq__marker::after { content: ''; position: absolute; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .single-post .tog-faq__marker::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .single-post .tog-faq__marker::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .single-post .tog-faq__trigger[aria-expanded="true"] .tog-faq__marker::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } .single-post .tog-faq__panel { padding: 0 0 22px; font-size: 0.95rem; line-height: 1.75; color: var(--tog-ink-soft); } .single-post .tog-faq__panel p { margin: 0 0 14px; } .single-post .tog-faq__panel p:last-child { margin-bottom: 0; } /* ========================================================================== Table of contents — injected by journal-post.js ========================================================================== */ .entry-content table{ margin-bottom: 1.5rem; } .tog-toc { display: none; /* shown at desktop widths only */ } .tog-toc__label { font-family: 'Jost', system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tog-muted); font-weight: 600; margin: 0 0 14px; } .tog-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .tog-toc__list a { font-size: 0.82rem; line-height: 1.4; color: #5a5a52; text-decoration: none; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; display: block; transition: color 0.15s ease, border-color 0.15s ease; } .tog-toc__list a:hover { color: var(--tog-accent); } /* Sub-heading entries (h3-h6) step in from the h2 baseline */ .tog-toc__list a[data-level="3"] { padding-left: 22px; } .tog-toc__list a[data-level="4"] { padding-left: 34px; font-size: 0.78rem; } .tog-toc__list a[data-level="5"] { padding-left: 46px; font-size: 0.78rem; } .tog-toc__list a[data-level="6"] { padding-left: 58px; font-size: 0.78rem; } .tog-toc__list a.is-active { color: var(--tog-accent); border-left-color: var(--tog-accent); font-weight: 600; } /* Two-column layout once there's room for the TOC */ @media (min-width: 1100px) { .tog-layout { display: grid; grid-template-columns: 210px minmax(0, 740px); gap: 64px; max-width: 1080px; margin: 0 auto; padding: 0 24px; align-items: start; } .tog-layout .entry-content { max-width: none; margin: 0; padding: 0; } .tog-toc { display: block; position: sticky; top: 200px; } /* Title sits outside .tog-layout — line its left edge up with the content column (sidebar width + gap + container padding) instead of the independently-centered 740px box it uses below 1100px. */ .single-post .entry-title, .single-post .tog-breadcrumb, .single-post .entry-excerpt, .single-post .tog-faq { max-width: 1080px; } } /* ========================================================================== CTA block — injected by journal-post.js ========================================================================== */ .tog-cta { background: var(--tog-ink); padding: 56px 32px; text-align: center; margin: 72px 0 0; } .tog-cta__heading { font-family: 'Jost', system-ui, sans-serif; font-size: 1.4rem; color: #fff; font-weight: 600; margin: 0 0 12px; } .tog-cta__text { font-size: 0.95rem; line-height: 1.6; color: #c9c9c0; max-width: 460px; margin: 0 auto 26px; } .tog-cta__button { display: inline-block; border: 1px solid #fff; color: #fff !important; padding: 14px 30px; font-family: 'Jost', system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease; } .tog-cta__button:hover { background: #fff; color: var(--tog-ink) !important; } .post-featured-img{ margin: 1rem 0 2rem; } .post-featured-img img{ border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 640px) { .single-post .entry-content { padding: 0 20px; } .single-post .entry-title { padding: 0 20px; font-size: 1.5rem; } .single-post .entry-content h2 { font-size: 1.15rem; margin-top: 34px; } .single-post .entry-content img.size-large { max-height: 460px; } .tog-cta { padding: 40px 20px; margin-top: 48px; } .tog-cta__heading { font-size: 1.15rem; } } @media (prefers-reduced-motion: reduce) { .single-post .entry-content img, .tog-toc__list a, .tog-cta__button { transition: none !important; } }