diff --git a/scripts/capture-home.mjs b/scripts/capture-home.mjs index f9069e13..060887eb 100644 --- a/scripts/capture-home.mjs +++ b/scripts/capture-home.mjs @@ -371,6 +371,26 @@ try { const stage = page.locator('#evidence .experiment-explorer'); await stage.scrollIntoViewIfNeeded(); const diagnostics = await page.evaluate(() => { + const sectionStyle = (node) => { + if (!(node instanceof HTMLElement)) return null; + const css = getComputedStyle(node); + return { + fontFamily: css.fontFamily, + fontSize: Number.parseFloat(css.fontSize), + fontWeight: css.fontWeight, + lineHeight: Number.parseFloat(css.lineHeight), + tracking: css.letterSpacing, + }; + }; + const sectionHeadings = [...document.querySelectorAll('[data-stage] .stage-heading')].map(sectionStyle); + const sectionIntros = [...document.querySelectorAll('[data-stage] .stage-intro')].map(sectionStyle); + const aboutHeading = sectionStyle(document.querySelector('#about-title')); + const aboutIntro = sectionStyle(document.querySelector('.about-summary')); + const heroHeading = sectionStyle(document.querySelector('.hero-heading')); + const cardHeadings = [ + '.card-headline', '.runtime-card__identity h4', '.value-headline', + '.mcb-model-card__name' + ].map(selector => sectionStyle(document.querySelector(selector))).filter(Boolean); const root = document.querySelector('#evidence .experiment-explorer'); const tabs = [...root.querySelectorAll('[data-experiment-tab]')]; const rail = root.querySelector('[data-experiment-rail]'); @@ -398,6 +418,7 @@ try { const titles = [...root.querySelectorAll('h3, h4, .experiment-mobile-chooser label')]; return { theme: document.documentElement.dataset.theme, + typographyAudit: { sectionHeadings, sectionIntros, aboutHeading, aboutIntro, heroHeading, cardHeadings }, pageOverflowPx: Math.max(0, document.documentElement.scrollWidth - window.innerWidth), selectedTab: tabs.find((t) => t.getAttribute('aria-selected') === 'true')?.dataset.trackId, publishedCount: tabs.filter((t) => t.dataset.published === 'true').length, @@ -498,6 +519,31 @@ try { measureChecks.push(check); if ( diagnostics.theme !== theme || + diagnostics.typographyAudit.sectionHeadings.length !== 4 || + diagnostics.typographyAudit.sectionIntros.length !== 4 || + diagnostics.typographyAudit.sectionHeadings.some(heading => + !heading?.fontFamily.includes('Plus Jakarta Sans') || heading.fontWeight !== '800' || + !Number.isFinite(heading.fontSize)) || + Math.max(...diagnostics.typographyAudit.sectionHeadings.map(heading => heading.fontSize)) - + Math.min(...diagnostics.typographyAudit.sectionHeadings.map(heading => heading.fontSize)) > 0.6 || + diagnostics.typographyAudit.sectionIntros.some(intro => + !intro?.fontFamily.includes('Inter') || intro.fontSize < 15) || + (viewport.width <= 760 && + Math.max(...diagnostics.typographyAudit.sectionIntros.map(intro => intro.fontSize)) - + Math.min(...diagnostics.typographyAudit.sectionIntros.map(intro => intro.fontSize)) > 0.6) || + !diagnostics.typographyAudit.aboutHeading?.fontFamily.includes('Plus Jakarta Sans') || + diagnostics.typographyAudit.aboutHeading.fontWeight !== '800' || + Math.abs(diagnostics.typographyAudit.aboutHeading.fontSize - + diagnostics.typographyAudit.sectionHeadings[0].fontSize) > 0.6 || + !diagnostics.typographyAudit.aboutIntro?.fontFamily.includes('Inter') || + (viewport.width <= 760 && Math.abs(diagnostics.typographyAudit.aboutIntro.fontSize - + diagnostics.typographyAudit.sectionIntros[0].fontSize) > 0.6) || + !diagnostics.typographyAudit.heroHeading?.fontFamily.includes('Plus Jakarta Sans') || + diagnostics.typographyAudit.heroHeading.fontWeight !== '800' || + diagnostics.typographyAudit.cardHeadings.length < 3 || + diagnostics.typographyAudit.cardHeadings.some(heading => + !heading.fontFamily.includes('Plus Jakarta Sans') || + !['700', '800'].includes(heading.fontWeight) || heading.fontSize < 17) || diagnostics.pageOverflowPx > 0 || diagnostics.publishedCount !== 3 || diagnostics.unpublishedCount !== 3 || diff --git a/src/components/landing/AboutSignal.astro b/src/components/landing/AboutSignal.astro index 4ae5063c..c20f3f78 100644 --- a/src/components/landing/AboutSignal.astro +++ b/src/components/landing/AboutSignal.astro @@ -135,10 +135,10 @@ const proofPoints = [ margin: 0 0 var(--space-4); color: var(--ink-display); font-family: var(--font-display); - font-size: clamp(1.75rem, 3.1vw, 2.95rem); - font-weight: 820; - letter-spacing: -0.042em; - line-height: 1.08; + font-size: var(--text-section-title); + font-weight: var(--weight-display); + letter-spacing: var(--tracking-section-title); + line-height: var(--leading-section-title); text-wrap: balance; } @@ -150,14 +150,14 @@ const proofPoints = [ max-width: 620px; margin: 0; color: var(--ink-muted); - font-size: clamp(1rem, 1.25vw, 1.12rem); + font-size: var(--text-section-intro); line-height: 1.6; text-wrap: pretty; } .about-summary strong { color: var(--ink-display); - font-weight: 720; + font-weight: var(--weight-heading); } .about-actions { @@ -293,7 +293,7 @@ const proofPoints = [ color: var(--accent-blue); font-family: var(--font-mono); font-size: var(--text-caption); - font-weight: 700; + font-weight: var(--weight-heading); } .proof-item h3 { @@ -301,7 +301,7 @@ const proofPoints = [ color: var(--ink-display); font-family: var(--font-display); font-size: 1rem; - font-weight: 780; + font-weight: var(--weight-display); line-height: 1.35; } @@ -362,7 +362,7 @@ const proofPoints = [ } .about-content h2 { - font-size: clamp(1.65rem, 8vw, 2.3rem); + font-size: var(--text-section-title-mobile); } .portrait-circle-wrapper { @@ -403,6 +403,14 @@ const proofPoints = [ } } + @media (max-width: 760px) { + .about-summary { font-size: var(--text-section-intro-mobile); } + } + + @media (min-width: 681px) and (max-width: 760px) { + .about-content h2 { font-size: var(--text-section-title-mobile); } + } + @media (prefers-reduced-motion: reduce) { .portrait-circle { transition: none; diff --git a/src/components/landing/BuildSystemsShowcase.astro b/src/components/landing/BuildSystemsShowcase.astro index 2c2d1f63..0a6f3535 100644 --- a/src/components/landing/BuildSystemsShowcase.astro +++ b/src/components/landing/BuildSystemsShowcase.astro @@ -187,7 +187,7 @@ const scopeFor = (id: string) => margin: 0; font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); letter-spacing: 0.11em; line-height: 1.4; text-transform: uppercase; @@ -273,7 +273,7 @@ const scopeFor = (id: string) => gap: 12px; color: var(--ink-subtle); font-size: var(--text-caption); - font-weight: 700; + font-weight: var(--weight-heading); line-height: 1.25; } @@ -295,7 +295,7 @@ const scopeFor = (id: string) => flex: 0 0 auto; color: var(--ink-subtle); font-size: var(--text-caption); - font-weight: 600; + font-weight: var(--weight-label); white-space: nowrap; } @@ -333,8 +333,8 @@ const scopeFor = (id: string) => .runtime-card__identity h4 { margin: 0; font-family: var(--font-display); - font-size: clamp(1.7rem, 3vw, 2.6rem); - font-weight: 800; + font-size: var(--text-feature-title); + font-weight: var(--weight-display); letter-spacing: -0.055em; line-height: 1.15; color: var(--ink-display); @@ -344,7 +344,7 @@ const scopeFor = (id: string) => margin: 0 0 9px; color: var(--ink-display); font-size: var(--text-body-sm); - font-weight: 700; + font-weight: var(--weight-heading); line-height: 1.45; } @@ -415,7 +415,7 @@ const scopeFor = (id: string) => color: var(--system-accent); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 750; + font-weight: var(--weight-heading); white-space: nowrap; } @@ -500,8 +500,8 @@ const scopeFor = (id: string) => .primitive__title { font-family: var(--font-display); - font-size: clamp(1.25rem, 2vw, 1.4rem); - font-weight: 800; + font-size: var(--text-card-title); + font-weight: var(--weight-display); letter-spacing: -0.045em; line-height: 1.2; } @@ -517,7 +517,7 @@ const scopeFor = (id: string) => margin-top: 9px; color: #b9cdec; font-size: var(--text-caption); - font-weight: 600; + font-weight: var(--weight-label); text-transform: capitalize; } diff --git a/src/components/landing/DecisionTable.astro b/src/components/landing/DecisionTable.astro index 5f0573db..b583b629 100644 --- a/src/components/landing/DecisionTable.astro +++ b/src/components/landing/DecisionTable.astro @@ -271,7 +271,7 @@ const modes: DeploymentMode[] = [ margin: 0 0 8px; font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); line-height: 1.35; letter-spacing: 0.08em; } @@ -283,8 +283,8 @@ const modes: DeploymentMode[] = [ margin: 0; max-width: 690px; font-family: var(--font-display); - font-size: clamp(1.14rem, 2.3vw, 1.55rem); - font-weight: 760; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); letter-spacing: -0.036em; line-height: 1.22; color: var(--ink-display); @@ -420,14 +420,14 @@ const modes: DeploymentMode[] = [ color: var(--ink-display); font-family: var(--font-display); font-size: 1.08rem; - font-weight: 800; + font-weight: var(--weight-display); line-height: 1.2; } .card-eyebrow { color: var(--ink-subtle); font-size: var(--text-caption); - font-weight: 640; + font-weight: var(--weight-label); line-height: 1.3; } @@ -436,7 +436,7 @@ const modes: DeploymentMode[] = [ color: var(--ink-subtle); font-family: var(--font-mono); font-size: var(--text-caption); - font-weight: 620; + font-weight: var(--weight-label); white-space: nowrap; } @@ -445,8 +445,8 @@ const modes: DeploymentMode[] = [ max-width: 360px; color: var(--decision-ink); font-family: var(--font-display); - font-size: clamp(1.5rem, 3.3vw, 2rem); - font-weight: 830; + font-size: var(--text-feature-title); + font-weight: var(--weight-display); line-height: 1.13; letter-spacing: -0.048em; text-wrap: pretty; @@ -487,7 +487,7 @@ const modes: DeploymentMode[] = [ .factor dt { color: var(--ink-subtle); - font-weight: 540; + font-weight: var(--weight-medium); } .factor dd { @@ -497,15 +497,15 @@ const modes: DeploymentMode[] = [ min-width: 0; margin: 0; color: var(--ink); - font-weight: 650; + font-weight: var(--weight-label); } .factor .factor--strength { color: var(--mode-accent); - font-weight: 750; + font-weight: var(--weight-heading); } - .factor-check { flex: 0 0 auto; font-weight: 850; } + .factor-check { flex: 0 0 auto; font-weight: var(--weight-display); } .card-conclusion { flex: 0 0 auto; @@ -525,7 +525,7 @@ const modes: DeploymentMode[] = [ color: var(--ink-display); font-family: var(--font-display); font-size: var(--text-body-sm); - font-weight: 730; + font-weight: var(--weight-heading); line-height: 1.42; } @@ -544,12 +544,12 @@ const modes: DeploymentMode[] = [ color: var(--ink-subtle); font-family: var(--font-mono); font-size: var(--text-caption); - font-weight: 600; + font-weight: var(--weight-label); } .rail-position strong { color: var(--ink-display); - font-weight: 800; + font-weight: var(--weight-display); } .rail-buttons { @@ -611,7 +611,7 @@ const modes: DeploymentMode[] = [ .decision-transition strong { color: var(--ink-display); - font-weight: 750; + font-weight: var(--weight-heading); } .transition-link { @@ -627,7 +627,7 @@ const modes: DeploymentMode[] = [ color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 770; + font-weight: var(--weight-heading); text-decoration: none; transition: background var(--duration-fast) ease; } diff --git a/src/components/landing/EvidenceStage.astro b/src/components/landing/EvidenceStage.astro index 5777dfcb..70c384dd 100644 --- a/src/components/landing/EvidenceStage.astro +++ b/src/components/landing/EvidenceStage.astro @@ -81,7 +81,7 @@ const experiments = measureStage.systems[0]; color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 820; + font-weight: var(--weight-display); letter-spacing: 0.075em; text-transform: uppercase; } @@ -91,17 +91,17 @@ const experiments = measureStage.systems[0]; margin: 0; color: var(--ink-display); font-family: var(--font-display); - font-size: clamp(1.8rem, 2.9vw, 2.75rem); - font-weight: 760; - letter-spacing: -0.032em; - line-height: 1.05; + font-size: var(--text-section-title); + font-weight: var(--weight-display); + letter-spacing: var(--tracking-section-title); + line-height: var(--leading-section-title); } .evidence-intro { max-width: 700px; margin: 12px 0 0; color: var(--ink-muted); - font-size: clamp(1rem, 1.1vw, 1.08rem); + font-size: var(--text-section-intro); line-height: 1.55; } @@ -129,7 +129,7 @@ const experiments = measureStage.systems[0]; color: var(--ink-display); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 780; + font-weight: var(--weight-display); } .experiments-toolbar__divider { @@ -152,7 +152,7 @@ const experiments = measureStage.systems[0]; color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 740; + font-weight: var(--weight-heading); text-decoration: none; } @@ -172,6 +172,11 @@ const experiments = measureStage.systems[0]; } } + @media (max-width: 760px) { + .evidence-heading { font-size: var(--text-section-title-mobile); } + .evidence-intro { font-size: var(--text-section-intro-mobile); } + } + @media (max-width: 540px) { .evidence-stage { padding: 43px 0 64px; } @@ -187,8 +192,8 @@ const experiments = measureStage.systems[0]; padding-right: 0; } - .evidence-heading { font-size: var(--text-h2); line-height: 1.16; } - .evidence-intro { font-size: var(--text-body-sm); line-height: 1.5; } + .evidence-heading { font-size: var(--text-section-title-mobile); line-height: var(--leading-section-title); } + .evidence-intro { font-size: var(--text-section-intro-mobile); line-height: 1.5; } .experiments-toolbar { align-items: center; diff --git a/src/components/landing/ExperimentResultsExplorer.astro b/src/components/landing/ExperimentResultsExplorer.astro index 5edca21c..137f6872 100644 --- a/src/components/landing/ExperimentResultsExplorer.astro +++ b/src/components/landing/ExperimentResultsExplorer.astro @@ -1452,7 +1452,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); letter-spacing: 0.065em; } @@ -1490,7 +1490,7 @@ const selectorLabelFor = (track: Track) => { padding: 6px 10px; white-space: nowrap; font-size: var(--text-caption); - font-weight: 720; + font-weight: var(--weight-heading); } .rg-dataset-picker { @@ -1505,7 +1505,7 @@ const selectorLabelFor = (track: Track) => { cursor: pointer; font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 700; + font-weight: var(--weight-heading); border-radius: var(--radius-full); border: 1px solid var(--border-medium); background: var(--surface-card); @@ -1559,7 +1559,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 760; + font-weight: var(--weight-heading); text-decoration: none; } @@ -1575,7 +1575,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(2.6rem, 4vw, 3.2rem); - font-weight: 820; + font-weight: var(--weight-display); letter-spacing: -0.06em; line-height: 1; } @@ -1622,14 +1622,14 @@ const selectorLabelFor = (track: Track) => { border-top: 2px solid color-mix(in srgb, var(--accent-blue) 32%, var(--border-subtle)); color: var(--ink-display); font-family: var(--font-display); - font-weight: 760; + font-weight: var(--weight-heading); font-size: var(--text-caption); } .rg-metric-guide small { color: var(--ink-muted); margin-top: 4px; - font-weight: 450; + font-weight: var(--weight-medium); font-size: var(--text-caption); line-height: 1.45; } @@ -1756,7 +1756,7 @@ const selectorLabelFor = (track: Track) => { background: transparent; color: var(--ink-muted); font-family: var(--font-display); - font-weight: 700; + font-weight: var(--weight-heading); font-size: var(--text-caption); white-space: nowrap; cursor: pointer; @@ -1809,7 +1809,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 750; + font-weight: var(--weight-heading); background: var(--surface-subtle); } @@ -1817,7 +1817,7 @@ const selectorLabelFor = (track: Track) => { min-width: 140px; color: var(--ink-display); font-family: var(--font-display); - font-weight: 760; + font-weight: var(--weight-heading); background: var(--surface-card); } @@ -1915,7 +1915,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 760; + font-weight: var(--weight-heading); white-space: nowrap; text-decoration: none; } @@ -1941,7 +1941,7 @@ const selectorLabelFor = (track: Track) => { font-family: var(--font-display); font-size: 0.96rem; color: var(--ink-display); - font-weight: 780; + font-weight: var(--weight-display); } .jev-mcb-rows :global(.jev-mcb-row__model small) { @@ -2059,7 +2059,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 780; + font-weight: var(--weight-display); letter-spacing: 0.07em; } @@ -2081,7 +2081,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: 0.98rem; - font-weight: 750; + font-weight: var(--weight-heading); } .jev-coverage-banner p { @@ -2150,7 +2150,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(1.5rem, 2.7vw, 2.15rem); - font-weight: 830; + font-weight: var(--weight-display); line-height: 1.13; letter-spacing: -0.045em; } @@ -2184,7 +2184,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); - font-weight: 800; + font-weight: var(--weight-display); letter-spacing: -0.025em; } @@ -2226,7 +2226,7 @@ const selectorLabelFor = (track: Track) => { padding: 0 16px 10px; color: var(--ink-muted); font-size: var(--text-caption); - font-weight: 720; + font-weight: var(--weight-heading); } .jev-ranking__columns > span:last-child { @@ -2237,7 +2237,7 @@ const selectorLabelFor = (track: Track) => { display: block; color: var(--ink-subtle); font-size: var(--text-caption); - font-weight: 500; + font-weight: var(--weight-medium); } .jev-ranking__rows { @@ -2263,7 +2263,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: 0.94rem; - font-weight: 780; + font-weight: var(--weight-display); line-height: 1.3; } @@ -2449,7 +2449,7 @@ const selectorLabelFor = (track: Track) => { .experiment-tab__title { font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 720; + font-weight: var(--weight-heading); white-space: nowrap; } @@ -2513,7 +2513,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: 0.9rem; - font-weight: 800; + font-weight: var(--weight-display); } .evidence-panel__result { @@ -2529,7 +2529,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); letter-spacing: 0.055em; } @@ -2568,7 +2568,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(1.55rem, 2.5vw, 2.15rem); - font-weight: 840; + font-weight: var(--weight-display); letter-spacing: -0.045em; line-height: 1.06; } @@ -2589,7 +2589,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 760; + font-weight: var(--weight-heading); text-decoration: none; } @@ -2611,7 +2611,7 @@ const selectorLabelFor = (track: Track) => { .run-summary strong { color: var(--ink-display); font-family: var(--font-display); - font-weight: 760; + font-weight: var(--weight-heading); } .benchmark-story { @@ -2648,7 +2648,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-subtle); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 760; + font-weight: var(--weight-heading); letter-spacing: 0.045em; } @@ -2694,7 +2694,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 700; + font-weight: var(--weight-heading); cursor: pointer; } @@ -2742,7 +2742,7 @@ const selectorLabelFor = (track: Track) => { .plot-selection__eyebrow { color: var(--ink-subtle); font-size: var(--text-caption); - font-weight: 760; + font-weight: var(--weight-heading); letter-spacing: 0.06em; } @@ -2818,7 +2818,7 @@ const selectorLabelFor = (track: Track) => { fill: var(--ink-muted); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 650; + font-weight: var(--weight-label); } .plot-legend { @@ -2913,7 +2913,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); - font-weight: 830; + font-weight: var(--weight-display); letter-spacing: -0.04em; } @@ -2943,7 +2943,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: 1rem; - font-weight: 780; + font-weight: var(--weight-display); line-height: 1.4; } @@ -3039,15 +3039,15 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 740; + font-weight: var(--weight-heading); letter-spacing: .045em; } .experiment-index-heading h3 { margin: 5px 0 0; color: var(--ink-display); font-family: var(--font-display); - font-size: var(--text-h3); - font-weight: 760; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); letter-spacing: -.025em; line-height: 1.25; } @@ -3110,7 +3110,7 @@ const selectorLabelFor = (track: Track) => { gap: 4px 12px; margin-bottom: 12px; } - .experiment-index-heading h3 { font-size: 1.13rem; } + .experiment-index-heading h3 { font-size: var(--text-card-title); } .experiment-selector-wrap { margin-bottom: 15px; } .experiment-selector-wrap::after { display: none; } @@ -3166,7 +3166,7 @@ const selectorLabelFor = (track: Track) => { margin: 8px 0 6px; font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 1.45rem); - font-weight: 760; + font-weight: var(--weight-heading); line-height: 1.2; letter-spacing: -.028em; } @@ -3222,7 +3222,7 @@ const selectorLabelFor = (track: Track) => { .highlight strong { margin-top: 5px; font-size: clamp(1.13rem, 4.4vw, 1.38rem); - font-weight: 760; + font-weight: var(--weight-heading); letter-spacing: -.025em; overflow-wrap: anywhere; } @@ -3322,14 +3322,14 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 720; + font-weight: var(--weight-heading); letter-spacing: .04em; } .mcb-model-browser__heading h4 { margin: 6px 0; font-family: var(--font-display); - font-size: var(--text-h3); - font-weight: 760; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); letter-spacing: -.025em; line-height: 1.3; color: var(--ink-display); @@ -3360,7 +3360,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 690; + font-weight: var(--weight-heading); cursor: pointer; } .mcb-list-filters button[aria-pressed='true'] { @@ -3411,7 +3411,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: var(--text-body-sm); - font-weight: 720; + font-weight: var(--weight-heading); line-height: 1.35; overflow-wrap: anywhere; } @@ -3434,7 +3434,7 @@ const selectorLabelFor = (track: Track) => { } .mcb-model-cards :global(.mcb-model-card__metrics span:first-child) { color: var(--ink-display); - font-weight: 700; + font-weight: var(--weight-heading); } .mcb-show-all { width: 100%; @@ -3447,7 +3447,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 730; + font-weight: var(--weight-heading); cursor: pointer; } .mcb-show-all[hidden] { display: none; } @@ -3480,7 +3480,7 @@ const selectorLabelFor = (track: Track) => { display: block; font-family: var(--font-display); font-size: var(--text-body-sm); - font-weight: 720; + font-weight: var(--weight-heading); color: var(--ink-display); } .mcb-chart-details > summary small, .mcb-method-details > summary small { @@ -3524,7 +3524,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 730; + font-weight: var(--weight-heading); letter-spacing: .04em; } .experiment-mobile-chooser select { @@ -3539,7 +3539,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: var(--text-body-sm); - font-weight: 690; + font-weight: var(--weight-heading); text-overflow: ellipsis; cursor: pointer; } @@ -3612,7 +3612,7 @@ const selectorLabelFor = (track: Track) => { .mcb-story .highlight:last-child { grid-column: 1/-1; } .mcb-story .highlight strong { font-size: clamp(1.12rem, 4.7vw, 1.36rem); } .mcb-model-browser { margin-top: 22px; } - .mcb-model-browser__heading h4 { font-size: 1.125rem; } + .mcb-model-browser__heading h4 { font-size: var(--text-card-title); } .mcb-model-cards { grid-template-columns: 1fr; gap: 8px; } .mcb-model-cards :global(.mcb-model-card) { min-height: 83px; padding: 12px; gap: 8px; } .mcb-model-cards :global(.mcb-model-card__top) { flex-wrap: nowrap; } @@ -3650,8 +3650,8 @@ const selectorLabelFor = (track: Track) => { } .experiment-index-heading h3 { font-family: var(--font-display); - font-size: 1.13rem; - font-weight: 750; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); letter-spacing: -.02em; } .experiment-index-heading__count { white-space: nowrap; } @@ -3665,7 +3665,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-subtle); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 680; + font-weight: var(--weight-heading); } .experiment-rail-guide > span > span { color: var(--accent-blue); } .experiment-rail-actions { @@ -3678,7 +3678,7 @@ const selectorLabelFor = (track: Track) => { min-width: 59px; font-family: var(--font-mono); font-size: var(--text-caption); - font-weight: 690; + font-weight: var(--weight-heading); color: var(--ink-muted); font-variant-numeric: tabular-nums; } @@ -3760,7 +3760,7 @@ const selectorLabelFor = (track: Track) => { .experiment-tab__title { font-family: var(--font-display); font-size: var(--text-body); - font-weight: 740; + font-weight: var(--weight-heading); line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; @@ -3769,7 +3769,7 @@ const selectorLabelFor = (track: Track) => { display: block; font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 650; + font-weight: var(--weight-label); color: var(--accent-teal); } .experiment-tab[data-published='false'] .experiment-tab__availability { @@ -3825,7 +3825,7 @@ const selectorLabelFor = (track: Track) => { .run-summary > span strong { font-family: var(--font-display); font-size: clamp(1.35rem, 5.2vw, 1.65rem); - font-weight: 790; + font-weight: var(--weight-display); line-height: 1.18; color: var(--ink-display); } @@ -3889,7 +3889,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(1.45rem, 6vw, 1.75rem); - font-weight: 780; + font-weight: var(--weight-display); letter-spacing: -.025em; } .mcb-story .highlight small { @@ -3944,7 +3944,7 @@ const selectorLabelFor = (track: Track) => { .mcb-model-cards :global(.mcb-model-card__top strong) { font-family: var(--font-display); font-size: var(--text-body); - font-weight: 780; + font-weight: var(--weight-display); } .mcb-model-cards :global(.mcb-model-card__metrics) { display: grid; @@ -3962,7 +3962,7 @@ const selectorLabelFor = (track: Track) => { overflow-wrap: anywhere; } .mcb-model-cards :global(.mcb-model-card__metrics span:first-child) { - font-weight: 800; + font-weight: var(--weight-display); font-size: 1.05rem; color: var(--ink-display); } @@ -4017,7 +4017,7 @@ const selectorLabelFor = (track: Track) => { color: var(--accent-blue-dark); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 770; + font-weight: var(--weight-heading); letter-spacing: .025em; line-height: 1.25; overflow-wrap: anywhere; @@ -4031,7 +4031,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 660; + font-weight: var(--weight-label); line-height: 1.35; } .mcb-model-cards :global(.mcb-model-card__identity) { @@ -4045,8 +4045,8 @@ const selectorLabelFor = (track: Track) => { max-width: 100%; color: var(--ink-display); font-family: var(--font-display); - font-size: 1.13rem; - font-weight: 770; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); letter-spacing: -.025em; line-height: 1.22; overflow-wrap: anywhere; @@ -4056,7 +4056,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 460; + font-weight: var(--weight-body); line-height: 1.38; text-wrap: pretty; } @@ -4079,11 +4079,11 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 500; + font-weight: var(--weight-medium); line-height: 1.25; } .mcb-model-cards :global(.mcb-model-card__metrics > .mcb-model-card__metric:first-child) { - font-weight: 500; + font-weight: var(--weight-medium); font-size: var(--text-caption); } .mcb-model-cards :global(.mcb-model-card__metric-value) { @@ -4091,7 +4091,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-display); font-family: var(--font-display); font-size: clamp(1.07rem, 1.6vw, 1.25rem); - font-weight: 800; + font-weight: var(--weight-display); line-height: 1.17; letter-spacing: -.025em; white-space: nowrap; @@ -4102,7 +4102,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-muted); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 500; + font-weight: var(--weight-medium); line-height: 1.3; } .mcb-model-cards :global(.mcb-model-card[aria-pressed='true']) { @@ -4118,7 +4118,7 @@ const selectorLabelFor = (track: Track) => { color: var(--ink-subtle); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 680; + font-weight: var(--weight-heading); } .mcb-model-browser__swipe span { color: var(--accent-blue); } .mcb-model-cards :global(.mcb-model-entry) { diff --git a/src/components/landing/LandingHeader.astro b/src/components/landing/LandingHeader.astro index c14a1beb..bad63d1e 100644 --- a/src/components/landing/LandingHeader.astro +++ b/src/components/landing/LandingHeader.astro @@ -173,7 +173,7 @@ const resolveHref = (href: string) => { .brand-name { font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 850; + font-weight: var(--weight-display); letter-spacing: 0.045em; text-transform: uppercase; color: var(--ink-display); @@ -183,7 +183,7 @@ const resolveHref = (href: string) => { .brand-role { color: var(--ink-muted); font-size: var(--text-caption); - font-weight: 620; + font-weight: var(--weight-label); line-height: 1.4; white-space: nowrap; } @@ -211,7 +211,7 @@ const resolveHref = (href: string) => { color: var(--ink); text-decoration: none; font-size: var(--text-caption); - font-weight: 650; + font-weight: var(--weight-label); transition: color var(--duration-fast) ease; } diff --git a/src/components/landing/LandingHero.astro b/src/components/landing/LandingHero.astro index 4ceeec08..9a156280 100644 --- a/src/components/landing/LandingHero.astro +++ b/src/components/landing/LandingHero.astro @@ -135,7 +135,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin font-size: clamp(1.85rem, 4.35vw, 4.35rem); line-height: 1.1; letter-spacing: -0.055em; - font-weight: 860; + font-weight: var(--weight-display); color: var(--ink-display); white-space: nowrap; } @@ -167,7 +167,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin font-family: var(--font-display); font-size: clamp(1.32rem, 2.15vw, 2rem); line-height: 1.24; - font-weight: 760; + font-weight: var(--weight-heading); letter-spacing: -0.025em; color: var(--ink-display); } @@ -182,7 +182,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin .hero-explanation :global(strong) { color: var(--ink-display); - font-weight: 740; + font-weight: var(--weight-heading); } .hero-position { @@ -193,7 +193,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin margin: 0; font-family: var(--font-display); font-size: 0.9rem; - font-weight: 700; + font-weight: var(--weight-heading); color: var(--ink); } @@ -241,7 +241,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin color: var(--accent-blue); font-family: var(--font-mono); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); line-height: 1.5; } @@ -285,7 +285,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin .trust-role { color: var(--ink); - font-weight: 690; + font-weight: var(--weight-heading); } .hero-trust a { @@ -293,7 +293,7 @@ const linkedinUrl = hero.identity.socials?.find((link) => link.platform === 'lin align-items: center; gap: 5px; color: var(--ink-muted); - font-weight: 650; + font-weight: var(--weight-label); text-decoration: none; transition: color var(--duration-fast) ease; } diff --git a/src/components/landing/LoopClosure.astro b/src/components/landing/LoopClosure.astro index 67035c33..92c23723 100644 --- a/src/components/landing/LoopClosure.astro +++ b/src/components/landing/LoopClosure.astro @@ -84,7 +84,7 @@ const { loopClosure } = landingData; font-size: clamp(1.85rem, 3.2vw, 2.65rem); line-height: 1.12; letter-spacing: -0.035em; - font-weight: 800; + font-weight: var(--weight-display); color: var(--ink-display); } @@ -113,14 +113,14 @@ const { loopClosure } = landingData; .track-step { font-family: var(--font-display); font-size: var(--text-badge); - font-weight: 800; + font-weight: var(--weight-display); color: var(--ink-muted); letter-spacing: 0.06em; } .track-step--final { color: var(--accent-blue-dark); - font-weight: 850; + font-weight: var(--weight-display); background: var(--surface-blue-subtle); padding: 3px 10px; border-radius: var(--radius-full); @@ -128,7 +128,7 @@ const { loopClosure } = landingData; .track-arrow { color: var(--accent-blue); - font-weight: 800; + font-weight: var(--weight-display); font-size: var(--text-badge); } @@ -137,7 +137,7 @@ const { loopClosure } = landingData; font-family: var(--font-display); font-size: var(--text-caption); color: var(--accent-blue-dark); - font-weight: 750; + font-weight: var(--weight-heading); letter-spacing: 0.02em; } @@ -187,7 +187,7 @@ const { loopClosure } = landingData; .outcome-label { font-family: var(--font-display); font-size: var(--text-body); - font-weight: 850; + font-weight: var(--weight-display); letter-spacing: 0.05em; color: var(--ink-display); } diff --git a/src/components/landing/MethodThread.astro b/src/components/landing/MethodThread.astro index ad0de326..35a2ec4e 100644 --- a/src/components/landing/MethodThread.astro +++ b/src/components/landing/MethodThread.astro @@ -146,7 +146,7 @@ const pathD = direction === 'ltr' .pill-label { font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); letter-spacing: 0.055em; color: var(--accent-blue-dark); } diff --git a/src/components/landing/PlaneTemplate.astro b/src/components/landing/PlaneTemplate.astro index 74fc66ac..091a1ba7 100644 --- a/src/components/landing/PlaneTemplate.astro +++ b/src/components/landing/PlaneTemplate.astro @@ -115,10 +115,10 @@ const titleId = `${id}-title`; max-width: 100%; margin: 0 0 var(--space-3); font-family: var(--font-display); - font-size: clamp(1.75rem, 3.1vw, 2.95rem); - line-height: 1.08; - letter-spacing: -0.042em; - font-weight: 820; + font-size: var(--text-section-title); + line-height: var(--leading-section-title); + letter-spacing: var(--tracking-section-title); + font-weight: var(--weight-display); color: var(--ink-display); text-wrap: pretty; } @@ -126,7 +126,7 @@ const titleId = `${id}-title`; .plane-intro .stage-intro { max-width: 680px; margin: 0; - font-size: clamp(1rem, 1.25vw, 1.12rem); + font-size: var(--text-section-intro); line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; @@ -157,7 +157,6 @@ const titleId = `${id}-title`; .plane-section.stage-left .plane-intro, .plane-section.stage-right .plane-intro { align-self: flex-start; } - .plane-intro .stage-heading { font-size: clamp(1.65rem, 5vw, 2.35rem); } } @media (max-width: 760px) { @@ -166,8 +165,8 @@ const titleId = `${id}-title`; padding-right: 12px; } - .plane-intro .stage-heading { font-size: clamp(1.45rem, 6vw, 1.95rem); } - .plane-intro .stage-intro { font-size: 0.98rem; } + .plane-intro .stage-heading { font-size: var(--text-section-title-mobile); } + .plane-intro .stage-intro { font-size: var(--text-section-intro-mobile); } } @media (max-width: 540px) { diff --git a/src/components/landing/StageRail.astro b/src/components/landing/StageRail.astro index e188e3f4..941cc1da 100644 --- a/src/components/landing/StageRail.astro +++ b/src/components/landing/StageRail.astro @@ -77,7 +77,7 @@ const label = String(number).padStart(2, '0'); 0 12px 30px rgba(8, 19, 51, 0.16); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 800; + font-weight: var(--weight-display); letter-spacing: 0.04em; opacity: var(--node-opacity, 0); transition: diff --git a/src/components/landing/TestProductGallery.astro b/src/components/landing/TestProductGallery.astro index 645620f4..edf8ee23 100644 --- a/src/components/landing/TestProductGallery.astro +++ b/src/components/landing/TestProductGallery.astro @@ -214,7 +214,7 @@ const applicationId = (name: string) => margin: 0; font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 720; + font-weight: var(--weight-heading); line-height: 1.35; letter-spacing: 0.045em; } @@ -225,8 +225,8 @@ const applicationId = (name: string) => max-width: 720px; color: var(--ink-display); font-family: var(--font-display); - font-size: var(--text-h3); - font-weight: 760; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); letter-spacing: -0.025em; line-height: 1.26; } @@ -350,7 +350,7 @@ const applicationId = (name: string) => color: var(--ink-display); font-family: var(--font-display); font-size: 1.0625rem; - font-weight: 760; + font-weight: var(--weight-heading); letter-spacing: -0.018em; line-height: 1.2; } @@ -358,7 +358,7 @@ const applicationId = (name: string) => color: var(--product-accent); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 650; + font-weight: var(--weight-label); line-height: 1.28; letter-spacing: 0; } @@ -375,8 +375,8 @@ const applicationId = (name: string) => margin: var(--space-4) 0 var(--space-2); color: var(--ink-display); font-family: var(--font-display); - font-size: clamp(1.25rem, 1.85vw, 1.5rem); - font-weight: 760; + font-size: var(--text-card-title); + font-weight: var(--weight-heading); line-height: 1.21; letter-spacing: -0.028em; text-wrap: pretty; @@ -386,7 +386,7 @@ const applicationId = (name: string) => color: var(--ink-muted); font-family: var(--font-body); font-size: var(--text-body-sm); - font-weight: 450; + font-weight: var(--weight-medium); line-height: 1.45; text-wrap: pretty; } @@ -463,7 +463,7 @@ const applicationId = (name: string) => color: var(--ink); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 550; + font-weight: var(--weight-label); line-height: 1.3; } @@ -484,12 +484,12 @@ const applicationId = (name: string) => gap: 2px; min-width: 0; } - .runtime-label { color: var(--ink-subtle); font-size: var(--text-caption); font-weight: 650; letter-spacing: 0; } + .runtime-label { color: var(--ink-subtle); font-size: var(--text-caption); font-weight: var(--weight-label); letter-spacing: 0; } .runtime-link strong { color: var(--ink-display); font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 650; + font-weight: var(--weight-label); line-height: 1.3; } .explore-link { @@ -499,7 +499,7 @@ const applicationId = (name: string) => color: var(--product-accent); font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 730; + font-weight: var(--weight-heading); } .explore-link span { font-size: 18px; } @@ -511,8 +511,8 @@ const applicationId = (name: string) => gap: var(--space-3); margin-top: var(--space-2); } - .gallery-count { margin: 0; color: var(--ink-subtle); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 650; } - .gallery-count strong { color: var(--ink-display); font-weight: 800; } + .gallery-count { margin: 0; color: var(--ink-subtle); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-label); } + .gallery-count strong { color: var(--ink-display); font-weight: var(--weight-display); } .gallery-buttons { display: flex; align-items: center; gap: var(--space-2); } .gallery-buttons button { display: grid; @@ -553,7 +553,7 @@ const applicationId = (name: string) => font-size: var(--text-body-sm); line-height: 1.5; } - .gallery-handoff strong { color: var(--ink-display); font-weight: 700; } + .gallery-handoff strong { color: var(--ink-display); font-weight: var(--weight-heading); } .handoff-link { display: inline-flex; align-items: center; @@ -568,7 +568,7 @@ const applicationId = (name: string) => text-decoration: none; font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 740; + font-weight: var(--weight-heading); } .handoff-link:hover { background: var(--surface-blue-subtle); } .handoff-link span { font-size: 19px; } diff --git a/src/components/layout/SiteFooter.astro b/src/components/layout/SiteFooter.astro index 6b8aea35..35510704 100644 --- a/src/components/layout/SiteFooter.astro +++ b/src/components/layout/SiteFooter.astro @@ -108,7 +108,7 @@ const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, ''); .brand-name { font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 700; + font-weight: var(--weight-heading); letter-spacing: -0.01em; color: var(--ink-display); transition: color var(--duration-fast) ease; @@ -140,7 +140,7 @@ const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, ''); text-decoration: none; color: var(--ink-muted); font-size: var(--text-caption); - font-weight: 500; + font-weight: var(--weight-medium); transition: color var(--duration-fast) ease; } diff --git a/src/components/layout/SiteHeader.astro b/src/components/layout/SiteHeader.astro index 5877d89d..f47601a7 100644 --- a/src/components/layout/SiteHeader.astro +++ b/src/components/layout/SiteHeader.astro @@ -144,7 +144,7 @@ function getHref(href: string) { .brand-name { font-family: var(--font-display); font-size: var(--text-caption); - font-weight: 760; + font-weight: var(--weight-heading); letter-spacing: -0.012em; color: var(--ink-display); white-space: nowrap; @@ -153,7 +153,7 @@ function getHref(href: string) { .brand-role { font-family: var(--font-body); font-size: var(--text-caption); - font-weight: 500; + font-weight: var(--weight-medium); color: var(--ink-muted); white-space: nowrap; } @@ -192,7 +192,7 @@ function getHref(href: string) { .nav-link-text { font-size: var(--text-caption); - font-weight: 580; + font-weight: var(--weight-label); letter-spacing: -0.015em; line-height: 1.15; white-space: nowrap; @@ -250,7 +250,7 @@ function getHref(href: string) { padding: 8px 13px; border-radius: var(--radius-full); font-size: var(--text-caption); - font-weight: 670; + font-weight: var(--weight-heading); white-space: nowrap; cursor: pointer; display: inline-flex; @@ -362,7 +362,7 @@ function getHref(href: string) { .nav-link-text { font-size: 0.92rem; - font-weight: 600; + font-weight: var(--weight-label); text-align: left; } diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index aabab1ba..d44f18f3 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -127,7 +127,7 @@ const allSchemas = jsonLd - +