/* ── COBUYERS BLOG STYLESHEET ─────────────────────────────────────────────── Shared across all blog pages. Update once, applies everywhere. Font loaded via in each post's . ─────────────────────────────────────────────────────────────────────────── */ /* ── TOKENS ─────────────────────────────── */ :root { --orange: #F26822; --black: #000000; --off-white: #FAF9F5; --blush: #FBE8DE; --charcoal: #141413; --body: #363636; --lgrey: #EFEDF0; --white: #FFFFFF; --fh: 'Montserrat', sans-serif; --fb: 'Montserrat', sans-serif; --mw: 1200px; } /* ── RESET ──────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none} button{cursor:pointer;border:none;background:none;font:inherit;color:inherit} /* ── BASE ───────────────────────────────── */ body{ font-family:var(--fb); font-size:16px; line-height:1.65; color:var(--body); background:var(--off-white); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ── LAYOUT ─────────────────────────────── */ .wrap{max-width:var(--mw);margin:0 auto;padding:0 1.5rem;width:100%} /* ── TYPE ───────────────────────────────── */ .eyebrow{ font-family:var(--fb);font-size:.8125rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--orange); display:block;margin-bottom:1rem; } /* ── BUTTONS ────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:.35em; font-family:var(--fb);font-size:.8125rem;font-weight:600; letter-spacing:.07em;text-transform:uppercase; padding:.6rem 1.375rem;border-radius:50px; transition:opacity .2s,transform .15s,box-shadow .2s; white-space:nowrap;-webkit-tap-highlight-color:transparent; } .btn:hover{opacity:.87;transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--orange);color:#fff} .btn-primary:hover{box-shadow:0 0 22px rgba(242,104,34,.6);opacity:1} /* ── NAV ────────────────────────────────── */ .nav{ position:sticky;top:0;z-index:100; background:rgba(250,249,245,.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,0,0,.07); padding:.875rem 0; } .nav-inner{display:flex;align-items:center;justify-content:space-between} .nav-logo{display:flex;align-items:center} .nav-logo img{height:34px;width:auto} .nav-desktop{display:none} .nav-burger{ display:flex;flex-direction:column;gap:5px; padding:8px;-webkit-tap-highlight-color:transparent; } @media(min-width:768px){ .nav-desktop{display:flex;align-items:center;gap:2rem} .nav-desktop a{font-size:.875rem;font-weight:500;color:var(--body);transition:color .15s} .nav-desktop a:not(.btn):hover{color:var(--orange)} .nav-desktop .btn{color:#fff} .nav-desktop .btn:hover{color:#fff} .nav-burger{display:none} } .nav-burger span{ display:block;width:22px;height:2px; background:var(--charcoal);border-radius:2px;transition:all .25s; } .nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} .nav-drawer{ display:none;flex-direction:column;gap:1rem; padding:1.25rem 1.5rem 1.5rem; border-top:1px solid rgba(0,0,0,.07); background:rgba(250,249,245,.98); } .nav-drawer.open{display:flex} .nav-drawer ul{display:flex;flex-direction:column;gap:.75rem} .nav-drawer a{font-size:1rem;font-weight:500;color:var(--charcoal)} /* ── BLOG POST HEADER ───────────────────── */ .blog-header{ background:var(--charcoal); padding:4rem 0 3.5rem; color:#fff; } .breadcrumb{ display:flex;align-items:center;gap:.5rem; font-size:.8125rem;color:rgba(255,255,255,.45); margin-bottom:1.5rem; } .breadcrumb a{color:rgba(255,255,255,.55);transition:color .15s} .breadcrumb a:hover{color:#fff} .breadcrumb-sep{color:rgba(255,255,255,.25)} .blog-header h1{ font-family:var(--fh);font-weight:800;font-style:italic; font-size:clamp(1.875rem,5vw,3rem); line-height:1.1;letter-spacing:-.02em; color:#fff;margin-bottom:1.25rem; max-width:820px; } .blog-meta{ display:flex;flex-wrap:wrap;gap:.5rem 1.5rem; font-size:.8125rem;color:rgba(255,255,255,.5); margin-top:1.5rem;padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); } .blog-meta-item{display:flex;align-items:center;gap:.4rem} /* ── ARTICLE BODY ───────────────────────── */ .article-outer{background:var(--off-white);padding:3.5rem 0 5rem} .article-wrap{max-width:740px;margin:0 auto;padding:0 1.5rem} .article-wrap h2{ font-family:var(--fh);font-weight:700; font-size:clamp(1.25rem,3vw,1.5rem); line-height:1.2;color:var(--charcoal); margin-top:3rem;margin-bottom:1rem; padding-top:2.5rem; border-top:1px solid rgba(0,0,0,.08); } .article-wrap h2:first-child{border-top:none;padding-top:0;margin-top:0} .article-wrap h3{ font-family:var(--fh);font-weight:700; font-size:1rem;line-height:1.35; color:var(--charcoal); margin-top:1.75rem;margin-bottom:.5rem; } .article-wrap p{ color:var(--body);font-size:1rem; line-height:1.85;margin-bottom:1.375rem; } .article-wrap p:last-child{margin-bottom:0} .article-wrap ul{ margin:.25rem 0 1.375rem 1.375rem; list-style:disc; } .article-wrap ul li{ margin-bottom:.5rem;line-height:1.75;color:var(--body);font-size:1rem; } .article-wrap strong{font-weight:700;color:var(--charcoal)} .article-wrap hr{ border:none;border-top:1px solid rgba(0,0,0,.1); margin:2.5rem 0; } .article-wrap table{ width:100%;border-collapse:collapse; margin:1.5rem 0 2rem;font-size:.875rem; } .article-wrap th{ background:var(--charcoal);color:#fff; font-weight:600;padding:.75rem 1rem;text-align:left; } .article-wrap td{ padding:.625rem 1rem;border-bottom:1px solid rgba(0,0,0,.08); vertical-align:top;line-height:1.6; } .article-wrap tr:nth-child(even) td{background:rgba(0,0,0,.02)} .article-wrap .note{ background:var(--blush);border-left:3px solid var(--orange); padding:1rem 1.25rem;border-radius:0 8px 8px 0; margin:1.5rem 0;font-size:.9375rem; } /* ── AUTHOR BIO ─────────────────────────── */ .author-bio{ background:var(--charcoal); border-left:4px solid var(--orange); border-radius:0 12px 12px 0; padding:1.75rem 2rem; margin:3.5rem 0 0; display:flex;gap:1.5rem;align-items:center; position:relative;overflow:hidden; } .author-bio::after{ content:''; position:absolute; top:-40px;right:-40px; width:160px;height:160px; border-radius:50%; background:radial-gradient(circle,rgba(242,104,34,.12) 0%,transparent 70%); pointer-events:none; } .author-bio img,.author-bio-img{ width:72px;height:72px;border-radius:50%; object-fit:cover;object-position:top center; flex-shrink:0; border:2.5px solid var(--orange); box-shadow:0 0 0 4px rgba(242,104,34,.15); } .author-bio-text h4, .author-bio-name{ font-size:.9375rem;font-weight:700; color:#fff;margin-bottom:.2rem; } .author-bio-role{ font-size:.75rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase; color:var(--orange);margin-bottom:.5rem; } .author-bio-text p{ font-size:.875rem;color:rgba(255,255,255,.5); line-height:1.65;margin:0; } /* ── POST CTA STRIP ─────────────────────── */ .post-cta{ background:var(--charcoal); padding:4.5rem 0;text-align:center; } .post-cta h2{ font-family:var(--fh);font-weight:800;font-style:italic; font-size:clamp(1.5rem,4vw,2.25rem); color:#fff;margin-bottom:.875rem;letter-spacing:-.02em; } .post-cta p{ color:rgba(255,255,255,.6); margin-bottom:2rem; max-width:540px;margin-left:auto;margin-right:auto; font-size:1.0625rem;line-height:1.7; } .post-cta .btn{ padding:.9rem 2.5rem;font-size:.9375rem; box-shadow:0 0 28px rgba(242,104,34,.45),0 0 60px rgba(242,104,34,.2); } .post-cta .btn:hover{ box-shadow:0 0 40px rgba(242,104,34,.65),0 0 80px rgba(242,104,34,.3); opacity:1; } /* ── BLOG INDEX ─────────────────────────── */ .blog-index-hero{ background:var(--charcoal); padding:5rem 0 4rem; } .blog-index-hero h1{ font-family:var(--fh);font-weight:800;font-style:italic; font-size:clamp(2rem,5vw,3.25rem); color:#fff;line-height:1.08;letter-spacing:-.025em; margin-bottom:1rem; } .blog-index-hero p{ color:rgba(255,255,255,.6); max-width:560px;font-size:1.0625rem;line-height:1.7; } .blog-index-body{padding:4rem 0 6rem} .blog-grid{ display:grid; grid-template-columns:1fr; gap:1.75rem; } @media(min-width:600px){.blog-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.blog-grid{grid-template-columns:repeat(3,1fr)}} .post-card{ background:var(--white);border-radius:12px; border:1px solid rgba(0,0,0,.07); overflow:hidden; display:flex;flex-direction:column; transition:transform .2s,box-shadow .2s; } .post-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.1)} .post-card-body{padding:1.75rem;flex:1;display:flex;flex-direction:column} .post-card-eyebrow{ font-size:.75rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--orange); display:block;margin-bottom:.625rem; } .post-card-title{ font-size:1.0625rem;font-weight:700;color:var(--charcoal); line-height:1.35;margin-bottom:.75rem;flex:1; } .post-card-excerpt{ font-size:.875rem;color:rgba(54,54,54,.65); line-height:1.65;margin-bottom:1.25rem; } .post-card-meta{font-size:.75rem;color:rgba(54,54,54,.45)} .post-card-link{ display:inline-flex;align-items:center;gap:.4rem; font-size:.8125rem;font-weight:600;color:var(--orange); letter-spacing:.04em;text-transform:uppercase; margin-top:1rem;transition:gap .15s; } .post-card:hover .post-card-link{gap:.65rem} /* ── FOOTER ─────────────────────────────── */ .footer{background:var(--lgrey);padding:2.5rem 0 2rem} .footer-inner{display:flex;flex-direction:column;gap:1.5rem} @media(min-width:640px){ .footer-inner{flex-direction:row;justify-content:space-between;align-items:center} } .footer-logo{display:flex;align-items:center;gap:.5rem} .footer-logo-text{font-weight:600;font-size:.9375rem;color:var(--charcoal)} .footer-copy{font-size:.75rem;color:rgba(20,20,19,.4)} .footer-copy a{color:rgba(20,20,19,.5);text-decoration:underline} /* ── DATA CALLOUTS ──────────────────────── */ /* Single big stat — charcoal card, large orange figure */ .key-stat { background: var(--charcoal); border-radius: 12px; padding: 2rem 1.75rem 1.75rem; text-align: center; margin: 2.25rem 0; position: relative; overflow: hidden; } .key-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--orange); } .key-stat-label { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .875rem; } .key-stat-value { font-family: var(--fh); font-size: clamp(2.25rem,8vw,3.75rem); font-weight: 800; font-style: italic; color: var(--orange); line-height: 1; letter-spacing: -.02em; margin-bottom: .625rem; } .key-stat-context { font-size: .8125rem; color: rgba(255,255,255,.45); line-height: 1.55; } /* Side-by-side before/after pair */ .stat-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 2.25rem 0; } .stat-row .key-stat { margin: 0; } .stat-row-arrow { font-size: 1.75rem; font-weight: 800; font-style: italic; font-family: var(--fh); color: var(--orange); text-align: center; } @media(max-width:480px) { .stat-row { grid-template-columns: 1fr; } .stat-row-arrow { transform: rotate(90deg); } } /* Insight / key-fact callout — white card, orange left border */ .callout-box { background: #fff; border: 1.5px solid rgba(242,104,34,.18); border-left: 4px solid var(--orange); border-radius: 0 10px 10px 0; padding: 1.5rem 1.75rem; margin: 2.25rem 0; } .callout-box-label { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: .75rem; display: block; } .callout-box-content { font-size: 1rem; color: var(--charcoal); font-weight: 600; line-height: 1.55; margin-bottom: 0; } .callout-box-sub { font-size: .875rem; color: var(--body); margin-top: .625rem; line-height: 1.7; font-weight: 400; } /* Formula display block */ .formula-block { background: var(--charcoal); border-left: 4px solid var(--orange); border-radius: 0 8px 8px 0; padding: 1.25rem 1.5rem; margin: 1.5rem 0; font-size: .9375rem; color: rgba(255,255,255,.8); font-weight: 500; line-height: 1.7; } .formula-block strong { color: var(--orange); font-weight: 700; } /* ── BACK TO BLOG LINK ──────────────────── */ .back-link{ display:inline-flex;align-items:center;gap:.4rem; font-size:.8125rem;font-weight:600;color:var(--orange); letter-spacing:.04em;text-transform:uppercase; margin-bottom:2.5rem;transition:gap .15s; } .back-link:hover{gap:.65rem} /* ── BOOKING MODAL ──────────────────────── */ .bm-overlay{ position:fixed;inset:0;z-index:9000; background:rgba(0,0,0,.7); display:flex;align-items:center;justify-content:center; padding:1.25rem; opacity:0;pointer-events:none; transition:opacity .25s ease; } .bm-overlay.bm-open{opacity:1;pointer-events:all} .bm-card{ background:var(--off-white);border-radius:6px; width:100%;max-width:460px; padding:2.5rem 2rem 2rem; position:relative; transform:translateY(16px); transition:transform .25s ease; } .bm-overlay.bm-open .bm-card{transform:translateY(0)} .bm-close{ position:absolute;top:1rem;right:1rem; background:none;border:none;cursor:pointer; font-size:1.375rem;line-height:1; color:rgba(0,0,0,.35);padding:.25rem .5rem; transition:color .15s; } .bm-close:hover{color:var(--charcoal)} .bm-icon{ width:48px;height:48px;border-radius:50%; background:var(--orange); display:flex;align-items:center;justify-content:center; margin:0 0 1.25rem; } .bm-icon svg{width:22px;height:22px;color:#fff} .bm-title{ font-size:1.375rem;font-weight:800;font-style:italic; letter-spacing:-.02em;color:var(--charcoal); margin-bottom:.375rem;line-height:1.15; } .bm-card p{ font-size:.875rem;color:var(--body); opacity:.7;margin-bottom:1.75rem;line-height:1.6; } .bm-row{ display:grid;grid-template-columns:1fr 1fr;gap:.75rem; margin-bottom:.75rem; } .bm-field{ display:flex;flex-direction:column;gap:.35rem; margin-bottom:.75rem; } .bm-field label{ font-size:.75rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--charcoal);opacity:.6; } .bm-field input{ font-family:var(--fh);font-size:.9375rem;font-weight:500; color:var(--charcoal); background:#fff;border:1.5px solid rgba(0,0,0,.12); border-radius:3px;padding:.65rem .875rem; outline:none;transition:border-color .15s; width:100%; } .bm-field input:focus{border-color:var(--orange)} .bm-field input::placeholder{color:rgba(0,0,0,.25)} .bm-submit{ width:100%;margin-top:.5rem; padding:.8rem 1.5rem; background:var(--orange);color:#fff; border:none;border-radius:50px;cursor:pointer; font-family:var(--fh);font-size:.875rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase; transition:box-shadow .2s,transform .2s; } .bm-submit:hover{box-shadow:0 6px 24px rgba(242,104,34,.4);transform:translateY(-1px)} .bm-submit:disabled{opacity:.6;cursor:not-allowed;transform:none} .bm-error{font-size:.8125rem;color:#c0392b;margin-top:.5rem;display:none} @media(max-width:420px){ .bm-row{grid-template-columns:1fr} .bm-card{padding:2rem 1.25rem 1.5rem} }