/* ────────── Shared styles for /methodology, /articles/*, /glossary, etc. ────────── Single CSS file means future content pages stay tiny - paste the page's + markup, link this stylesheet, ship. Brand tokens kept in sync with the homepage (index.html). */ :root { --vp-cream: #fafafa; --vp-deep-black: #0c0b09; --vp-text-grey: #56556B; --vp-indigo: #3F36B2; --vp-lavender: #8683E5; --vp-navy: #0B0359; --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; } body { margin: 0; background: var(--vp-cream); color: var(--vp-deep-black); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--vp-indigo); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--vp-deep-black); } .container { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* ── Sticky nav ── */ nav.top { position: sticky; top: 0; z-index: 50; background: rgba(250,250,250,0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(15,15,15,0.08); } nav.top .container { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1080px; } nav.top a.brand { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vp-deep-black); text-decoration: none; } nav.top a.cta { background: var(--vp-deep-black); color: #fcfcfc; padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: background .15s ease; } nav.top a.cta:hover { background: var(--vp-indigo); color: #fff; } /* ── Hero ── */ header.hero { padding: 64px 0 36px; } header.hero.with-divider { border-bottom: 1px solid rgba(15,15,15,0.08); margin-bottom: 48px; padding-bottom: 48px; } .breadcrumb { font-size: 13px; color: var(--vp-text-grey); margin-bottom: 18px; } .breadcrumb a { color: var(--vp-text-grey); } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vp-indigo); margin-bottom: 18px; } header h1 { font-size: clamp(34px, 5vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 18px; } .meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--vp-text-grey); border-top: 1px solid rgba(15,15,15,0.08); border-bottom: 1px solid rgba(15,15,15,0.08); padding: 16px 0; margin: 24px 0 48px; } /* ── Article body ── */ article { padding-bottom: 32px; } article .lede { font-size: 22px; line-height: 1.5; color: var(--vp-text-grey); max-width: 56ch; margin: 0 0 36px; } article h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; margin: 56px 0 16px; color: var(--vp-deep-black); } article h3 { font-size: 19px; font-weight: 600; margin: 32px 0 10px; } article p { margin: 0 0 18px; } article strong { color: var(--vp-deep-black); font-weight: 600; } article em { color: var(--vp-deep-black); } article ul, article ol { margin: 0 0 18px; padding-left: 24px; } article li { margin-bottom: 8px; } /* ── Compare blocks (bad / good examples) ── */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; } .compare > div { padding: 18px 20px; border-radius: 10px; font-size: 15px; line-height: 1.55; } .compare .bad { background: rgba(229,88,44,0.06); border-left: 3px solid #E5582C; color: #6B2811; } .compare .good { background: rgba(63,54,178,0.06); border-left: 3px solid var(--vp-indigo); color: var(--vp-deep-black); } .compare .label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; opacity: 0.72; } @media (max-width: 600px) { .compare { grid-template-columns: 1fr; } } /* ── Pull-quote callout ── */ .callout { border-left: 3px solid var(--vp-indigo); background: rgba(63,54,178,0.04); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 0 0 22px; font-style: italic; color: var(--vp-deep-black); font-size: 18px; } /* ── Numbered "dimension" blocks (used on /methodology) ── */ .dim { background: #fff; border: 1px solid rgba(15,15,15,0.08); border-radius: 12px; padding: 24px 28px; margin: 20px 0; } .dim-num { display: inline-block; background: var(--vp-indigo); color: #fff; font-weight: 700; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; font-size: 13px; margin-right: 10px; vertical-align: middle; } .dim h3 { display: inline-block; vertical-align: middle; margin: 0; } .dim p:first-of-type { margin-top: 16px; } .dim .dim-measure { font-size: 14px; color: var(--vp-text-grey); background: rgba(63,54,178,0.04); border-radius: 6px; padding: 10px 14px; margin-top: 12px; } /* ── Tier table (used on /methodology and /tier/*) ── */ .tier-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 15px; } .tier-table th, .tier-table td { padding: 12px 14px; border-bottom: 1px solid rgba(15,15,15,0.10); text-align: left; vertical-align: top; } .tier-table th { background: rgba(63,54,178,0.06); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-indigo); } .tier-table td.tier-name { font-weight: 600; color: var(--vp-deep-black); white-space: nowrap; } /* ── Final CTA card ── */ .cta-card { background: var(--vp-navy); color: var(--vp-cream); border-radius: 18px; padding: 44px 36px; margin: 64px 0 80px; text-align: center; } .cta-card h2 { color: var(--vp-cream); margin: 0 0 12px; font-size: clamp(24px, 3vw, 30px); } .cta-card p { color: rgba(252,252,252,0.78); max-width: 48ch; margin: 0 auto 24px; font-size: 16px; } .cta-card a.btn { display: inline-block; background: var(--vp-cream); color: var(--vp-navy); padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .12s ease; } .cta-card a.btn:hover { transform: translateY(-1px); } /* ── Related links ── */ .related { border-top: 1px solid rgba(15,15,15,0.08); padding-top: 28px; margin-bottom: 64px; } .related h2 { font-size: 18px; margin: 0 0 16px; } .related ul { list-style: none; padding: 0; margin: 0; } .related li { margin-bottom: 10px; } .related a { font-weight: 600; } /* ── Site footer ── */ footer.site { background: #0c0b09; color: rgba(252,252,252,0.55); padding: 40px 0; font-size: 13px; } footer.site .container { max-width: 1080px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; } footer.site a { color: rgba(252,252,252,0.75); text-decoration: none; } footer.site a:hover { color: #fff; } /* ── Responsive ── */ @media (max-width: 600px) { body { font-size: 16px; } article .lede { font-size: 19px; } .dim { padding: 20px 22px; } .cta-card { padding: 36px 24px; margin: 48px 0 64px; } }