/* ============================================================================ Orbit Computer Solutions — single blog post template (GeneratePress) Styles WordPress's native single post into the Orbit article design: a dark hero, a sticky table of contents, editorial body type, an author card and inline CTA bands. No per-post editing. LOAD: in the after styles.css (it uses its variables). Scoped to .single-post so nothing else is affected. PAIRS WITH blog-post.js. ============================================================================ */ /* let single posts use the full width so the TOC sidebar fits */ .single-post .site-main, .single-post .inside-article{max-width:none} .single-post .inside-article{padding:0;background:transparent} .single-post .entry-header{display:none} /* the JS hero replaces the title */ /* featured image hidden ON the post itself; it stays attached, so it still shows on the blog cards */ .single-post .post-image, .single-post .page-header-image, .single-post .page-header-image-single, .single-post .featured-image{display:none} .single-post footer.entry-meta{display:none} /* category already shown in the hero */ .single-post .comments-area{display:none} /* no comment box on posts */ /* readable column by default (posts with no TOC); the .guide controls width when a TOC exists */ .single-post .entry-content{max-width:760px;margin-inline:auto;padding-block:clamp(44px,6vw,66px)} .single-post .entry-content :is(h2,h3){scroll-margin-top:100px} /* ---- post hero (full-bleed dark band) ---- */ html:has(.ocs-post-hero){overflow-x:clip} .ocs-post-hero{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:0} .ocs-post-hero .pagehero__inner{max-width:780px} .ocs-post-hero .crumb a{color:#9db8cc} .ocs-post-hero .crumb a:hover{color:#fff} .ocs-hero-meta{display:flex;flex-wrap:wrap;align-items:center;margin:8px 0 0;font-size:.92rem;color:#a9c4ba} .ocs-hero-meta span:not(:last-child)::after{content:"·";margin:0 .6rem;color:#6f8a7f} /* ---- guide: content + sticky TOC sidebar ---- */ .single-post .guide{ display:grid;grid-template-columns:1fr 250px;gap:clamp(30px,5vw,64px); align-items:start;max-width:1080px;margin-inline:auto;padding-block:clamp(40px,6vw,72px); } .single-post .guide .entry-content{order:-1;max-width:none;margin:0;padding-block:0} /* content left, TOC right; .guide provides the spacing */ .toc{position:sticky;top:100px} .toc h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);margin:0 0 14px} .toc ol{list-style:none;counter-reset:toc;margin:0;padding:0} .toc > ol > li{counter-increment:toc;margin:0} .toc > ol > li > a{position:relative;display:block;padding:.45em .4em .45em 2.3em;font-size:.92rem;font-weight:600;color:var(--slate);border-left:2px solid var(--line);transition:color .2s,border-color .2s,background .2s} .toc > ol > li > a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:.6em;top:.5em;font-size:.72rem;color:var(--slate-2);font-weight:700} .toc a:hover{color:var(--green)} .toc a.active{color:var(--green);border-left-color:var(--green);background:var(--tint)} .toc .toc-subs{list-style:none;margin:.15em 0 .5em;padding:0} .toc .toc-subs a{display:block;padding:.32em .5em .32em 2.3em;font-size:.85rem;color:var(--slate-2);border-left:2px solid transparent} .toc .toc-subs a:hover,.toc .toc-subs a.active{color:var(--green);border-left-color:var(--green)} /* ---- editorial body type (mirrors .article__body) ---- */ .single-post .entry-content{font-size:1.06rem;line-height:1.75;color:var(--slate)} .single-post .entry-content > h2{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.7rem;line-height:1.2;margin:46px 0 16px} .single-post .entry-content > h2:first-child{margin-top:0} .single-post .entry-content h3{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:1.3rem;margin:34px 0 12px} .single-post .entry-content p{margin:0 0 1.3em} .single-post .entry-content ul,.single-post .entry-content ol{margin:0 0 1.4em;padding-left:1.3em} .single-post .entry-content li{margin-bottom:.5em;padding-left:.3em} .single-post .entry-content li::marker{color:var(--emerald)} .single-post .entry-content strong{color:var(--ink)} .single-post .entry-content a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)} .single-post .entry-content a:hover{text-decoration-color:var(--green)} .single-post .entry-content blockquote{margin:30px 0;padding:6px 0 6px 26px;border-left:3px solid var(--emerald);font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--ink)} .single-post .entry-content img{border-radius:var(--r);margin:24px 0;height:auto} /* ---- inline CTA bands (pairs with blog-post.js) ---- */ .ocs-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:42px 0;padding:26px 30px;border-radius:var(--r);background:var(--pine);color:#fff} .ocs-inline-cta__txt{display:flex;flex-direction:column;gap:5px} .ocs-inline-cta__txt strong{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.2;color:#fff !important} .ocs-inline-cta__txt span{color:#a9c4ba;font-size:.98rem;line-height:1.45} .ocs-inline-cta .button{white-space:nowrap;flex-shrink:0} @media (max-width:600px){.ocs-inline-cta{flex-direction:column;align-items:flex-start;padding:22px}} /* ---- author card at the end ---- */ .ocs-author{display:flex;gap:20px;align-items:center;margin:50px 0 0;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--tint)} .ocs-author__mark{width:54px;height:54px;flex:none} .ocs-author__name{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--ink);display:block} .ocs-author__role{font-size:.85rem;color:var(--slate-2);display:block;margin-bottom:8px} .ocs-author p{margin:0;font-size:.97rem;color:var(--slate)} .ocs-author p a{color:var(--green);font-weight:600} /* ---- mobile: TOC becomes a compact card on top ---- */ @media (max-width:980px){ .single-post .guide{grid-template-columns:1fr;gap:0} .single-post .guide .entry-content{order:0} .toc{position:static;order:-1;margin:0 0 30px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--tint)} .toc .toc-subs{display:none} }