/* vmcore-blog.css ───────────────────────────────────────────────────── Link this file in your BEFORE your rich text editor outputs its HTML. All classes are prefixed with [vmcblog-] to avoid any conflicts. Usage in your CMS/page builder: ───────────────────────────────────────────────────── */ /* ── ROOT TOKENS ── */ .vmcblog-root { --b-blue: #3a8de0; --b-blue-lt: #e8f3fd; --b-blue-mid: #bddaf7; --b-black: #111111; --b-dark: #1e2a38; --b-body: #3d4d5c; --b-muted: #6b7f91; --b-border: #e2e8f0; --b-bg: #f7fafd; --b-white: #ffffff; --b-radius: 10px; font-family: inherit; color: var(--b-body); line-height: 1.7; } /* ──────────────────────────────── HERO ──────────────────────────────── */ .vmcblog-hero { text-align: center; padding: 60px 24px 48px; background: var(--b-white); border-bottom: 1px solid var(--b-border); } .vmcblog-hero__badge { display: inline-block; background: var(--b-blue-lt); color: var(--b-blue); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 18px; border-radius: 20px; margin-bottom: 22px; } .vmcblog-hero__title { font-size: clamp(26px, 4vw, 44px); font-weight: 800; color: var(--b-black); line-height: 1.18; max-width: 760px; margin: 0 auto 18px; letter-spacing: -0.5px; } .vmcblog-hero__intro { font-size: 17px; color: var(--b-body); max-width: 600px; margin: 0 auto 28px; line-height: 1.7; } .vmcblog-hero__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; } .vmcblog-hero__meta-item { font-size: 13px; color: var(--b-muted); padding: 0 14px; border-right: 1px solid var(--b-border); line-height: 1; } .vmcblog-hero__meta-item:last-child { border-right: none; } /* ──────────────────────────────── BODY WRAPPER ──────────────────────────────── */ .vmcblog-body { max-width: 800px; margin: 0 auto; padding: 52px 24px 88px; } /* ──────────────────────────────── TYPOGRAPHY ──────────────────────────────── */ .vmcblog-h2 { font-size: 24px; font-weight: 800; color: var(--b-black); margin: 48px 0 14px; letter-spacing: -0.3px; line-height: 1.3; } .vmcblog-h2:first-child { margin-top: 0; } .vmcblog-h3 { font-size: 17px; font-weight: 700; color: var(--b-black); margin: 32px 0 10px; display: flex; align-items: center; gap: 12px; } .vmcblog-cost-num { width: 26px; height: 26px; background: var(--b-blue); color: var(--b-white); border-radius: 50%; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .vmcblog-p { color: var(--b-body); font-size: 16px; line-height: 1.8; margin-bottom: 16px; } .vmcblog-divider { border: none; border-top: 1px solid var(--b-border); margin: 44px 0; } /* ──────────────────────────────── STAT STRIP ──────────────────────────────── */ .vmcblog-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--b-border); border: 1px solid var(--b-border); border-radius: var(--b-radius); overflow: hidden; margin: 0 0 48px; } .vmcblog-stat-card { background: var(--b-white); padding: 26px 20px; text-align: center; transition: background 0.2s; } .vmcblog-stat-card:hover { background: var(--b-bg); } .vmcblog-stat-card__icon { width: 42px; height: 42px; background: var(--b-blue-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--b-blue); } .vmcblog-stat-card__num { font-size: 30px; font-weight: 800; color: var(--b-black); line-height: 1; margin-bottom: 5px; } .vmcblog-stat-card__label { font-size: 11px; font-weight: 700; color: var(--b-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 7px; } .vmcblog-stat-card__desc { font-size: 13px; color: var(--b-body); line-height: 1.5; } /* ──────────────────────────────── PULL QUOTE ──────────────────────────────── */ .vmcblog-pullquote { border-left: 3px solid var(--b-blue); background: var(--b-blue-lt); border-radius: 0 var(--b-radius) var(--b-radius) 0; padding: 18px 22px; margin: 24px 0; } .vmcblog-pullquote p { font-size: 16px; font-weight: 600; color: var(--b-dark); line-height: 1.55; margin: 0; font-style: italic; } /* ──────────────────────────────── BULLET LIST ──────────────────────────────── */ .vmcblog-list { list-style: none; margin: 14px 0 22px; padding: 0; border: 1px solid var(--b-border); border-radius: var(--b-radius); background: var(--b-white); overflow: hidden; } .vmcblog-list li { display: flex; align-items: flex-start; gap: 13px; padding: 13px 18px; border-bottom: 1px solid var(--b-border); font-size: 15px; color: var(--b-body); line-height: 1.6; } .vmcblog-list li:last-child { border-bottom: none; } .vmcblog-list li::before { content: ''; width: 7px; height: 7px; min-width: 7px; background: var(--b-blue); border-radius: 50%; margin-top: 7px; } /* ──────────────────────────────── STEP CARDS ──────────────────────────────── */ .vmcblog-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; } .vmcblog-step { background: var(--b-white); border: 1px solid var(--b-border); border-radius: var(--b-radius); padding: 20px 18px; display: flex; gap: 14px; align-items: flex-start; transition: box-shadow 0.2s, border-color 0.2s; } .vmcblog-step:hover { border-color: var(--b-blue-mid); box-shadow: 0 2px 16px rgba(58,141,224,.08); } .vmcblog-step__num { width: 34px; height: 34px; min-width: 34px; background: var(--b-blue-lt); color: var(--b-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .vmcblog-step__title { font-size: 14px; font-weight: 700; color: var(--b-black); margin-bottom: 4px; } .vmcblog-step__body { font-size: 13px; color: var(--b-muted); line-height: 1.55; } /* ──────────────────────────────── SUMMARY TABLE ──────────────────────────────── */ .vmcblog-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; border-radius: var(--b-radius); overflow: hidden; border: 1px solid var(--b-border); } .vmcblog-table thead tr { background: var(--b-dark); color: var(--b-white); } .vmcblog-table th { padding: 13px 18px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .vmcblog-table td { padding: 13px 18px; color: var(--b-body); border-bottom: 1px solid var(--b-border); background: var(--b-white); } .vmcblog-table tbody tr:nth-child(even) td { background: var(--b-bg); } .vmcblog-table tbody tr:last-child td { border-bottom: none; } /* ──────────────────────────────── CTA BOX ──────────────────────────────── */ .vmcblog-cta { background: var(--b-blue-lt); border: 1px solid var(--b-blue-mid); border-radius: 14px; padding: 44px 36px; text-align: center; margin-top: 48px; } .vmcblog-cta__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--b-blue); margin-bottom: 12px; } .vmcblog-cta__title { font-size: 24px; font-weight: 800; color: var(--b-black); margin-bottom: 12px; line-height: 1.3; } .vmcblog-cta__body { font-size: 15px; color: var(--b-body); max-width: 480px; margin: 0 auto 24px; line-height: 1.7; } .vmcblog-cta__btn { display: inline-block; background: var(--b-blue); color: #ffffff !important; font-size: 14px; font-weight: 700; padding: 13px 30px; border-radius: 6px; text-decoration: none !important; letter-spacing: 0.3px; transition: background 0.2s, transform 0.15s; border: none; cursor: pointer; } .vmcblog-cta__btn:hover { background: #2a7acc; transform: translateY(-1px); } /* ──────────────────────────────── TAGS ──────────────────────────────── */ .vmcblog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--b-border); } .vmcblog-tag { font-size: 12px; font-weight: 600; color: var(--b-blue); background: var(--b-blue-lt); padding: 5px 13px; border-radius: 20px; border: 1px solid var(--b-blue-mid); } /* ──────────────────────────────── RESPONSIVE ──────────────────────────────── */ @media (max-width: 640px) { .vmcblog-stat-strip { grid-template-columns: 1fr; } .vmcblog-steps { grid-template-columns: 1fr; } .vmcblog-cta { padding: 28px 18px; } .vmcblog-h2 { font-size: 20px; } .vmcblog-hero__title { font-size: 24px; } }