/* ============================================================= EverydayAI Blog — Standalone CSS Extracted from the main site (Vite + Tailwind tech theme). Uses Inter from Google Fonts (loaded in each blog post ). ============================================================= */ /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background-color: #0f172a; /* slate-900 */ color: #f1f5f9; /* slate-100 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- Layout ---------- */ .container { max-width: 1280px; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .container { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .container { padding-inline: 2rem; } } .prose-container { max-width: 720px; margin-inline: auto; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background-color: #0f172a; border-bottom: 1px solid #1e293b; /* slate-800 */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: #f1f5f9; text-decoration: none; } .logo:hover { color: #ffffff; } .logo-icon { font-size: 1.5rem; } .header-nav { display: flex; align-items: center; gap: 2rem; } .header-nav a { font-size: 1rem; font-weight: 500; color: #cbd5e1; /* slate-300 */ transition: color 0.15s; } .header-nav a:hover { color: #ffffff; } /* ---------- Buttons ---------- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.25rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; color: #ffffff; background-color: #2563eb; /* blue-600 */ border: none; cursor: pointer; transition: background-color 0.2s; text-decoration: none; } .btn-primary:hover { background-color: #3b82f6; } /* blue-500 */ .btn-gradient { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; color: #ffffff; background: linear-gradient(to right, #2563eb, #7c3aed); /* blue-600 → violet-700 */ border: none; cursor: pointer; transition: opacity 0.2s; text-decoration: none; } .btn-gradient:hover { opacity: 0.9; } /* ---------- Hero / page header ---------- */ .post-hero { position: relative; background-color: #0f172a; padding: 5rem 1rem 4rem; overflow: hidden; text-align: center; } .post-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 70%); pointer-events: none; } .post-hero .inner { position: relative; } .post-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #60a5fa; /* blue-400 */ margin-bottom: 1rem; } .post-title { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 800; color: #f1f5f9; line-height: 1.2; margin-bottom: 1.25rem; } .post-subtitle { font-size: 1.125rem; color: #94a3b8; /* slate-400 */ max-width: 640px; margin-inline: auto; margin-bottom: 2rem; } .post-meta { font-size: 0.875rem; color: #64748b; /* slate-500 */ } .post-meta span+span::before { content: ' · '; } .title-gradient { background: linear-gradient(to right, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---------- Card ---------- */ .card { background-color: #1e293b; /* slate-800 */ border-radius: 0.75rem; border: 1px solid #334155; /* slate-700 */ padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* ---------- Article body typography ---------- */ .post-body { padding-block: 3.5rem; background-color: #0f172a; } .post-body h2 { font-size: 1.625rem; font-weight: 700; color: #f1f5f9; margin-top: 2.5rem; margin-bottom: 0.875rem; line-height: 1.3; } .post-body h3 { font-size: 1.2rem; font-weight: 600; color: #e2e8f0; /* slate-200 */ margin-top: 2rem; margin-bottom: 0.625rem; } .post-body p { color: #94a3b8; /* slate-400 */ margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.75; } .post-body strong { color: #e2e8f0; font-weight: 600; } .post-body a { color: #60a5fa; text-decoration: underline; text-underline-offset: 3px; } .post-body a:hover { color: #93c5fd; } .post-body ul, .post-body ol { color: #94a3b8; margin-bottom: 1.25rem; padding-left: 1.5rem; } .post-body li { margin-bottom: 0.5rem; line-height: 1.7; } .post-body blockquote { border-left: 3px solid #3b82f6; padding-left: 1.25rem; margin-block: 1.75rem; color: #cbd5e1; font-style: italic; } .post-body hr { border: none; border-top: 1px solid #1e293b; margin-block: 2.5rem; } /* ---------- Highlight box ---------- */ .highlight-box { background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.1)); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 0.75rem; padding: 1.5rem 1.75rem; margin-block: 2rem; } .highlight-box p { color: #cbd5e1; margin-bottom: 0; } .highlight-box strong { color: #93c5fd; } /* ---------- Stat strip ---------- */ .stat-strip { background-color: #1e293b; padding-block: 3rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; text-align: center; } .stat-value { font-size: 2rem; font-weight: 800; background: linear-gradient(to right, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 0.875rem; color: #64748b; margin-top: 0.25rem; } /* ---------- Use-case cards grid ---------- */ .use-cases { background-color: #1e293b; padding-block: 4rem; } .use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .use-case-card { background-color: #0f172a; border-radius: 0.75rem; border: 1px solid #334155; padding: 1.5rem; } .use-case-icon { font-size: 2rem; margin-bottom: 0.875rem; } .use-case-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #818cf8; /* violet-400 */ margin-bottom: 0.5rem; } .use-case-card h3 { font-size: 1rem; font-weight: 700; color: #f1f5f9; margin-bottom: 0.5rem; } .use-case-card p { font-size: 0.875rem; color: #64748b; line-height: 1.6; } /* ---------- Section headings ---------- */ .section-heading { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: #f1f5f9; text-align: center; margin-bottom: 0.75rem; } .section-subheading { font-size: 1.0625rem; color: #64748b; text-align: center; max-width: 560px; margin-inline: auto; } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(135deg, #1e3a5f 0%, #1e1b4b 100%); border-top: 1px solid rgba(59, 130, 246, 0.2); border-bottom: 1px solid rgba(59, 130, 246, 0.2); padding-block: 4rem; text-align: center; } .cta-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #f1f5f9; margin-bottom: 0.75rem; } .cta-band p { color: #94a3b8; margin-bottom: 1.75rem; max-width: 500px; margin-inline: auto; } /* ---------- Footer ---------- */ .site-footer { background-color: #020617; /* slate-950 */ color: #f1f5f9; padding-block: 3rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand p { font-size: 0.875rem; color: #64748b; max-width: 280px; line-height: 1.6; margin-top: 0.75rem; } .footer-col h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; /* slate-600 */ margin-bottom: 1rem; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.5rem; } .footer-col a { font-size: 0.875rem; color: #64748b; transition: color 0.15s; } .footer-col a:hover { color: #f1f5f9; } .footer-bottom { border-top: 1px solid #1e293b; margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 0.875rem; color: #475569; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } .footer-bottom-links { display: flex; gap: 1.5rem; } .footer-bottom-links a { color: #475569; transition: color 0.15s; } .footer-bottom-links a:hover { color: #f1f5f9; } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-size: 0.8125rem; color: #475569; padding-block: 0.875rem; background-color: #0f172a; border-bottom: 1px solid #1e293b; } .breadcrumb a { color: #475569; transition: color 0.15s; } .breadcrumb a:hover { color: #60a5fa; } .breadcrumb span { margin-inline: 0.4rem; } /* ---------- Table of contents ---------- */ .toc { background-color: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; } .toc-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; margin-bottom: 0.75rem; } .toc ol { padding-left: 1.25rem; } .toc li { margin-bottom: 0.35rem; } .toc a { font-size: 0.9rem; color: #60a5fa; text-decoration: none; transition: color 0.15s; } .toc a:hover { color: #93c5fd; } /* ---------- Image placeholder ---------- */ .img-placeholder { border: 2px dashed #334155; border-radius: 0.75rem; background-color: #1e293b; padding: 2rem 1.5rem; margin-block: 2rem; display: flex; gap: 1.25rem; align-items: flex-start; } .img-placeholder-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; margin-top: 0.1rem; } .img-placeholder-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #3b82f6; margin-bottom: 0.4rem; } .img-placeholder-title { font-size: 0.9375rem; font-weight: 600; color: #e2e8f0; margin-bottom: 0.5rem; } .img-placeholder-desc { font-size: 0.8125rem; color: #64748b; line-height: 1.65; margin: 0; } .img-placeholder-meta { margin-top: 0.75rem; font-size: 0.75rem; color: #475569; display: flex; gap: 1.25rem; flex-wrap: wrap; } .img-placeholder-meta span { display: flex; align-items: center; gap: 0.3rem; } .img-caption { font-size: 0.8125rem; color: #475569; text-align: center; margin-top: -1.25rem; margin-bottom: 1.75rem; font-style: italic; } /* ---------- Inline CTA (within article body) ---------- */ .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.08)); border: 1px solid rgba(59, 130, 246, 0.3); border-left: 3px solid #3b82f6; border-radius: 0.625rem; padding: 1.1rem 1.4rem; margin-block: 2rem; flex-wrap: wrap; } .inline-cta p { color: #cbd5e1; font-size: 0.9375rem; margin-bottom: 0; flex: 1; } .inline-cta p strong { color: #93c5fd; } .inline-cta a { display: inline-flex; align-items: center; white-space: nowrap; padding: 0.5rem 1.1rem; border-radius: 0.4rem; font-size: 0.875rem; font-weight: 600; color: #ffffff; background-color: #2563eb; text-decoration: none; transition: background-color 0.2s; flex-shrink: 0; } .inline-cta a:hover { background-color: #3b82f6; } /* ---------- Responsive nav hide on mobile ---------- */ @media (max-width: 767px) { .header-nav { display: none; } .inline-cta { flex-direction: column; align-items: flex-start; } } /* ============================================================= Blog index page ============================================================= */ /* Hero */ .blog-hero { position: relative; background-color: #0f172a; padding: 4.5rem 1rem 3.5rem; overflow: hidden; text-align: center; } .blog-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(59, 130, 246, 0.18) 0%, transparent 70%); pointer-events: none; } .blog-hero .inner { position: relative; } .blog-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: #f1f5f9; margin-bottom: 0.875rem; } .blog-hero p { font-size: 1.1rem; color: #64748b; max-width: 520px; margin-inline: auto; } /* Article listing */ .blog-listing { background-color: #0f172a; padding-block: 4rem; } .listing-section-heading { font-size: 1.25rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3rem; margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid #1e293b; } .listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 0; } /* Article card */ .article-card { background-color: #1e293b; border: 1px solid #334155; border-radius: 0.875rem; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; text-decoration: none; } .article-card:hover { border-color: #3b82f6; transform: translateY(-2px); } .article-card-thumb { background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(124, 58, 237, 0.25)); display: flex; align-items: center; justify-content: center; height: 140px; font-size: 3.5rem; border-bottom: 1px solid #334155; } .article-card-body { padding: 1.375rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .article-card-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #818cf8; margin-bottom: 0.5rem; } .article-card-title { font-size: 1.0625rem; font-weight: 700; color: #f1f5f9; line-height: 1.35; margin-bottom: 0.625rem; } .article-card:hover .article-card-title { color: #60a5fa; } .article-card-excerpt { font-size: 0.875rem; color: #64748b; line-height: 1.6; flex: 1; margin-bottom: 1rem; } .article-card-meta { font-size: 0.8rem; color: #475569; display: flex; align-items: center; justify-content: space-between; } .article-card-read { font-size: 0.8125rem; font-weight: 600; color: #60a5fa; } /* Filter / tag row */ .tag-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .tag-pill { padding: 0.3rem 0.875rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; border: 1px solid #334155; color: #94a3b8; background: transparent; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .tag-pill:hover, .tag-pill.active { border-color: #3b82f6; color: #60a5fa; } /* Newsletter strip */ .newsletter-strip { background-color: #1e293b; border-top: 1px solid #334155; border-bottom: 1px solid #334155; padding-block: 3rem; text-align: center; } .newsletter-strip h2 { font-size: 1.375rem; font-weight: 700; color: #f1f5f9; margin-bottom: 0.5rem; } .newsletter-strip p { color: #64748b; font-size: 0.9375rem; margin-bottom: 1.25rem; } .newsletter-form { display: flex; gap: 0.625rem; max-width: 420px; margin-inline: auto; flex-wrap: wrap; justify-content: center; } .newsletter-form input { flex: 1; min-width: 200px; padding: 0.6rem 1rem; border-radius: 0.5rem; border: 1px solid #334155; background-color: #0f172a; color: #f1f5f9; font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.15s; } .newsletter-form input::placeholder { color: #475569; } .newsletter-form input:focus { border-color: #3b82f6; } .article-summary { border: 1px solid rgba(96, 165, 250, 0.25); border-left: 3px solid #60a5fa; background: rgba(96, 165, 250, 0.05); border-radius: 8px; padding: 1.5rem 1.75rem; margin: 2rem 0; } .article-summary-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #60a5fa; margin-bottom: 0.75rem; } .article-summary ul { margin: 0.75rem 0; } /* ============================================================= Blog Conversion Elements — shared across all converted articles ============================================================= */ /* Decision summary box */ .decision-summary{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.5rem 2rem;margin:2rem 0;} .decision-summary h2,.decision-summary h3,.decision-summary-title{margin:0 0 1rem;font-size:.9rem;color:#60a5fa;text-transform:uppercase;letter-spacing:.06em;font-weight:700;} .decision-q{display:block;padding:.6rem 0;border-bottom:1px solid #334155;} .decision-q:last-child{border-bottom:none;} .dq-label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#60a5fa;margin-bottom:.2rem;} .dq-answer,.dq-value{display:block;font-size:.93rem;color:#cbd5e1;} /* Stat attribution */ .stat-source{font-size:.73rem;color:#9ca3af;margin-top:.3rem;} .stat-attribution{font-size:.73rem;color:#9ca3af;text-align:center;margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.07);} /* Time-saved badges */ .win-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem;} .win-header h2{margin:0;} .time-saved{background:rgba(22,101,52,0.3);color:#86efac;font-size:.82rem;font-weight:700;padding:.3rem .75rem;border-radius:20px;white-space:nowrap;border:1px solid rgba(134,239,172,0.25);} /* Before/after grids */ .before-after{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0;border:1px solid #334155;border-radius:8px;overflow:hidden;} .before-col,.after-col{padding:1rem 1.25rem;} .before-col{background:rgba(153,27,27,0.2);} .after-col{background:rgba(22,101,52,0.2);} .ba-label,.before-col strong,.after-col strong{display:block;margin-bottom:.5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;} .before-col .ba-label,.before-col strong{color:#fca5a5;} .after-col .ba-label,.after-col strong{color:#86efac;} .before-col ul,.after-col ul{margin:0;padding-left:1.2rem;font-size:.9rem;color:#94a3b8;} /* Case study cards */ .case-study{background:rgba(245,158,11,0.08);border-left:4px solid #f59e0b;padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 8px 8px 0;} .cs-label,.case-study-header{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#fbbf24;display:block;margin-bottom:.4rem;font-weight:700;} .case-study p{margin:.25rem 0;font-size:.93rem;color:#94a3b8;} .result-line{font-weight:700;color:#fbbf24;margin-top:.5rem;font-size:.95rem;} /* Tools used */ .tools-used{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.75rem 1.25rem;margin:1rem 0;font-size:.88rem;color:#64748b;} .tools-used strong{color:#94a3b8;} /* Urgency bands */ .urgency-band{background:linear-gradient(135deg,#1e3a5f 0%,#1d4ed8 100%);color:#fff;padding:1.5rem 2rem;border-radius:10px;margin:2.5rem 0;} .urgency-band strong{display:block;font-size:1.1rem;margin-bottom:.5rem;} .urgency-band p{margin:0;opacity:.92;font-size:.95rem;color:#fff;} /* Should you implement */ .should-you{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.5rem 2rem;margin:2rem 0;} .should-you h2,.should-you h3,.should-you-title{margin:0 0 1rem;font-size:1rem;color:#f1f5f9;font-weight:700;} .should-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .should-yes,.should-no{margin-bottom:1rem;} .should-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;display:block;} .should-yes .should-label,.should-yes strong{color:#86efac;} .should-no .should-label,.should-no strong{color:#fca5a5;} .should-yes ul,.should-no ul{margin:.5rem 0 0;padding-left:1.3rem;font-size:.92rem;color:#94a3b8;} /* Decision fork */ .decision-fork{margin:2rem 0;} .fork-title{font-size:1rem;font-weight:700;color:#f1f5f9;margin:0 0 1rem;} .fork-options{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .fork-option{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.25rem 1.5rem;} .fork-heading,.fork-option h4{margin:0 0 .5rem;font-size:1rem;color:#f1f5f9;font-weight:700;} .fork-option p{font-size:.9rem;color:#64748b;margin:.5rem 0 1rem;} .fork-cta{display:inline-block;background:#1d4ed8;color:#fff;padding:.5rem 1.25rem;border-radius:6px;text-decoration:none;font-weight:600;font-size:.9rem;} .fork-cta:hover{background:#2563eb;color:#fff;} /* What happens next / timeline CTA */ .next-steps{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.5rem 2rem;margin:2rem 0;} .next-steps h2,.next-steps h3,.next-steps-title{margin:0 0 1.25rem;font-size:1rem;color:#f1f5f9;font-weight:700;} .next-step{display:flex;gap:1rem;margin-bottom:1rem;align-items:flex-start;} .next-step-dot{background:#1d4ed8;color:#fff;font-weight:700;font-size:.85rem;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .next-step div,.next-step span:not(.next-step-dot){font-size:.93rem;color:#94a3b8;} .next-step strong{display:block;color:#e2e8f0;} .next-steps-cta{display:inline-block;margin-top:1.25rem;background:#1d4ed8;color:#fff;padding:.6rem 1.4rem;border-radius:6px;font-weight:600;font-size:.9rem;text-decoration:none;} .next-steps-cta:hover{background:#2563eb;color:#fff;} /* Use-case card link wrapper */ .use-case-card-link{display:block;text-decoration:none;color:inherit;} .use-case-card-link:hover{transform:translateY(-2px);} .use-case-card-link:hover .use-case-card{border-color:#3b82f6;} /* CTA band headings */ .cta-band-title{font-size:clamp(1.375rem,3vw,2rem);font-weight:700;color:#f1f5f9;margin-bottom:.75rem;} .cta-band-sub{color:#94a3b8;margin-bottom:1.75rem;max-width:540px;margin-inline:auto;} /* ============================================================= Early-article variant classes (accountants / architects style) Dark-theme custom components used in the first two articles. ============================================================= */ /* Case study — green variant (accountants/architects) */ .case-study-label{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#10b981;margin-bottom:.6rem;display:block;} /* Before/after — ba-item bullet variant */ .ba-item{font-size:.875rem;color:#94a3b8;margin-bottom:.5rem;line-height:1.6;padding-left:1rem;position:relative;} .ba-item::before{position:absolute;left:0;font-size:.75rem;} .before-col .ba-item::before{content:'✗';color:#f87171;} .after-col .ba-item::before{content:'✓';color:#34d399;} /* Before/after — h4 label variant (property-managers / electricians style) */ .before-col h4,.after-col h4{margin:0 0 .6rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;} .before-col h4{color:#fca5a5;} .after-col h4{color:#86efac;} /* Decision fork — list-item variant (accountants/architects style) */ .fork-item{display:flex;align-items:flex-start;gap:1rem;background:#1e293b;border:1px solid #334155;border-radius:.625rem;padding:1.1rem 1.3rem;transition:border-color .2s;} .fork-item:hover{border-color:#3b82f6;} .fork-icon{font-size:1.5rem;flex-shrink:0;line-height:1;margin-top:.1rem;} .fork-body{flex:1;} .fork-if{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#60a5fa;margin-bottom:.2rem;} .fork-desc{font-size:.8125rem;color:#64748b;line-height:1.6;} .fork-item.fork-cta-highlight{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.08));border-color:rgba(59,130,246,.4);} /* Decision fork — card variant (property-managers / electricians style) */ .fork-options>.fork-cta{display:block;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:1rem 1.25rem;} .fork-options>.fork-cta h4{margin:0 0 .4rem;font-size:.9rem;color:#f1f5f9;font-weight:700;} .fork-options>.fork-cta p{margin:0 0 .75rem;font-size:.85rem;color:#64748b;} .fork-options>.fork-cta a{display:inline-block;background:#1d4ed8;color:#fff;font-size:.85rem;font-weight:600;padding:.45rem 1rem;border-radius:6px;text-decoration:none;} .fork-options>.fork-cta a:hover{background:#2563eb;} /* Urgency band — icon+body variant (property-managers / electricians / builders style) */ .urgency-band:has(.ub-icon){display:flex;align-items:flex-start;gap:.875rem;} .ub-icon{font-size:1.5rem;flex-shrink:0;line-height:1;margin-top:.1rem;} .ub-body{flex:1;} .ub-body p{margin:0 !important;font-size:.9rem;opacity:.9;line-height:1.5;} /* Should-you — grid variant (property-managers / electricians style) */ .should-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .should-grid .should-yes{background:rgba(22,101,52,.15);border:1px solid rgba(134,239,172,.2);border-radius:.75rem;padding:1rem 1.25rem;} .should-grid .should-no{background:rgba(153,27,27,.15);border:1px solid rgba(252,165,165,.2);border-radius:.75rem;padding:1rem 1.25rem;} .should-grid .should-yes h4{color:#86efac;margin:0 0 .5rem;font-size:.85rem;text-transform:uppercase;font-weight:700;} .should-grid .should-no h4{color:#fca5a5;margin:0 0 .5rem;font-size:.85rem;text-transform:uppercase;font-weight:700;} .should-grid ul{margin:0;padding:0 0 0 1.1rem;font-size:.9rem;line-height:1.8;color:#94a3b8;} /* Should-you — accountants/architects variant */ .should-you-sub{font-size:.9375rem;color:#64748b;margin-bottom:1.5rem;} .should-you-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} @media(max-width:600px){.should-you-grid{grid-template-columns:1fr;}} .should-col-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;display:block;} .should-yes .should-col-label{color:#10b981;} .should-no .should-col-label{color:#64748b;} .should-item{font-size:.875rem;color:#94a3b8;line-height:1.6;margin-bottom:.625rem;padding-left:1.25rem;position:relative;} .should-item:last-child{margin-bottom:0;} .should-item::before{position:absolute;left:0;font-size:.8rem;top:.05rem;} .should-yes .should-item::before{content:'✓';color:#10b981;} .should-no .should-item::before{content:'—';color:#475569;} /* Decision summary — old row-grid variant (accountants/architects style) */ .decision-rows{display:flex;flex-direction:column;gap:1rem;} .decision-row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;align-items:start;} @media(max-width:560px){.decision-row{grid-template-columns:1fr;gap:.25rem;}} .decision-a{font-size:.9375rem;color:#cbd5e1;line-height:1.65;} .decision-a strong{color:#f1f5f9;} .decision-divider{border:none;border-top:1px solid #334155;margin-block:0;} .risk-tag{display:inline-block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:.3rem;padding:.1rem .5rem;font-size:.75rem;font-weight:700;color:#f87171;margin-left:.35rem;vertical-align:middle;} /* Next-step body variant (property-managers / accountants style) */ .next-step-body{padding-bottom:1.25rem;flex:1;} .next-step-title{font-size:.9375rem;font-weight:600;color:#e2e8f0;margin-bottom:.2rem;display:block;} .next-step-desc{font-size:.8125rem;color:#64748b;line-height:1.6;} .next-step-body strong{display:block;font-size:.93rem;color:#e2e8f0;} .next-step-body p{margin:.2rem 0 0;font-size:.87rem;color:#64748b;} /* Decision fork — fork-card variant (electronics-retail / builders / beauty style) */ .fork-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.25rem 1.5rem;} .fork-card h3{margin:0 0 .5rem;font-size:1rem;color:#f1f5f9;font-weight:700;} .fork-card p{font-size:.9rem;color:#64748b;margin:0 0 1rem;line-height:1.5;} .fork-cta.primary{background:#1d4ed8;color:#fff;} .fork-cta.secondary{background:#1e293b;color:#60a5fa;border:1px solid #334155;} /* Next-step content variant (electronics-retail / builders style) */ .next-step-content strong{display:block;margin-bottom:.2rem;font-size:.95rem;color:#e2e8f0;} .next-step-content p{margin:0;font-size:.88rem;color:#64748b;} /* CTA steps panel (accountants only) */ .cta-steps{display:flex;gap:.5rem;align-items:stretch;margin-top:1.5rem;flex-wrap:wrap;justify-content:center;} .cta-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.875rem 1.1rem;flex:1;min-width:140px;max-width:180px;text-align:center;} .cta-step-num{font-size:1.25rem;font-weight:800;color:#60a5fa;line-height:1;margin-bottom:.4rem;} .cta-step-label{font-size:.8rem;color:#94a3b8;line-height:1.5;} .cta-arrow{display:flex;align-items:center;color:#334155;font-size:1.25rem;padding:0 .25rem;} @media(max-width:560px){.cta-arrow{display:none;}} .cta-guarantee{margin-top:1rem;font-size:.8125rem;color:#475569;} .cta-guarantee strong{color:#64748b;} /* Responsive stacks */ @media(max-width:600px){ .before-after{grid-template-columns:1fr;} .should-you-grid,.should-grid,.fork-options,.decision-fork .fork-options{grid-template-columns:1fr;} }