/* * Chatsifieds site-wide blog/article theme * Applies only to so hubs, search and business pages are unaffected. * 2026-09-02 */ body.csf-blog-post{ --blog-ink:#172033; --blog-muted:#5e6877; --blog-green:#0d7c66; --blog-green-dark:#075f4f; --blog-green-soft:#edf9f5; --blog-gold:#f3b61f; --blog-paper:#fffdf8; --blog-surface:#ffffff; --blog-soft:#f7f5ef; --blog-line:#e8e3d9; --blog-radius:24px; --blog-shadow:0 18px 48px rgba(34,45,52,.09); margin:0; background:var(--blog-paper); color:var(--blog-ink); font-family:"Sora",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.7; } /* Shared header: fixed logo geometry prevents intrinsic-image blowouts. */ body.csf-blog-post .csf-shell-header{background:#fff;border-bottom:1px solid var(--blog-line)} body.csf-blog-post .csf-shell-inner{max-width:1180px;margin:0 auto;padding:0 24px} body.csf-blog-post .csf-shell-row{min-height:82px;gap:24px} body.csf-blog-post .csf-shell-brand{min-width:0;gap:11px} body.csf-blog-post .csf-shell-brand img{ display:block!important; width:48px!important; height:48px!important; min-width:48px!important; max-width:48px!important; min-height:48px!important; max-height:48px!important; object-fit:contain!important; flex:0 0 48px!important; } body.csf-blog-post .csf-shell-brand strong{font-size:1.3rem;line-height:1.05} body.csf-blog-post .csf-shell-brand small{font-size:.72rem;line-height:1.25;color:#697386} body.csf-blog-post .csf-shell-nav{gap:6px} body.csf-blog-post .csf-shell-nav a{padding:9px 10px;border-radius:999px;font-size:.91rem} body.csf-blog-post .csf-shell-actions{gap:8px} body.csf-blog-post .csf-shell-btn{padding:10px 14px;white-space:nowrap} /* Keep article images fluid without overriding explicit header/footer dimensions. */ body.csf-blog-post main img{max-width:100%;height:auto} /* Breadcrumb / utility strip */ body.csf-blog-post .csf-breadcrumbs, body.csf-blog-post .csf-breadcrumb{ max-width:1180px; margin-inline:auto; } /* Modern editorial hero used by Coffee Company Stories. */ body.csf-blog-post .csf-story-hero{padding:38px 0 32px;background:linear-gradient(145deg,#f4fbf8 0%,#fffdf8 55%,#fff7df 100%)} body.csf-blog-post .csf-story-hero__grid{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:32px;align-items:center} body.csf-blog-post .csf-story-hero h1{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2.45rem,4.35vw,4.25rem);line-height:.99;letter-spacing:-.035em;margin:.65rem 0 1.1rem;color:#13221f} body.csf-blog-post .csf-story-hero__lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.75;color:var(--blog-muted);max-width:720px} body.csf-blog-post .csf-story-hero__media{ width:100%; min-width:0; margin:0; overflow:hidden; border:10px solid #fff; border-radius:28px; background:#fff; box-shadow:var(--blog-shadow); } body.csf-blog-post .csf-story-hero__media img{ display:block!important; width:100%!important; height:auto!important; aspect-ratio:16/9!important; max-height:360px!important; object-fit:cover!important; object-position:center!important; } body.csf-blog-post .csf-story-hero__media figcaption{padding:13px 15px 6px;font-size:.78rem;line-height:1.55;color:#6d7580;background:#fff} /* Legacy article heroes: same visual system without changing their markup. */ body.csf-blog-post main > section:first-child:not(.hero-grad){ background:linear-gradient(145deg,#f4fbf8 0%,#fffdf8 55%,#fff7df 100%)!important; border-bottom:1px solid #e4eee9!important; } body.csf-blog-post main > section:first-child > div[class*="max-w-6xl"]{ max-width:1180px!important; gap:32px!important; padding:38px 24px 34px!important; } body.csf-blog-post main > section:first-child h1{ font-family:"Playfair Display",Georgia,serif!important; font-size:clamp(2.45rem,4.35vw,4.25rem)!important; line-height:.99!important; letter-spacing:-.035em!important; } body.csf-blog-post main > section:first-child figure{ overflow:hidden!important; border-radius:28px!important; border:0!important; padding:10px!important; background:#fff!important; box-shadow:var(--blog-shadow)!important; } body.csf-blog-post main > section:first-child figure img{ display:block!important; width:100%!important; height:auto!important; aspect-ratio:16/9!important; max-height:360px!important; object-fit:cover!important; object-position:center!important; border-radius:20px!important; } body.csf-blog-post main > section:first-child figure figcaption{font-size:.78rem!important;line-height:1.55!important;color:#6d7580!important;padding:12px 6px 4px!important} /* Shared image-led learning hero standard. * Prevent large promotional artwork from taking over the first viewport. * This also covers the Real Australian Café Experience hero, which uses * a full-width image rather than the common two-column figure markup. */ body.csf-blog-post .csf-cafe-x-hero{ max-width:1180px!important; margin:1.25rem auto 0!important; padding:0 24px!important; } body.csf-blog-post .csf-cafe-x-hero>img{ display:block!important; width:100%!important; height:clamp(300px,31vw,430px)!important; max-height:430px!important; object-fit:cover!important; object-position:center 22%!important; border-radius:24px!important; } body.csf-blog-post .csf-cafe-x-hero__copy{ max-width:860px!important; margin:-1.6rem auto 0!important; padding:1.25rem 1.5rem!important; } body.csf-blog-post .csf-cafe-x-hero__copy h1{ font-size:clamp(2rem,4vw,3.35rem)!important; } /* Article rhythm and readable line lengths. */ body.csf-blog-post .csf-section{padding-top:48px;padding-bottom:48px} body.csf-blog-post .csf-container{max-width:1080px} body.csf-blog-post .csf-prose{font-size:1.02rem;line-height:1.82} body.csf-blog-post .csf-prose p{margin:0 0 1.25em} body.csf-blog-post .csf-prose h2, body.csf-blog-post .csf-section-head h2, body.csf-blog-post main section h2{letter-spacing:-.02em} body.csf-blog-post .csf-prose h2, body.csf-blog-post .csf-prose h3{font-family:"Playfair Display",Georgia,serif;color:#17241f} body.csf-blog-post .csf-two-col{gap:36px} /* Legacy Tailwind article sections get consistent width/rhythm. */ body.csf-blog-post main > section:not(:first-child)[class*="max-w-"]{padding-top:38px!important;padding-bottom:38px!important} body.csf-blog-post main > section[class*="max-w-4xl"]{max-width:880px!important} body.csf-blog-post main > section[class*="max-w-5xl"]{max-width:1040px!important} body.csf-blog-post main > section:not(:first-child) h2{font-family:"Playfair Display",Georgia,serif!important;line-height:1.14!important} body.csf-blog-post main > section:not(:first-child) p{line-height:1.78} /* Cards and learning components */ body.csf-blog-post .csf-fact-card, body.csf-blog-post .csf-source-card, body.csf-blog-post .csf-vocab-card, body.csf-blog-post .csf-dialogue, body.csf-blog-post .csf-quiz, body.csf-blog-post .csf-status-note, body.csf-blog-post .csf-claim-banner__card, body.csf-blog-post main > section:not(:first-child) [class*="rounded-"][class*="bg-white"]{ border-color:var(--blog-line)!important; box-shadow:0 10px 28px rgba(34,45,52,.055); } body.csf-blog-post .csf-fact-card, body.csf-blog-post .csf-source-card, body.csf-blog-post .csf-vocab-card, body.csf-blog-post .csf-dialogue, body.csf-blog-post .csf-quiz, body.csf-blog-post .csf-claim-banner__card{border-radius:var(--blog-radius)} body.csf-blog-post .csf-meta-pill{border-radius:999px} body.csf-blog-post .csf-eyebrow{color:var(--blog-green);letter-spacing:.14em} body.csf-blog-post a{transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease} body.csf-blog-post .csf-button:hover,body.csf-blog-post .csf-shell-btn:hover{transform:translateY(-1px)} /* Sponsor and claim areas feel integrated with article, not like detached ads. */ body.csf-blog-post .csf-claim-banner{padding:16px 0 32px} body.csf-blog-post .csf-claim-banner__card{max-width:1080px;margin-inline:auto} body.csf-blog-post .csf-sponsor-slot{max-width:1080px;margin:8px auto 40px;padding-left:24px;padding-right:24px} /* Footer logo is also constrained independently of generic img rules. */ body.csf-blog-post .csf-footer-brand img{ display:block!important; width:52px!important; height:52px!important; min-width:52px!important; max-width:52px!important; min-height:52px!important; max-height:52px!important; object-fit:contain!important; flex:0 0 52px!important; } /* Accessibility */ body.csf-blog-post :focus-visible{outline:3px solid #f3b61f;outline-offset:3px} @media (max-width:1050px){ body.csf-blog-post .csf-shell-actions .csf-shell-btn--soft{display:none} body.csf-blog-post .csf-story-hero__grid{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:32px} } @media (max-width:820px){ body.csf-blog-post .csf-shell-inner{padding:0 16px} body.csf-blog-post .csf-shell-row{min-height:70px} body.csf-blog-post .csf-shell-brand img{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;min-height:42px!important;max-height:42px!important;flex-basis:42px!important} body.csf-blog-post .csf-shell-brand small{display:none} body.csf-blog-post .csf-shell-nav,body.csf-blog-post .csf-shell-actions{display:none} body.csf-blog-post .csf-mobile-nav{display:flex} body.csf-blog-post .csf-story-hero{padding:26px 0 24px} body.csf-blog-post .csf-story-hero__grid{grid-template-columns:1fr;gap:20px;padding:0 16px} body.csf-blog-post .csf-story-hero h1{font-size:clamp(2.15rem,9.5vw,3.15rem)} body.csf-blog-post main > section:first-child > div[class*="max-w-6xl"]{grid-template-columns:1fr!important;padding:26px 16px 24px!important;gap:20px!important} body.csf-blog-post main > section:first-child h1{font-size:clamp(2.15rem,9.5vw,3.15rem)!important} body.csf-blog-post .csf-story-hero__media img,body.csf-blog-post main > section:first-child figure img{max-height:300px!important} body.csf-blog-post .csf-cafe-x-hero{margin:.8rem auto 0!important;padding:0 16px!important} body.csf-blog-post .csf-cafe-x-hero>img{height:clamp(230px,58vw,320px)!important;max-height:320px!important;border-radius:18px!important;object-position:center 18%!important} body.csf-blog-post .csf-cafe-x-hero__copy{margin:-.75rem 8px 0!important;padding:1rem 1.1rem!important;border-radius:18px!important} body.csf-blog-post main > section:not(:first-child)[class*="max-w-"]{padding-left:16px!important;padding-right:16px!important;padding-top:30px!important;padding-bottom:30px!important} body.csf-blog-post .csf-section{padding:34px 0} body.csf-blog-post .csf-container{padding-left:16px;padding-right:16px} body.csf-blog-post .csf-two-col{grid-template-columns:1fr;gap:24px} body.csf-blog-post .csf-sponsor-slot{padding-left:16px;padding-right:16px} } @media (max-width:520px){ body.csf-blog-post .csf-shell-brand strong{font-size:1.08rem} body.csf-blog-post .csf-story-hero__media,body.csf-blog-post main > section:first-child figure{border-radius:20px!important;padding:7px!important} body.csf-blog-post .csf-story-hero__media img,body.csf-blog-post main > section:first-child figure img{border-radius:14px!important} body.csf-blog-post .csf-story-hero__media img,body.csf-blog-post main > section:first-child figure img{aspect-ratio:16/9!important;max-height:240px!important} } /* A0019513 — Coffee English master article component normalization. * blog-theme.css is the authoritative presentation layer for Coffee learning posts. * Keep reusable article/card/list styling here rather than in page-level