/* ========================================================= High 5 Over 55 — BLOG POST STYLESHEET Loaded ONLY on single blog post templates. All selectors are scoped under body.single-post so they can never leak onto the homepage, pages, or archives — this is the class WordPress adds automatically to on single post views via body_class(). ========================================================= */ body.single-post{ margin:0; background:var(--cream3); color:var(--ink); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased; } body.single-post .et_pb_section{ background-color: var(--cream3, #ffffff) !important; } body.single-post .et_pb_section .et_pb_section{ background-color: var(--cream3, #ffffff) !important; } /* ===== Post header ===== */ body.single-post .post-head { background: radial-gradient(ellipse at 15% 0%, rgba(91,175,116,.14), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(217,119,85,.14), transparent 50%), linear-gradient(180deg, var(--cream), var(--cream3)); padding:52px 0 0; } body.single-post .breadcrumb { color:var(--ink-soft);font-size:13px;letter-spacing:.04em;margin-bottom:18px; } body.single-post .breadcrumb a {color:var(--ink-soft);text-decoration:none;} body.single-post .breadcrumb .sep {margin:0 6px;opacity:.5;} body.single-post .breadcrumb .current {color:var(--terra3);} body.single-post h1.title { font-family:var(--serif); color:var(--j2); font-size:46px; line-height:1.14; font-weight:600; margin:0 0 22px; max-width:17ch; } body.single-post h1.title em {color:var(--terra3);font-style:italic;font-weight:500;} body.single-post .byline { display:flex;align-items:center;gap:10px;flex-wrap:wrap; color:var(--ink-soft);font-size:13.5px; padding-bottom:36px; border-bottom:1px solid var(--line); } body.single-post .avatar { width:36px;height:36px;border-radius:50%; background:linear-gradient(135deg, var(--terra4), var(--j5)); display:flex;align-items:center;justify-content:center; color:var(--white);font-family:var(--serif);font-weight:600;font-size:14px; flex-shrink:0; } body.single-post .byline strong {color:var(--j2);} body.single-post .byline .sep {opacity:.4;} body.single-post .jump { margin-left:auto; display:inline-flex;align-items:center;gap:7px; color:var(--terra3);text-decoration:none;font-size:13.5px;font-weight:600; letter-spacing:.02em; } body.single-post .wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; } @media (max-width:600px){ body.single-post .wrap{ padding:0 18px; } } /* ===== Hero art ===== */ body.single-post .hero-art-wrap {padding:0 0 60px;margin-top:-2px;} body.single-post .hero-art { width:100%; aspect-ratio:16/4.2; border-radius:18px; overflow:hidden; box-shadow:0 16px 34px -18px rgba(10,31,18,.35); display:block; object-fit:cover; } @media (max-width:700px){ .hero-art{aspect-ratio:16/9;} } /* ===== Layout grid ===== */ body.single-post .layout { max-width:720px; margin:0 auto; padding-bottom:20px; } @media (max-width:600px){ body.single-post .layout { padding-left:18px; padding-right:18px; } } @media (min-width:1400px){ body.single-post .layout { max-width:900px; } } body.single-post main.content {min-width:0;} body.single-post .lede { font-family:var(--serif); font-size:23px;font-weight:500; color:var(--j2); line-height:1.55; margin:0 0 32px; } body.single-post p {margin:0 0 20px;font-size:18.5px;color:var(--ink);} body.single-post h2 { font-family:var(--serif); font-size:27px;font-weight:600; color:var(--j2); margin:46px 0 16px; display:flex;align-items:center;gap:12px; } body.single-post h2::before {content:"";width:24px;height:2px;background:var(--terra4);display:inline-block;flex-shrink:0;} body.single-post strong {color:var(--j2);font-weight:700;} body.single-post em {color:var(--j5);font-style:italic;} /* mid-article accent image */ body.single-post .inline-art { width:100%; max-width:480px; border-radius:14px; margin:28px auto 8px; aspect-ratio:16/10; object-fit:cover; display:block; } body.single-post .inline-art-cap { font-size:12.5px;color:var(--ink-soft);margin:8px 0 4px;font-style:italic; max-width:480px;margin-left:auto;margin-right:auto;text-align:center; } body.single-post .photo-credit { font-size:11px;color:var(--ink-soft);opacity:.75;margin:0 0 30px; } body.single-post .inline-art + .inline-art-cap + .photo-credit { max-width:480px;margin-left:auto;margin-right:auto;text-align:center; } body.single-post .sec-img { width:100%;max-width:420px;border-radius:14px;margin:20px 0 6px;aspect-ratio:16/10;object-fit:cover;display:block; } /* ===== Numbered listicle blocks ===== */ body.single-post .num-list {list-style:none;margin:26px 0 30px;padding:0;display:flex;flex-direction:column;gap:14px;} body.single-post .num-list li { display:flex;gap:16px;align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px 18px; } body.single-post .num-badge { flex-shrink:0; width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg, var(--j4), var(--j6)); color:var(--white); font-family:var(--serif);font-weight:600;font-size:15px; display:flex;align-items:center;justify-content:center; } body.single-post .num-list.terra .num-badge {background:linear-gradient(135deg, var(--terra3), var(--terra4));} body.single-post .num-list p {margin:0;font-size:18.5x;} /* ===== Two-column checklist (benefits) ===== */ body.single-post .leaf-list { list-style:none;margin:22px 0 30px;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:11px 20px; } body.single-post .leaf-list li { font-size:16px; padding-left:26px; position:relative; color:var(--ink); } body.single-post .leaf-list li::before { content:"🖐"; position:absolute;left:0;top:1px; font-size:13px; } @media (max-width:560px){ .leaf-list{grid-template-columns:1fr;} } body.single-post blockquote { margin:38px 0; padding:24px 28px; background:var(--cream); border-left:4px solid var(--terra4); border-radius:4px 14px 14px 4px; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--j2); line-height:1.5; } body.single-post .habit-card { margin:46px 0 36px; background:linear-gradient(160deg, var(--j3) 0%, var(--j1) 100%); border-radius:20px; padding:32px 30px; color:var(--cream); position:relative;overflow:hidden; } body.single-post .habit-card::before { content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%; background:radial-gradient(circle, rgba(232,184,48,.28), transparent 70%); } body.single-post .habit-badge { display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--gold4);margin-bottom:14px; } body.single-post .habit-card h3 {font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 12px;color:var(--white);position:relative;z-index:1;} body.single-post .habit-card p {color:var(--j10);margin-bottom:10px;font-size:15.5px;position:relative;z-index:1;} body.single-post .habit-card p:last-child {margin-bottom:0;} body.single-post .cta-line { font-family:var(--serif); font-size:23px;font-weight:600; color:var(--j2); text-align:center; margin:40px 0 10px; padding:22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } body.single-post .cta-line span {color:var(--terra4);} /* ===== Category strip ===== */ body.single-post .cat-strip { display:flex;flex-wrap:wrap;gap:10px; margin:44px 0 8px; } body.single-post .cat-pill { font-size:13.5px;font-weight:600; padding:8px 16px;border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:var(--white); text-decoration:none; } body.single-post .cat-pill.active { background:var(--j4);border-color:var(--j4);color:var(--white); } /* ===== Tags ===== */ body.single-post .tags {display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 10px;} body.single-post .tag-pill { font-size:13.5px;color:var(--j2);background:var(--cream2); border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-weight:600; } /* ===== Prev/Next ===== */ body.single-post .postnav { display:grid;grid-template-columns:1fr 1fr;gap:16px; margin:44px 0 8px; } @media (max-width:520px){ .postnav{grid-template-columns:1fr;} } body.single-post .postnav a { display:block;text-decoration:none; background:var(--white);border:1px solid var(--line);border-radius:14px; padding:18px 20px; } body.single-post .postnav .eyebrow {font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--terra3);font-weight:700;margin-bottom:6px;} body.single-post .postnav .ptitle {font-family:var(--serif);font-size:16px;color:var(--j2);} body.single-post .postnav .next {text-align:right;} /* ===== Author card ===== */ body.single-post .author-card { display:flex;gap:18px;align-items:flex-start; background:var(--white);border:1px solid var(--line);border-radius:16px; padding:24px;margin:44px 0 10px; } body.single-post .author-avatar { width:58px;height:58px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg, var(--terra4), var(--j5)); display:flex;align-items:center;justify-content:center; color:var(--white);font-family:var(--serif);font-weight:600;font-size:22px; } body.single-post .author-card h4 {font-family:var(--serif);font-size:17px;margin:0 0 6px;color:var(--j2);} body.single-post .author-card p {font-size:14.5px;color:var(--ink-soft);margin:0;} /* ===== Closing "Get the Free Guide" band ===== */ body.single-post .guide-band { max-width:720px; margin:56px auto 0; background:var(--cream2); border-radius:20px; padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:32px; } body.single-post .guide-band .guide-copy {flex:1;min-width:220px;} body.single-post .guide-band h5 { font-family:var(--serif);font-size:20px;font-weight:600; color:var(--j2);margin:0 0 8px; } body.single-post .guide-band h5 .eyebrow-label { display:block; text-transform:uppercase;font-size:12px;letter-spacing:.09em;font-weight:700; color:var(--terra3);margin-bottom:8px; } body.single-post .guide-band p {color:var(--ink-soft);font-size:14.5px;margin:0;} body.single-post .guide-band .subscribe-form { flex:1;min-width:260px; display:flex;flex-direction:row;gap:10px; } body.single-post .guide-band .subscribe-form input { flex:1; padding:12px 14px;border-radius:9px;border:1px solid var(--line); background:var(--white);color:var(--j2);font-family:var(--sans);font-size:14px; } body.single-post .guide-band .subscribe-form input::placeholder {color:var(--ink-soft);} body.single-post .guide-band .subscribe-form button { padding:12px 20px;border-radius:9px;border:none; background:var(--terra4);color:var(--white);font-weight:700;font-size:14px; cursor:pointer;font-family:var(--sans);white-space:nowrap; } body.single-post .guide-band .subscribe-note {font-size:11.5px;color:var(--ink-soft);margin-top:8px;opacity:.85;} @media (max-width:640px){ body.single-post .guide-band {flex-direction:column;align-items:stretch;padding:26px 22px;} body.single-post .guide-band .subscribe-form {flex-direction:column;} body.single-post .guide-band .subscribe-form input, body.single-post .guide-band .subscribe-form button {font-size:16px;} } @media (max-width:600px){ body.single-post .post-head {padding:36px 0 0;} body.single-post h1.title {font-size:30px;line-height:1.2;max-width:none;margin-bottom:18px;} body.single-post .byline {padding-bottom:26px;font-size:12.5px;gap:8px;} body.single-post .jump {margin-left:0;width:100%;order:99;margin-top:6px;} body.single-post .hero-art-wrap {padding-bottom:36px;} body.single-post .lede {font-size:18px;} body.single-post h2 {font-size:21px;margin:38px 0 14px;} body.single-post .habit-card {padding:22px 20px;margin:36px 0 28px;} body.single-post .habit-card h3 {font-size:20px;} body.single-post blockquote {padding:16px 16px;font-size:16.5px;margin:28px 0;} body.single-post .cta-line {font-size:19px;padding:18px 4px;} body.single-post .num-list li {padding:13px 14px;gap:12px;} body.single-post .num-badge {width:28px;height:28px;font-size:13px;} body.single-post .author-card {flex-direction:column;align-items:flex-start;padding:20px;} body.single-post .postnav {gap:12px;} body.single-post .postnav .next {text-align:left;} body.single-post .layout {gap:36px;} body.single-post .subscribe-form input, body.single-post .subscribe-form button {font-size:16px;} } body.single-post .gratitude-list{list-style:none;margin:22px 0 28px;padding:0;display:flex;flex-direction:column;gap:10px;} body.single-post .gratitude-list li{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:18px;} body.single-post .gratitude-list li::before{content:"🖐";font-size:14px;flex-shrink:0;margin-top:2px;} body.single-post .photo-credit{font-size:11px;color:var(--ink-soft);opacity:.75;margin:0 0 30px;} /* Get the Free Guide — full-width bottom band. Your real CSS still only has the old sidebar-style .subscribe-card/.side-card version — this is the newer bottom-of-page layout, added alongside it (not replacing anything), so you can use either depending on the post. */ body.single-post .guide-band{max-width:720px;margin:56px auto 0;background:var(--cream2);border-radius:20px;padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:32px;} body.single-post .guide-band .guide-copy{flex:1;min-width:220px;} body.single-post .guide-band h5{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--j2);margin:0 0 8px;} body.single-post .guide-band h5 .eyebrow-label{display:block;text-transform:uppercase;font-size:12px;letter-spacing:.09em;font-weight:700;color:var(--terra3);margin-bottom:8px;} body.single-post .guide-band p{color:var(--ink-soft);font-size:16px;margin:0;} body.single-post .guide-band .subscribe-form{flex:1;min-width:260px;display:flex;flex-direction:row;gap:10px;} body.single-post .guide-band .subscribe-form input{flex:1;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--white);color:var(--j2);font-family:var(--sans);font-size:18px;} body.single-post .guide-band .subscribe-form button{padding:12px 20px;border-radius:9px;border:none;background:var(--terra4);color:var(--white);font-weight:700;font-size:14px;cursor:pointer;font-family:var(--sans);white-space:nowrap;} body.single-post .guide-band .subscribe-note{font-size:11.5px;color:var(--ink-soft);margin-top:8px;opacity:.85;} @media (max-width:640px){ body.single-post .guide-band{flex-direction:column;align-items:stretch;padding:26px 22px;} body.single-post .guide-band .subscribe-form{flex-direction:column;} }