/** * Crescita Studio — Design Tokens * Source of truth: CRESCITA_STUDIO_MASTER_BRAND_KIT.md * * Do not introduce colours, fonts or scales not defined in the Brand Kit. * Loaded globally on top of GeneratePress Premium. */ :root { /* ── Colour system (Brand Kit §3) ─────────────────────────── */ --crescita-midnight: #0F1722; /* primary brand colour */ --crescita-ocean: #1E3A5F; /* secondary brand colour */ --crescita-fog: #647486; /* supporting neutral */ --crescita-stone: #EBE5DF; /* warm neutral */ --crescita-sand: #F7F5F0; /* primary light background */ --crescita-ocean-bright: #2E5A8F; /* Ocean lifted for lines/accents on dark surfaces */ /* Semantic aliases */ --color-heading: var(--crescita-midnight); --color-body: var(--crescita-midnight); /* Secondary text is Midnight at 68%, not Fog. Fog on Sand measures 4.40:1 and on Stone 3.83:1, both short of the WCAG 2.1 AA floor of 4.5:1 for normal-size text. This value reaches 6.00:1 on Sand and 5.64:1 on Stone while still reading as clearly subordinate, and it mirrors --color-text-on-dark-secondary below, so light and dark surfaces use the same technique at the same opacity. Fog remains the Brand Kit colour for borders, icons, dividers and large-size metadata, where the 3:1 large-text floor applies. */ --color-text-secondary: rgba(15, 23, 34, 0.68); --color-bg: var(--crescita-sand); --color-bg-alt: var(--crescita-stone); --color-bg-dark: var(--crescita-midnight); --color-link: var(--crescita-ocean); --color-border: rgba(15, 23, 34, 0.12); /* thin borders, Brand Kit §8 */ --color-border-dark: rgba(247, 245, 240, 0.16); /* borders on Midnight surfaces */ --color-text-on-dark: var(--crescita-sand); --color-text-on-dark-secondary: rgba(247, 245, 240, 0.68); /* ── Typography (Brand Kit §5–6) ──────────────────────────── */ /* Switzer: primary (headlines, body, nav, buttons, forms, UI) — Fontshare, ITF Free */ /* Satoshi: secondary, selective (display accents, labels, numbers) — Fontshare, ITF Free */ --font-primary: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-secondary: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Type scale — desktop (mobile overrides below) */ --text-h1: 4rem; /* 64px, range 56–72 */ --text-h2: 2.75rem; /* 44px, range 40–48 */ --text-h3: 1.75rem; /* 28px, range 26–32 */ --text-lede: 1.1875rem; /* 19px, top of the 17–19 body range */ --text-body: 1.125rem; /* 18px, range 17–19 */ --text-nav: 0.9375rem; /* 15px, top of the 13–15 small range */ --text-small: 0.875rem; /* 14px, range 13–15 */ --text-eyebrow: 0.75rem;/* 12px, range 11–13 */ /* Wordmark lockup, header and footer */ --text-wordmark: 1.25rem; /* 20px */ /* Buttons and form controls */ --text-button: 1rem; /* 16px */ --leading-h1: 1.05; /* range 0.95–1.1 */ --leading-heading: 1.15; --leading-body: 1.6; /* range 1.5–1.65 */ --tracking-eyebrow: 0.15em; /* range 0.12–0.18em, uppercase */ --weight-heading: 500; /* Medium/Semibold */ --weight-heading-strong: 600; --weight-body: 400; /* ── Layout (Brand Kit §7) ────────────────────────────────── */ --width-content: 1160px; /* primary content, range 1120–1200 */ --width-text: 720px; /* text-heavy content, range 680–760 */ /* Spacing scale — generous whitespace, editorial rhythm */ --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-section: clamp(4rem, 9vw, 7.5rem); /* vertical section padding */ /* ── Shape (Brand Kit §8) ─────────────────────────────────── */ --radius-sm: 2px; /* subtle corner radii — architectural, not playful */ --radius-md: 4px; /* Website-experience-surface radius policy (Brand Kit §8, amended by founder decision 2026-08-19 — DESIGN.md "Shape & Visual Language"). Scoped to sections that opt in; --radius-sm/--radius-md above remain the default for components not yet migrated to this policy. */ --radius-btn: 10px; --radius-card: 16px; --radius-chip: 999px; --border-hairline: 1px solid var(--color-border); /* ── The CTA system — founder direction, 2026-09-06 ─────────── Every call to action on the site is one control: fully rounded, a travelling gloss, and a hover that reads as LIT rather than dimmed. `--radius-cta` is deliberately NOT `--radius-btn`. That token is also on text inputs, the assessment's option cards and the proto note, and a 999px text field is a mistake, not a modernisation. Buttons point here; fields keep their 10px. **This supersedes the sitewide "no glow on buttons" rule** (Brand Kit §13, DESIGN.md), by founder decision. The glow is a hover and focus state on the action itself, never ambient decoration on a surface. */ --radius-cta: 999px; /* The travelling highlight, authored once. home.css and diagnosi.css each had their own copy of this gradient and their own keyframes; both now reference this, so the three surfaces cannot drift apart again. */ --cta-sweep: linear-gradient(115deg, transparent 0%, rgba(159, 193, 232, 0) 20%, rgba(159, 193, 232, 0.5) 50%, rgba(159, 193, 232, 0) 80%, transparent 100%); --cta-sweep-bright: linear-gradient(115deg, transparent 0%, rgba(197, 221, 250, 0) 18%, rgba(214, 233, 255, 0.85) 50%, rgba(197, 221, 250, 0) 82%, transparent 100%); /* The headline's counterpart, authored once for the same reason the CTA sweep above is. It was written out twice — identically — in home.css and diagnosi.css, and the site now runs it on every H1, so a third and fourth copy would have been the point where they started to drift. Unlike --cta-sweep this one is clipped to the glyphs themselves, so its stops are opaque colours rather than transparencies: Midnight at rest, brightening through Ocean to a pale highlight at the midpoint. The headline therefore reads as flat Midnight for most of the cycle — the gradient exists only to travel a highlight across it, never to colour the text. Reduced motion and print both fall back to flat Midnight; see components.css. */ --h1-sweep: linear-gradient(100deg, var(--crescita-midnight) 35%, var(--crescita-midnight) 42%, var(--crescita-ocean-bright) 48%, #9FC1E8 50%, var(--crescita-ocean-bright) 52%, var(--crescita-midnight) 58%, var(--crescita-midnight) 100%); /* Resting depth, then lit. The lit state is a ring plus an outward bloom in Ocean — brightness carried by a lighter ground, not by opacity, because fading a dark button toward its background is exactly what "dimmed" looks like. */ --cta-rest: 0 10px 28px rgba(15, 23, 34, 0.16); --cta-lit: 0 0 0 1px rgba(159, 193, 232, 0.55), 0 12px 30px -8px rgba(46, 90, 143, 0.6), 0 0 30px rgba(46, 90, 143, 0.42); /* Its counterpart on Midnight surfaces, where the button is already light: the bloom is white and the ground goes to pure white. */ --cta-lit-on-dark: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 12px 30px -8px rgba(0, 0, 0, 0.55), 0 0 32px rgba(255, 255, 255, 0.34); /* ── Motion ───────────────────────────────────────────────── */ --transition-base: 180ms ease; /* subtle; hover shifts toward Ocean */ /* Reveal-on-scroll: exponential ease-out, from an already-visible default. See `crescita-reveal` in components.css. */ --transition-reveal: 620ms cubic-bezier(0.16, 1, 0.3, 1); } /* Mobile type scale (Brand Kit §6). Bound is 767.98px so it never overlaps the min-width: 768px layout breakpoints; at exactly 768px the desktop scale and the desktop grid would otherwise both apply and crowd the hero headline. */ @media (max-width: 767.98px) { :root { --text-h1: 2.75rem; /* 44px, range 40–48 */ --text-h2: 2.125rem; /* 34px, range 32–36 */ --text-h3: 1.625rem; /* 26px, range 24–28 */ --text-body: 1.0625rem; /* 17px, range 16–18 */ } }