/* ========================================================================== Next Curve Partners — design system Deep navy foundation, crisp white space, electric-blue accent used only for CTAs and the rising second curve. ========================================================================== */ :root { --navy: #0b1220; --navy-2: #101c30; --navy-3: #16233a; --white: #ffffff; --offwhite: #f5f6f8; --ink: #16202b; --muted: #4d5b6b; --line: #dfe3e8; --grey-curve: #9aa5b1; --accent: #2454ff; --accent-dark: #173bcf; --accent-tint: #eaf0ff; --font-head: "Space Grotesk", "Arial Narrow", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --container: 1180px; --gap: clamp(1.25rem, 2vw, 2rem); --radius: 10px; --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06); --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.12); --shadow-lg: 0 16px 48px rgba(11, 18, 32, 0.18); --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: inherit; } ul { list-style: none; margin: 0; padding: 0; } button { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 0.6em; color: var(--navy); letter-spacing: -0.01em; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } section { padding-block: clamp(4rem, 8vw, 7rem); } /* ---------- Motion ---------- */ /* The opacity:0 starting states below are scoped to html.js, which is only added by an inline script that runs before body paint (see ). If JavaScript is blocked, slow, or fails, html.js never appears and every section renders fully visible instead of staying hidden forever. */ @media (prefers-reduced-motion: no-preference) { :where(html.js) [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } :where(html.js) .curve-path--rising { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease); } :where(html.js) .curve-path--plateau { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.2s var(--ease); } .curve-graphic.is-visible .curve-path--plateau { stroke-dashoffset: 0; } .curve-graphic.is-visible .curve-path--rising { stroke-dashoffset: 0; transition-delay: 0.5s; } :where(html.js) .curve-jump-marker { opacity: 0; transition: opacity 0.6s var(--ease) 1.4s; } .curve-graphic.is-visible .curve-jump-marker { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Focus states ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -999px; top: auto; background: var(--accent); color: var(--white); padding: 0.75em 1.25em; z-index: 1000; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; top: 0; } /* ---------- Eyebrow / labels ---------- */ .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9em; } .eyebrow--on-dark { color: #8fb0ff; } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); } .section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; padding: 0.9em 1.6em; border-radius: 6px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--accent); color: var(--white); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--accent-dark); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; border-color: currentColor; color: var(--navy); } .btn--ghost:hover { background: var(--navy); color: var(--white); } .btn--on-dark { border-color: rgba(255, 255, 255, 0.5); color: var(--white); } .btn--on-dark:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); } .btn--block { width: 100%; } .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 500; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .site-header .container { max-width: 1360px; } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; } .brand { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); flex-shrink: 0; } .brand__mark { width: 34px; height: 34px; flex-shrink: 0; } .main-nav { display: none; } .main-nav ul { display: flex; align-items: center; gap: 1.15rem; } .main-nav a { text-decoration: none; font-weight: 600; font-size: 0.87rem; color: var(--ink); padding: 0.4em 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .main-nav a:hover { color: var(--accent); border-color: var(--accent); } .site-header__cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; display: block; width: 20px; height: 2px; background: var(--navy); position: relative; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } .nav-toggle__bars::before { position: absolute; top: -6px; } .nav-toggle__bars::after { position: absolute; top: 6px; } html.nav-open .nav-toggle__bars { background: transparent; } html.nav-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); } html.nav-open .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); } /* Sits as a sibling of .site-header (not nested inside it): the header's backdrop-filter creates a containing block for fixed descendants, which would otherwise size this panel against the header's own small box instead of the viewport. */ .mobile-nav { display: none; position: fixed; inset: 0; top: 65px; background: var(--white); z-index: 400; padding: 1.5rem; overflow-y: auto; } html.nav-open .mobile-nav { display: block; } .mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; } .mobile-nav a:not(.btn) { display: block; padding: 0.9rem 0.25rem; font-weight: 600; font-size: 1.1rem; text-decoration: none; border-bottom: 1px solid var(--line); color: var(--navy); } .mobile-nav .btn { margin-top: 1.25rem; } @media (min-width: 1240px) { .main-nav { display: block; } .site-header__cta { display: inline-flex; } .nav-toggle { display: none; } .mobile-nav { display: none !important; } } /* ---------- Hero ---------- */ .hero { padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 5rem); background: linear-gradient(180deg, var(--offwhite) 0%, var(--white) 100%); } .hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; } .hero__content h1 { font-size: clamp(2.25rem, 5.5vw, 3.6rem); margin-bottom: 0.5em; } .hero__subhead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 40rem; margin-bottom: 1.75em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .hero__proof { font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.25rem; max-width: 32rem; } .hero__visual { min-width: 0; } @media (min-width: 960px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } } /* ---------- Curve graphic ---------- */ .curve-graphic { width: 100%; height: auto; } .curve-path--plateau { fill: none; stroke: var(--grey-curve); stroke-width: 5; stroke-linecap: round; } .curve-path--rising { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; } .curve-dot { fill: var(--accent); } .curve-dot--muted { fill: var(--grey-curve); } .curve-label { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; } .curve-label--muted { fill: var(--muted); } .curve-label--accent { fill: var(--accent-dark); } .curve-jump-marker text { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; fill: var(--navy); } .curve-jump-marker line { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 4; } /* ---------- Problem section ---------- */ .problem { background: var(--white); } .symptom-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 720px) { .symptom-grid { grid-template-columns: repeat(2, 1fr); } } .symptom-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; background: var(--offwhite); } .symptom-card__icon { width: 40px; height: 40px; color: var(--accent); margin-bottom: 1rem; } .symptom-card h3 { font-size: 1.1rem; margin-bottom: 0.4em; } .symptom-card p { color: var(--muted); margin-bottom: 0; font-size: 0.98rem; } .pivot-line { border-left: 4px solid var(--accent); padding: 1.25rem 1.75rem; background: var(--accent-tint); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-head); font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--navy); max-width: 46rem; } /* ---------- Four P's ---------- */ .approach { background: var(--offwhite); } .approach__link { text-align: center; margin-top: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0; color: var(--muted); } .approach__link a { color: var(--accent); font-weight: 600; text-decoration: none; } .approach__link a:hover { text-decoration: underline; } .p-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .p-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .p-grid { grid-template-columns: repeat(4, 1fr); } } .p-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); padding: 2rem 1.75rem; position: relative; overflow: hidden; } .p-card::before { content: attr(data-letter); position: absolute; top: -0.35em; right: 0.1em; font-family: var(--font-head); font-size: 5rem; font-weight: 700; color: var(--offwhite); z-index: 0; line-height: 1; } .p-card > * { position: relative; z-index: 1; } .p-card__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5em; } .p-card h3 { font-size: 1.3rem; margin-bottom: 0.5em; } .p-card p { color: var(--muted); font-size: 0.96rem; margin-bottom: 0; } /* ---------- Sectors ---------- */ .sector-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .sector-grid { grid-template-columns: repeat(4, 1fr); } } .sector-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .sector-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); } .sector-card h3 { font-size: 1.05rem; margin-bottom: 0.4em; } .sector-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; } /* ---------- Why us ---------- */ .why { background: var(--navy); color: var(--white); } .why .section-head h2 { color: var(--white); } .why .section-head p { color: #b7c1d1; } .why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); } @media (min-width: 900px) { .why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .why__intro p { color: #c7cfdb; font-size: 1.05rem; } .credibility-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .credibility-list li { display: flex; gap: 0.75em; align-items: flex-start; font-size: 0.98rem; color: #dbe2ec; } .credibility-list svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--accent); margin-top: 0.2em; } .placeholder-tag { display: inline-block; max-width: 100%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a9b4c4; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 0.15em 0.5em; margin-top: 0.4em; overflow-wrap: anywhere; } .logo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.5rem; } @media (min-width: 500px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } } .logo-strip__item { position: relative; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); border-radius: 6px; min-width: 0; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.9rem; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .logo-strip__item:hover, .logo-strip__item:focus-within { background: var(--white); border-color: var(--white); } .logo-strip__img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 0.2s var(--ease); } .logo-strip__img--color { position: absolute; inset: 0.6rem 0.9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.2rem); opacity: 0; } .logo-strip__item:hover .logo-strip__img--mono, .logo-strip__item:focus-within .logo-strip__img--mono { opacity: 0; } .logo-strip__item:hover .logo-strip__img--color, .logo-strip__item:focus-within .logo-strip__img--color { opacity: 1; } @media (prefers-reduced-motion: reduce) { .logo-strip__item, .logo-strip__img { transition: none; } } .testimonial-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; } @media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } .testimonial-card { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); border-radius: var(--radius); padding: 1.5rem; } .testimonial-card blockquote { margin: 0 0 0.9em; font-size: 0.98rem; color: #dbe2ec; font-style: italic; } .testimonial-card cite { font-style: normal; font-size: 0.85rem; color: #8b97aa; } .testimonial-card__byline { display: flex; align-items: center; gap: 0.75rem; } .testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* ---------- How it works ---------- */ .steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step-card { position: relative; padding: 2rem 1.75rem 1.75rem; border-radius: var(--radius); background: var(--offwhite); border: 1px solid var(--line); } .step-card__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; margin-bottom: 1rem; } .step-card h3 { font-size: 1.15rem; margin-bottom: 0.4em; } .step-card p { color: var(--muted); margin-bottom: 0; font-size: 0.96rem; } /* ---------- Final CTA ---------- */ .final-cta { background: var(--navy); color: var(--white); position: relative; overflow: hidden; } .final-cta__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 960px) { .final-cta__grid { grid-template-columns: 1fr 1fr; } } .final-cta__intro h2 { color: var(--white); font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.3em; } .final-cta__intro .accent-line { color: #8fb0ff; display: block; } .final-cta__intro p { color: #c7cfdb; font-size: 1.05rem; max-width: 30rem; } .calendly-embed { border-radius: var(--radius); overflow: hidden; margin-top: 1.75rem; background: var(--white); } /* ---------- Contact form ---------- */ .contact-card { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-lg); } .contact-card h3 { font-size: 1.3rem; margin-bottom: 0.2em; } .contact-card__sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.5em; } .form-field { margin-bottom: 1.1rem; } .form-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.4em; } .form-field input, .form-field textarea { width: 100%; padding: 0.75em 0.9em; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--ink); background: var(--white); } .form-field textarea { resize: vertical; min-height: 96px; } .form-field input:invalid[data-touched="true"], .form-field.has-error input, .form-field.has-error textarea { border-color: #d13438; } .form-error { display: none; color: #d13438; font-size: 0.82rem; margin-top: 0.35em; } .form-field.has-error .form-error { display: block; } .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: 1rem; font-size: 0.92rem; border-radius: 6px; padding: 0.85em 1em; display: none; } .form-status.is-visible { display: block; } .form-status--success { background: #e6f6ec; color: #146c34; } .form-status--error { background: #fdeceb; color: #a3231f; } .contact-form.is-submitted .contact-form__fields { display: none; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-2); color: #a9b4c4; padding-block: 3rem; font-size: 0.9rem; } .site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1.5rem; } .site-footer .brand { color: var(--white); } .footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; } .footer-links__group h4 { color: var(--white); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75em; } .footer-links__group ul { display: flex; flex-direction: column; gap: 0.5rem; } .footer-links__group a { text-decoration: none; color: #a9b4c4; } .footer-links__group a:hover { color: var(--white); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: #7c879a; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Simple page header (insights / privacy) ---------- */ .page-hero { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3rem); background: var(--offwhite); } .page-hero h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); } .page-hero p { color: var(--muted); max-width: 40rem; font-size: 1.05rem; } .post-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .section-footnote { margin-top: 2.5rem; } @media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } .post-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; } .post-card__tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 4px; padding: 0.2em 0.6em; margin-bottom: 0.9em; } .post-card h2 { font-size: 1.2rem; margin-bottom: 0.4em; } .post-card h2 a { color: var(--navy); text-decoration: none; } .post-card h2 a:hover { color: var(--accent); text-decoration: underline; } .post-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0; } .legal { max-width: 46rem; } .legal h2 { font-size: 1.3rem; margin-top: 1.75em; } .legal p, .legal li { color: var(--muted); font-size: 0.98rem; } .legal ul { list-style: disc; padding-left: 1.25em; margin-bottom: 1em; } .legal li { margin-bottom: 0.4em; } .legal .callout { background: var(--accent-tint); border-left: 4px solid var(--accent); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; font-size: 0.92rem; color: var(--navy); } /* ---------- Blog article ---------- */ .article-hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); background: var(--offwhite); } .article-hero__pillar { display: inline-block; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9em; } .article-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); max-width: 42rem; } .article-hero__meta { color: var(--muted); font-size: 0.92rem; margin-top: 0.5em; } .article-hero__visual { margin-top: clamp(1.5rem, 4vw, 2.5rem); max-width: 720px; } .article { max-width: 42rem; margin-inline: auto; } .article h2 { font-size: 1.4rem; margin-top: 1.85em; } .article h3 { font-size: 1.1rem; margin-top: 1.5em; } .article p, .article li { color: var(--ink); font-size: 1.05rem; line-height: 1.7; } .article ul, .article ol { padding-left: 1.25em; margin-bottom: 1.2em; } .article ul { list-style: disc; } .article ol { list-style: decimal; } .article li { margin-bottom: 0.5em; } .article strong { color: var(--navy); } .article__lead { font-size: 1.2rem; color: var(--navy); font-weight: 600; line-height: 1.55; } /* TL;DR callout */ .tldr-box { background: var(--accent-tint); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 1.75em 0; } .tldr-box__label { display: block; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.7em; } .tldr-box ul { margin-bottom: 0; padding-left: 1.1em; } .tldr-box li { color: var(--navy); font-weight: 600; font-size: 1rem; } /* Vendor recommendation callout — Tech Partners category pages */ .vendor-pick { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 1.75rem 2rem; margin: 1.75em 0; } .vendor-pick__label { display: block; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.6em; } .vendor-pick h3 { margin-bottom: 0.5em; } .vendor-pick p { color: var(--muted); } .vendor-pick p:last-child { margin-bottom: 0; } .vendor-pick__not-for { font-size: 0.92rem; padding-top: 0.75em; margin-top: 0.75em; border-top: 1px solid var(--line); } .vendor-pick__not-for strong { color: var(--navy); } /* Hard-truth callout */ .hard-truth { background: var(--offwhite); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 1.25rem 1.5rem; margin: 1.75em 0; } .hard-truth__label { display: block; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.5em; } .hard-truth p { margin-bottom: 0; font-weight: 600; color: var(--navy); } /* Pull quote */ .pull-quote { margin: 2.25em 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--accent); } .pull-quote p { font-family: var(--font-head); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 0; } /* Calling It Straight — recurring branded segment */ .spade-section { background: var(--navy); border-radius: var(--radius); padding: 1.75rem 2rem; margin: 2.5em 0; } .spade-section__label { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8fb0ff; margin-bottom: 0.75em; } .spade-section p { color: #f5f7fa; font-size: 1.05rem; margin-bottom: 0; } .spade-section p:last-child { margin-bottom: 0; } /* Infographic container */ .infographic { margin: 2em 0; padding: 1.5rem; background: var(--offwhite); border: 1px solid var(--line); border-radius: var(--radius); } .infographic svg { width: 100%; height: auto; } .infographic__caption { margin-top: 0.9em; margin-bottom: 0; font-size: 0.82rem; color: var(--muted); text-align: center; } /* FAQ block */ .faq-block { margin: 2em 0; } .faq-item { border-top: 1px solid var(--line); padding: 1.25rem 0; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item h3 { font-size: 1.05rem; margin-top: 0; margin-bottom: 0.4em; } .faq-item p { color: var(--muted); font-size: 0.98rem; margin-bottom: 0; } /* In-article CTA */ .article-cta { background: var(--navy); border-radius: var(--radius); padding: 2rem; margin: 2.5em 0; text-align: center; } .article-cta p { color: #c7cfdb; margin-bottom: 1.25em; } .article-cta p:last-of-type { margin-bottom: 1.25em; } /* Author bio */ .author-bio { display: flex; align-items: center; gap: 1rem; margin: 2.5em 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); } .author-bio__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .author-bio__name { font-weight: 700; color: var(--navy); display: block; margin-bottom: 0.2em; } .author-bio__credential { color: var(--muted); font-size: 0.92rem; display: block; margin-bottom: 0.4em; } .author-bio__link { font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; } .author-bio__link:hover { text-decoration: underline; } /* Internal links list */ .article-links { margin: 2em 0; font-size: 0.98rem; } .article-links a { color: var(--accent-dark); font-weight: 600; } /* ---------- Curve Diagnostic tool ---------- */ .diagnostic { margin: 2em 0; } .diagnostic-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 1.5rem 1.25rem; margin-bottom: 1.25rem; } .diagnostic-group legend { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); padding: 0 0.4rem; } .diagnostic-q { padding: 1rem 0; border-top: 1px solid var(--line); } .diagnostic-group .diagnostic-q:first-of-type { border-top: none; } .diagnostic-q p { font-weight: 600; color: var(--navy); margin-bottom: 0.6em; font-size: 0.96rem; } .diagnostic-options { display: flex; gap: 1.5rem; flex-wrap: wrap; } .diagnostic-options label { display: flex; align-items: center; gap: 0.4em; font-size: 0.92rem; color: var(--muted); cursor: pointer; } .diagnostic-error { display: none; color: #d13438; font-size: 0.9rem; margin-top: 0.75rem; } .diagnostic-error.is-visible { display: block; } .diagnostic-result { display: none; margin-top: 2rem; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--navy); border-radius: var(--radius); color: var(--white); text-align: center; /* The sticky header overlays the viewport top, so a plain scrollIntoView() would tuck this panel's score right under the frosted-glass header. scroll-margin-top keeps it clear regardless of how it's scrolled to. */ scroll-margin-top: 100px; } .diagnostic-result.is-visible { display: block; } .diagnostic-result__score { display: block; font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; color: var(--white); } .diagnostic-result .diagnostic-result__band { font-size: 1.3rem; font-weight: 700; color: #8fb0ff; margin-top: 0.3em; margin-bottom: 0.6em; } .diagnostic-result .diagnostic-result__text { color: #c7cfdb; max-width: 34rem; margin-inline: auto; margin-bottom: 1.75rem; } .diagnostic-result .calendly-embed { text-align: left; } /* Diagnostic result: curve visual + per-pillar breakdown */ .diagnostic-result__curve { position: relative; max-width: 520px; margin: 0 auto 2rem; } .diagnostic-result__curve svg { width: 100%; height: auto; } .diagnostic-result__marker { opacity: 0; transition: opacity 0.4s var(--ease); } .diagnostic-result__marker.is-visible { opacity: 1; } .diagnostic-breakdown { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1.75rem; text-align: left; } @media (min-width: 700px) { .diagnostic-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .diagnostic-breakdown__item { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .diagnostic-breakdown__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5em; } .diagnostic-breakdown__name { font-family: var(--font-head); font-weight: 700; color: var(--white); font-size: 1rem; } .diagnostic-breakdown__meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .diagnostic-breakdown__score { font-size: 0.82rem; color: #a9b4c4; } .diagnostic-breakdown__badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2em 0.55em; border-radius: 4px; } .diagnostic-breakdown__badge--strong { background: var(--accent); color: var(--white); } .diagnostic-breakdown__badge--mixed { background: rgba(255, 255, 255, 0.16); color: #dbe2ec; } .diagnostic-breakdown__badge--strained { background: transparent; color: #8fb0ff; border: 1px solid #8fb0ff; } .diagnostic-breakdown .diagnostic-breakdown__text { color: #c7cfdb; font-size: 0.9rem; margin-bottom: 0; } /* ---------- Method journey (Working Backwards) ---------- */ .method-intro { max-width: 46rem; } .method-intro .article__lead { margin-bottom: 0.9em; } .method-intro--tight { margin-top: clamp(2rem, 4vw, 2.5rem); } .method-intro--tight h2, .method-intro--tight h3 { font-size: 1.15rem; } .method-journey { counter-reset: stage; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .method-stage { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(2rem, 5vw, 3rem); } .method-stage:last-child { padding-bottom: 0; } .method-stage__rail { display: flex; flex-direction: column; align-items: center; } .method-stage__num { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--navy); background: var(--white); flex-shrink: 0; } .method-stage__line { flex: 1; width: 2px; background: var(--line); margin-top: 0.5rem; } .method-stage:last-child .method-stage__line { display: none; } .method-stage--destination .method-stage__num { background: var(--navy); border-color: var(--navy); color: var(--white); } .method-stage__badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 4px; padding: 0.2em 0.6em; margin-bottom: 0.75em; } .method-stage__body h3 { font-size: 1.3rem; margin-bottom: 0.4em; } .method-stage__body p { color: var(--muted); margin-bottom: 0; max-width: 42rem; } .method-stage__body .method-stage__link { margin-top: 0.6em; } .method-stage__link a { color: var(--accent); font-weight: 600; text-decoration: none; } .method-stage__link a:hover { text-decoration: underline; } .next-step-panel { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--navy); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.5rem); color: var(--white); } .next-step-panel h3 { color: var(--white); font-size: 1.4rem; } .next-step-panel p { color: #c7cfdb; max-width: 40rem; } .next-step-panel p a { color: #8fb0ff; text-decoration: underline; } .next-step-panel .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; } @media (min-width: 640px) { .method-stage { grid-template-columns: 4rem 1fr; } } /* ---------- Fractional engagements ---------- */ .rhythm-loop-note { text-align: center; color: var(--muted); font-size: 0.95rem; margin-top: 2rem; margin-bottom: 0; } .rhythm-loop-note__icon { display: inline-block; color: var(--accent); font-weight: 700; margin-right: 0.4em; } .tier-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } } .tier-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); padding: 2rem 1.75rem; display: flex; flex-direction: column; } .tier-card__cadence { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border-radius: 4px; padding: 0.25em 0.65em; margin-bottom: 1em; } .tier-card h3 { font-size: 1.25rem; margin-bottom: 0.5em; } .tier-card p { color: var(--muted); font-size: 0.95rem; } .tier-card .tier-card__for { font-weight: 600; color: var(--navy); } .tier-card .dot-list { margin-top: 0.75em; flex-grow: 1; } .dot-list { list-style: none; margin: 1em 0 0; padding: 0; } .dot-list li { position: relative; padding-left: 1.4em; font-size: 0.94rem; color: var(--muted); margin-bottom: 0.6em; } .dot-list li:last-child { margin-bottom: 0; } .dot-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Comparison table ---------- */ .compare-table-wrap { overflow-x: auto; margin: 2em 0; border-radius: var(--radius); border: 1px solid var(--line); } .compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.92rem; } .compare-table th, .compare-table td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .compare-table thead th { background: var(--offwhite); font-family: var(--font-head); color: var(--navy); font-size: 0.85rem; } .compare-table tbody th { font-weight: 600; color: var(--navy); background: var(--offwhite); white-space: nowrap; } .compare-table td { color: var(--muted); } .compare-table th.compare-table__highlight, .compare-table td.compare-table__highlight { background: var(--accent-tint); color: var(--navy); } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }