:root { /* Carbon palette */ --blue-60: #0f62fe; --blue-60-hover: #0353e9; --blue-80: #002d9c; --blue-10: #edf5ff; --white: #ffffff; --gray-10: #f4f4f4; --gray-10-hover: #f0f0f0; --gray-20: #e0e0e0; --gray-30: #c6c6c6; --gray-50: #8d8d8d; --gray-60: #6f6f6f; --gray-70: #525252; --gray-80: #393939; --gray-90: #262626; --gray-100: #161616; --red-60: #da1e28; /* Editorial-card exception only (see DESIGN.md). Never used outside .resource-art surfaces. */ --copper-60: #c66a3a; --copper-30: #e5a274; --copper-tint: #f4ead6; --font: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; --font-serif: 'IBM Plex Serif', Georgia, serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--gray-100); background: var(--white); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Focus ring — Carbon style */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-60); outline-offset: -2px; } /* ---------- NAV ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 48px; background: var(--gray-100); display: flex; align-items: center; padding: 0 16px; } .logo { color: var(--white); /* font-size sized so cap-height (~0.71x) matches the visible mark in mark.svg (mark fills ~61% of its 100-unit viewBox; at img 28px that's ~17px visible). */ font-size: 1.5rem; font-weight: 600; letter-spacing: 0.16px; line-height: 1; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; gap: 10px; } .logo img { height: 28px; width: 28px; display: block; } .logo .accent { color: var(--blue-60); } /* IBM Plex Sans with line-height:1 places the baseline near the bottom of the line box, so the cap-height visual center sits ~1.6px below the box center (verified via Canvas TextMetrics, not the font's typo metrics). Nudge up 1px so the wordmark caps align with the icon glyph center. */ .logo .wordmark { transform: translateY(-1px); } .nav-links { list-style: none; display: flex; align-items: center; margin-left: 16px; height: 48px; } .nav-links a { color: var(--gray-30); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; transition: color 0.1s, background-color 0.1s; } .nav-links a:hover { color: var(--white); background: var(--gray-80); } /* Active nav indicator — DESIGN.md says active items use weight 600 white. Each page sets data-active-nav="" on ; we match on the link's href to highlight the right item. body-short-02 register from the spec. */ body[data-active-nav="home"] .nav-links a[href="/"], body[data-active-nav="about-3cx"] .nav-links a[href="/3cx-explained.html"], body[data-active-nav="pricing"] .nav-links a[href="/honest-pricing.html"], body[data-active-nav="switch"] .nav-links a[href="/pstn-switch-off.html"], body[data-active-nav="about-us"] .nav-links a[href="/about.html"], body[data-active-nav="support"] .nav-support { color: var(--white); font-weight: 600; } body[data-active-nav="support"] .nav-support-icon { opacity: 1; } .nav-cta { background: var(--blue-60); color: var(--white) !important; padding: 0 64px 0 16px !important; height: 48px; display: inline-flex; align-items: center; position: relative; font-weight: 400; font-size: 0.875rem; letter-spacing: 0.16px; transition: background-color 0.1s; } /* Customer-support link in the nav. Sits to the left of the Free-audit CTA on desktop; both cluster on the right (margin-left:auto on .nav-support pushes the pair). Hidden on mobile — the hamburger keeps the bar tight, and the support page is still reachable from the footer + the menu. */ .nav-support { margin-left: auto; color: var(--gray-30); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.16px; padding: 0 16px; height: 48px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.1s, background-color 0.1s; white-space: nowrap; } .nav-support:hover { color: var(--white); background: var(--gray-80); } .nav-support-icon { flex-shrink: 0; opacity: 0.7; } .nav-support:hover .nav-support-icon { opacity: 1; } .nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--white); align-items: center; justify-content: center; } .nav-toggle:hover { background: var(--gray-80); } .nav-toggle svg { display: block; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav-cta::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .nav-cta:hover { background: var(--blue-60-hover); } /* ---------- HERO (legacy: text-on-white for un-migrated pages) ---------- */ .hero { background: var(--white); padding: 144px 32px 96px; border-bottom: 1px solid var(--gray-20); } .hero-inner { max-width: 1056px; margin: 0 auto; } .hero-eyebrow { display: inline-block; background: var(--blue-10); color: var(--blue-60); padding: 4px 8px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; border-radius: 24px; margin-bottom: 32px; } .hero h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.17; color: var(--gray-100); text-wrap: balance; margin-bottom: 24px; } .hero h1 em { color: var(--blue-60); font-style: normal; font-weight: 300; } .hero p { font-size: 1.125rem; line-height: 1.5; color: var(--gray-70); max-width: 60ch; margin-bottom: 48px; } .hero-cta { display: flex; gap: 1px; flex-wrap: wrap; } /* ---------- HERO (full-bleed cinema-poster: only on migrated pages with data-hero) ---------- */ .hero[data-hero] { position: relative; min-height: 640px; display: flex; align-items: center; background: var(--gray-100); overflow: hidden; padding: 96px 0 0; /* clear the 48px fixed nav + breathing room */ /* override legacy white background + border */ border-bottom: none; } /* Picture wraps the image and starts below the 48px fixed nav so what gets rendered is what's visible — no wasted top 48px hidden behind the nav. Both nav and hero bg are Gray 100 so there's no visible seam. */ .hero[data-hero] picture { position: absolute; inset: 48px 0 0 0; z-index: 0; } .hero[data-hero] picture img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero[data-hero]::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(22, 22, 22, 0.85) 0%, rgba(22, 22, 22, 0.55) 35%, rgba(22, 22, 22, 0) 55% ); z-index: 1; pointer-events: none; } .hero[data-hero] .hero-inner { position: relative; z-index: 2; max-width: 1056px; margin: 0 auto; width: 100%; padding: 0 32px; } /* Phone is composited in the upper-right of every dark hero image. On tablet+ viewports the headline can run wide enough to crash into the phone, losing contrast where text crosses phone chrome. Reserve a right-side clearance zone scaled to viewport width. Mobile is unaffected — the phone is more cropped and the scrim is stronger top-to-bottom so overlap there isn't a problem. */ @media (min-width: 769px) { .hero[data-hero] .hero-inner { padding-right: clamp(160px, 28vw, 480px); } } .hero[data-hero] .hero-eyebrow { display: inline-block; background: rgba(15, 98, 254, 0.15); color: var(--white); padding: 4px 8px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; border-radius: 24px; margin-bottom: 32px; border: 1px solid rgba(255, 255, 255, 0.2); } .hero[data-hero] h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.17; color: var(--white); text-wrap: balance; margin-bottom: 24px; max-width: 60ch; } .hero[data-hero] h1 em { color: var(--white); font-style: normal; font-weight: 600; /* on dark we use weight, not blue, for emphasis */ } .hero[data-hero] .hero-sub { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin: 0 0 40px; } /* Secondary CTA on dark heroes: keep the Gray 80 (#393939) fill but add a translucent white outline so the button silhouette doesn't melt into the Gray 100 hero background. */ .hero[data-hero] .btn-secondary { border: 1px solid rgba(255, 255, 255, 0.4); } .hero[data-hero] .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.6); } .hero[data-hero] .hero-cta { display: flex; gap: 1px; flex-wrap: wrap; margin-top: 8px; } @media (max-width: 768px) { .hero[data-hero] { min-height: 520px; padding-top: 80px; } .hero[data-hero]::after { background: linear-gradient( 180deg, rgba(22, 22, 22, 0.75) 0%, rgba(22, 22, 22, 0.45) 100% ); } .hero[data-hero] .hero-inner { padding: 0 16px; } } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: flex-start; height: 48px; padding: 0 64px 0 16px; font-family: var(--font); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; border: 1px solid transparent; border-radius: 0; position: relative; transition: background-color 0.1s, border-color 0.1s, color 0.1s; min-width: 200px; } .btn::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; } .btn-primary { background: var(--blue-60); color: var(--white); } .btn-primary::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-primary:hover { background: var(--blue-60-hover); } .btn-primary:active { background: var(--blue-80); } .btn-secondary { background: var(--gray-80); color: var(--white); } .btn-secondary::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-secondary:hover { background: var(--gray-70); } .btn-tertiary { background: transparent; color: var(--blue-60); border-color: var(--blue-60); } .btn-tertiary::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-tertiary:hover { background: var(--blue-60); color: var(--white); } .btn-tertiary:hover::after { background-image: url("data:image/svg+xml;utf8,"); } .btn-no-chevron { padding: 0 16px; justify-content: flex-start; } .btn-no-chevron::after { content: none; } /* ---------- SECTIONS ---------- */ section { padding: 96px 32px; } .container { max-width: 1056px; margin: 0 auto; } .layer-01 { background: var(--gray-10); } /* Universal hairline divider between sections. See DESIGN.md → Section Rules. Adjacent same-colour sections rely on this for separation. */ section + section { border-top: 1px solid var(--gray-20); } /* Section header — h2 + optional lead paragraph + a 1px Gray 20 underline that extends only as wide as the longest text line in the block (h2 or subtitle, whichever is wider). The underline is the structural transition between "what this section is" and "the content"; tying it to the text rather than the container makes it feel typographic rather than arbitrary. Universal across every section on the site. */ .section-header { width: fit-content; max-width: 100%; margin-bottom: 56px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-20); } .section-header h2 { font-size: 2rem; font-weight: 400; line-height: 1.25; color: var(--gray-100); margin-bottom: 16px; max-width: 720px; } .section-header p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); max-width: 720px; } /* ---------- URGENCY ---------- */ .urgency-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } .urgency-grid h2 { font-size: 2.625rem; font-weight: 300; line-height: 1.19; color: var(--gray-100); margin-bottom: 24px; } .urgency-grid p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); margin-bottom: 16px; } .deadline-tile { background: var(--white); border-left: 2px solid var(--blue-60); padding: 32px; } .deadline-tile .label { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; color: var(--gray-70); text-transform: uppercase; margin-bottom: 16px; } .deadline-tile .date { font-size: 3rem; font-weight: 300; line-height: 1.17; color: var(--gray-100); margin-bottom: 16px; } .deadline-tile .sub { font-size: 0.875rem; letter-spacing: 0.16px; color: var(--gray-70); line-height: 1.4; } /* ---------- HOW IT WORKS ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .step { background: var(--white); padding: 32px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--blue-60); color: var(--white); font-size: 1.5rem; font-weight: 300; margin-bottom: 24px; } .step h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin-bottom: 12px; letter-spacing: 0; } .step p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.4; color: var(--gray-70); } /* ---------- FIT CHECK (user-count self-select) ---------- */ .fit-check { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .fit-card { background: var(--white); padding: 32px; display: flex; flex-direction: column; } .fit-card-in { background: var(--gray-100); } .fit-band { font-size: 0.8125rem; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-60); margin-bottom: 12px; } .fit-card-in .fit-band { color: var(--gray-30); } .fit-verdict { font-size: 1.5rem; font-weight: 600; letter-spacing: 0; margin-bottom: 16px; color: var(--gray-70); } .fit-card-in .fit-verdict { color: var(--white); } .fit-card-in .fit-verdict::after { content: ""; display: block; width: 32px; height: 3px; background: var(--blue-60); margin-top: 12px; } .fit-card p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.5; color: var(--gray-70); margin-bottom: 0; } .fit-card-in p { color: var(--gray-30); } .fit-cta { display: inline-block; margin-top: 20px; color: var(--blue-60); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.16px; border-bottom: 1px solid var(--blue-60); padding-bottom: 2px; align-self: flex-start; } .fit-cta:hover { color: var(--blue-60-hover); border-bottom-color: var(--blue-60-hover); } /* Dark card needs a hover that goes brighter, not darker, against gray-100 */ .fit-card-in .fit-cta:hover { color: var(--white); border-bottom-color: var(--white); } @media (max-width: 768px) { .fit-check { grid-template-columns: 1fr; } } /* ---------- BLOG & POSTS ---------- */ .hero-compact { padding: 144px 32px 64px; } .hero-compact h1 { font-size: clamp(2rem, 4vw, 3rem); } .hero-compact p { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────── Blog-post heroes — full-bleed editorial artwork behind title. Uses the same data-hero structure as the homepage hero, but the "image" is a procedurally generated SVG artwork (hero-art) tied to the post's topic. Title overlays on a dark gradient scrim. Each artwork's focal element sits to the right of centre so the title overlay (max ~640px wide, left-aligned) doesn't fight it. ───────────────────────────────────────────────────────────── */ .hero[data-hero^="post-"] { /* shorter than homepage cinema-poster; tall enough to be a hero */ min-height: 560px; padding: 96px 0 0; } .hero[data-hero^="post-"] .hero-art { position: absolute; inset: 48px 0 0 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 100% at 80% 50%, #1f3050 0%, #0c1424 60%, #06090f 100%); } .hero[data-hero^="post-"] .hero-art-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .hero[data-hero^="post-"] .hero-art-corner { position: absolute; top: 32px; right: 32px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; text-transform: uppercase; } .hero[data-hero^="post-"] .hero-art-corner .blink { display: inline-block; width: 6px; height: 6px; background: var(--copper-30); border-radius: 50%; box-shadow: 0 0 8px var(--copper-60); margin-right: 8px; vertical-align: middle; animation: pstn-blink 1.6s steps(2, end) infinite; } .hero[data-hero^="post-"] .hero-art-badge { position: absolute; bottom: 32px; right: 32px; font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(15, 98, 254, 0.85); padding: 4px 8px; border-radius: 24px; letter-spacing: 0.08em; } /* ── Waveform hero — mirrored trace across full width ── */ .hero-art-waveform .hero-art-wave { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(15, 98, 254, 0.55)); } .hero-art-waveform .hero-art-wave .axis { stroke: rgba(255, 255, 255, 0.08); stroke-width: 0.7; stroke-dasharray: 3 6; } .hero-art-waveform .hero-art-wave polyline { fill: none; stroke: #5a9bff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── PSTN hero — huge Jan 2027 display on the right ── */ .hero-art-pstn::after { content: ""; position: absolute; width: 50%; height: 70%; right: 0; bottom: -10%; background: radial-gradient(circle, rgba(198,106,58,0.32), transparent 60%); filter: blur(36px); pointer-events: none; } .hero-art-pstn .hero-art-pstn-display { position: absolute; top: 50%; right: clamp(48px, 8vw, 128px); transform: translateY(-50%); text-align: right; z-index: 2; } .hero-art-pstn .hero-art-pstn-date { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(80px, 12vw, 180px); line-height: 0.95; letter-spacing: -0.01em; color: #fff; } .hero-art-pstn .hero-art-pstn-sub { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--copper-30); margin-top: 16px; letter-spacing: 0.18em; text-transform: uppercase; } .hero-art-pstn .hero-art-pstn-rule { height: 1px; width: 200px; margin: 16px 0 0 auto; background: linear-gradient(to left, var(--copper-60) 0%, transparent 100%); } /* ── Pricing hero — copper-cream ground, £ + line items right side ── */ .hero[data-hero="post-pricing"] .hero-art { background: radial-gradient(120% 100% at 75% 50%, var(--copper-60) 0%, var(--copper-30) 35%, var(--copper-tint) 75%, #f9f3e2 100%); } .hero[data-hero="post-pricing"] .hero-art-grid { display: none; } .hero[data-hero="post-pricing"] .hero-art-corner { color: rgba(22,22,22,0.55); } .hero[data-hero="post-pricing"] .hero-art-badge { background: var(--gray-100); color: #fff; } .hero-art-pricing-dotgrid { position: absolute; inset: 0; background-image: radial-gradient(rgba(22,22,22,0.07) 1px, transparent 1px); background-size: 14px 14px; mask-image: linear-gradient(to right, transparent 0%, black 40%, black 100%); pointer-events: none; } .hero-art-pricing .hero-art-pricing-display { position: absolute; top: 50%; right: clamp(48px, 8vw, 128px); transform: translateY(-50%); display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); z-index: 2; } .hero-art-pricing .hero-art-pound { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(120px, 16vw, 240px); line-height: 0.9; color: var(--gray-100); } .hero-art-pricing .hero-art-lines { list-style: none; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--gray-80); letter-spacing: 0.05em; min-width: 240px; } .hero-art-pricing .hero-art-lines li { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 6px 0; border-top: 1px solid rgba(22,22,22,0.2); text-transform: uppercase; } .hero-art-pricing .hero-art-lines li:first-child { border-top: 0; } .hero-art-pricing .hero-art-lines .val { color: var(--gray-100); font-weight: 500; } /* Title-overlay scrim. Stronger from the left to keep text legible. */ .hero[data-hero^="post-"]::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(22, 22, 22, 0.92) 0%, rgba(22, 22, 22, 0.7) 30%, rgba(22, 22, 22, 0.25) 55%, rgba(22, 22, 22, 0) 75% ); z-index: 1; pointer-events: none; } /* Light-ground hero (pricing) needs a different scrim direction — keep the left dark for white text, fade copper ground in on the right. */ .hero[data-hero="post-pricing"]::after { background: linear-gradient( 105deg, rgba(22, 22, 22, 0.92) 0%, rgba(22, 22, 22, 0.72) 30%, rgba(22, 22, 22, 0.3) 55%, rgba(22, 22, 22, 0) 75% ); } .hero[data-hero^="post-"] .hero-inner { position: relative; z-index: 2; max-width: 1056px; margin: 0 auto; width: 100%; padding: 0 32px; } @media (min-width: 769px) { .hero[data-hero^="post-"] .hero-inner { padding-right: clamp(280px, 40vw, 560px); } } .hero[data-hero^="post-"] .hero-eyebrow a { color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .hero[data-hero^="post-"] h1 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 300; line-height: 1.15; text-wrap: balance; margin-bottom: 24px; } .hero[data-hero^="post-"] h1 em { color: var(--white); font-style: normal; font-weight: 600; } .hero[data-hero^="post-"] .post-meta { color: rgba(255, 255, 255, 0.65); } /* ── Mobile: stack vertically. Artwork occupies upper half, title locks to the bottom of the hero in the dark scrim band. ── */ @media (max-width: 768px) { .hero[data-hero^="post-"] { min-height: 640px; align-items: flex-end; padding: 96px 0 56px; } .hero[data-hero^="post-"] .hero-inner { padding: 0 24px; } /* PSTN — date moves to upper-centre, smaller scale */ .hero-art-pstn .hero-art-pstn-display { top: 96px; bottom: auto; left: 24px; right: 24px; transform: none; text-align: center; } .hero-art-pstn .hero-art-pstn-date { font-size: clamp(56px, 16vw, 88px); } .hero-art-pstn .hero-art-pstn-sub { font-size: 11px; margin-top: 12px; } .hero-art-pstn .hero-art-pstn-rule { width: 140px; margin: 12px auto 0; background: linear-gradient(to right, transparent 0%, var(--copper-60) 50%, transparent 100%); } /* Pricing — £ on its own in upper-centre, drop the line-items table */ .hero-art-pricing .hero-art-pricing-display { top: 96px; bottom: auto; left: 24px; right: 24px; transform: none; justify-content: center; } .hero-art-pricing .hero-art-lines { display: none; } .hero-art-pricing .hero-art-pound { font-size: clamp(120px, 32vw, 180px); } /* Waveform stays centred — it already fills the width gracefully */ /* Scrim flips to top-to-bottom: clear at the top (artwork visible), dark at the bottom (where the title locks). */ .hero[data-hero^="post-"]::after { background: linear-gradient( to top, rgba(22, 22, 22, 0.95) 0%, rgba(22, 22, 22, 0.85) 25%, rgba(22, 22, 22, 0.4) 55%, rgba(22, 22, 22, 0) 85% ); } .hero[data-hero="post-pricing"]::after { background: linear-gradient( to top, rgba(22, 22, 22, 0.95) 0%, rgba(22, 22, 22, 0.85) 25%, rgba(22, 22, 22, 0.45) 55%, rgba(22, 22, 22, 0) 85% ); } } .post-meta { font-size: 0.875rem; color: var(--gray-60); letter-spacing: 0.16px; margin-top: 8px; } .post-meta-sep { margin: 0 8px; color: var(--gray-30); } /* Blog index — white-card rows with hairline divides. Each post is a compact white box: ~220px square artwork on the left, content stack on the right. The gray-20 background under `gap: 1px` paints the hairlines between cards; the outer border frames the stack. */ .blog-list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } /* The whole card is one link. Hover shifts ground to gray-10-hover, title to Blue 60, and the trailing arrow slides in by ~4px. */ .blog-card { background: var(--white); padding: 32px 40px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; color: inherit; text-decoration: none; transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } .blog-card:hover { background: var(--gray-10-hover); } .blog-card:focus-visible { outline: 2px solid var(--blue-60); outline-offset: -2px; } .blog-card-art { display: block; width: 100%; } .blog-card-art .resource-art { width: 100%; aspect-ratio: 1 / 1; } .blog-card-meta { font-size: 0.8125rem; letter-spacing: 0.32px; text-transform: uppercase; color: var(--gray-60); margin-bottom: 12px; } .blog-card-sep { margin: 0 8px; color: var(--gray-30); } .blog-card h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--gray-100); margin: 0 0 12px; letter-spacing: 0; transition: color 150ms cubic-bezier(0.2, 0, 0.38, 0.9); } .blog-card:hover h2 { color: var(--blue-60); } .blog-card p { font-size: 1rem; line-height: 1.5; color: var(--gray-70); margin: 0 0 16px; max-width: 60ch; } .blog-card-more { display: inline-block; color: var(--blue-60); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.16px; } .blog-card-more .arrow { display: inline-block; transition: transform 240ms cubic-bezier(0, 0, 0.3, 1); } .blog-card:hover .blog-card-more .arrow { transform: translateX(4px); } @media (max-width: 720px) { .blog-card { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; } .blog-card-art { max-width: 280px; } } .post-body { max-width: 720px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.65; color: var(--gray-90); } .post-body .post-lede { font-size: 1.25rem; line-height: 1.55; color: var(--gray-100); margin-bottom: 28px; } .post-body p { margin: 0 0 20px; } .post-body h2 { font-size: 1.625rem; font-weight: 600; color: var(--gray-100); margin: 48px 0 16px; letter-spacing: 0; } .post-body h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin: 32px 0 12px; } .post-body ol, .post-body ul { margin: 0 0 24px; padding-left: 28px; } .post-body li { margin-bottom: 10px; } .post-body a { color: var(--blue-60); border-bottom: 1px solid var(--blue-60); } .post-body a:hover { color: var(--blue-70); border-bottom-color: var(--blue-70); } .post-body strong { font-weight: 600; color: var(--gray-100); } .post-blockquote { margin: 32px 0; padding: 24px 28px; background: var(--gray-10); border-left: 4px solid var(--blue-60); font-size: 1.0625rem; font-style: italic; color: var(--gray-90); } .post-table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 0.9375rem; } .post-table th, .post-table td { border-bottom: 1px solid var(--gray-20); padding: 12px 16px; text-align: left; vertical-align: top; } .post-table th { background: var(--gray-10); font-weight: 600; color: var(--gray-100); letter-spacing: 0.16px; } .post-table tbody tr:hover { background: var(--gray-10); } @media (max-width: 768px) { .blog-card { padding: 32px 24px; } .post-body { font-size: 1rem; } .post-body .post-lede { font-size: 1.125rem; } .post-body h2 { font-size: 1.375rem; } } /* ---------- FEATURES ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); } .feature { background: var(--white); padding: 24px; transition: background-color 0.1s; position: relative; } .feature::before { content: ''; display: block; width: 24px; height: 2px; background: var(--blue-60); margin-bottom: 16px; } .feature:hover { background: var(--gray-10-hover); } .feature h3 { font-size: 1.25rem; font-weight: 600; color: var(--gray-100); margin-bottom: 8px; } .feature p { font-size: 0.875rem; letter-spacing: 0.16px; line-height: 1.4; color: var(--gray-70); } /* ---------- WHY US ---------- */ /* Founder block: quote + attribution as a single card. White surface on section ground, 2px Blue 60 left border, Gray 20 frame on the other sides. Attribution lives inside the card as a