/* ============================================================= CYLVY DESIGN SYSTEM — override layer Loads after the parent React/Tailwind v4 bundle. See docs/design-system.md for the spec this implements. ============================================================= */ /* -- 1. Redefine the parent theme tokens (Tailwind v4 @theme layer) -- These cascade through every utility class (.font-bold, .text-base, .text-mine-shaft, etc.) so we change the whole site by editing here. */ :root, :host { /* Typography "Inter Variable" = self-hosted via @fontsource-variable/inter (Vite bundle, woff2 in theme/dist/assets/) "Inter Fallback" = metric-matched Arial (@font-face in global.css) — same metrics as Inter, zero layout shift No external Google Fonts request is made. */ --font-sans: 'Inter Variable', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif; /* Colour — Cylvy palette (see design-system.md §5) */ --color-ink: #0A0A0A; --color-paper: #FFFFFF; --color-mine-shaft: #0A0A0A; /* was #282828 — unify on one ink */ --color-black: #0A0A0A; /* push pure black to near-black */ --color-concrete: #F4F4F2; /* warmer paper for sections */ --color-swiss-coffee: #f4f4f2; --color-divider: #E5E2DF; --color-silver-chalice: #8E8E8E; --color-send: #5C5C5C; /* Accents */ --color-cobalt: #1B2BE0; --color-magenta: #E94CB8; --color-cylvy-purple: #7C3AED; /* email accent (#7C3AED) */ --color-cylvy-purple-dark: #6D28D9; /* CTA hover (darker shade) */ --color-cylvy-secondary: #5F828F; /* cooler secondary CTA */ --color-cylvy-secondary-dark: #4B6974; --color-cylvy-cta: #6B767A; --color-cylvy-cta-dark: #596367; --color-header-demo: #6B767A; --color-header-demo-hover: #596367; --color-header-login: #0A0A0A; --color-header-login-hover: #282828; /* The ring gradient (use sparingly, hero/footer only) */ --ring-linear: linear-gradient(135deg, #1B2BE0 0%, #E94CB8 100%); } /* -- 2. Body baseline -- */ html, body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; color: var(--color-ink); } /* -- 3. THE TYPE SYSTEM — semantic-first -- Every heading lands on the ramp regardless of what classes the React bundle stamps on it. Descendants are forced to inherit so utility classes like `font-bold` and arbitrary `text-[Npx]` inside headings are neutralised. This is the real refactor — not a patch. */ /* Display — homepage hero H1. Generous, light, slightly tracked. Ceiling lowered to 44px so "Ultra-Intelligence Marketing™" fits on a single line inside the 601px hero text column. Line-height 1.25 gives the two block lines (heading + subheading) visible breathing room without overcorrecting on single-line H1s. */ h1 { font-size: clamp(32px, 2vw + 18px, 44px); line-height: 1.25; letter-spacing: -0.012em; font-weight: 400; color: var(--color-ink); } /* H2 — section subheadings ("The AI growth engine for B2B marketing.") */ h2 { font-size: clamp(28px, 1.4vw + 20px, 36px); line-height: 1.3; letter-spacing: -0.006em; font-weight: 400; color: var(--color-ink); } /* H3 — card and component headings */ h3 { font-size: 22px; line-height: 1.4; letter-spacing: -0.003em; font-weight: 400; color: var(--color-ink); } /* H4 — small labels / strong inline section breaks */ h4 { font-size: 18px; line-height: 1.45; letter-spacing: 0; font-weight: 500; color: var(--color-ink); } h5, h6 { font-size: 16px; line-height: 1.5; letter-spacing: 0; font-weight: 500; color: var(--color-ink); } /* The neutraliser — every descendant of a heading inherits the heading's type properties. This kills `` inside `

` and similar bundle-stamped variants. Exception: `.tm-mark` (®/™) must keep its own 50% size — excluding it here lets the .tm-mark rule below win, so the symbol scales down inside headings instead of inheriting the full heading size and floating high. No !important needed: override.css is unlayered, so per CSS Cascade Layers these rules already beat any @layer utilities/components rule regardless of specificity — unless the bundle stamps a bang-prefixed (!text-*, !font-*, etc.) utility, which as of this writing does not occur on headings or their descendants (see CSS audit). If a future bang-prefixed heading utility is introduced, this rule will need to move into `@layer utilities` with matching specificity, following the pattern used for `.\!text-2xl.\!leading-5` below. */ h1 *:not(.tm-mark), h2 *:not(.tm-mark), h3 *:not(.tm-mark), h4 *:not(.tm-mark), h5 *:not(.tm-mark), h6 *:not(.tm-mark) { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; } /* Paragraphs — generous line-height, gentle tracking, never bold. */ p { font-size: 16px; line-height: 1.65; letter-spacing: 0.003em; font-weight: 400; color: var(--color-ink); } /* "Lead" paragraphs — first child of a hero/section gets more presence. `.type-lead` is the semantic class emitted by src/lib/typography.ts via src/styles/typography.css. That definition lives inside @layer components, while this rule is unlayered — per CSS Cascade Level 5, unlayered rules beat any layered rule regardless of specificity, so no !important is needed to win against `.type-lead` (components layer). It also beats the `p { font-size: 16px }` rule above on specificity alone (both unlayered, same file). Verified 0 bang-prefixed (`!text-*`) utilities are stamped on any lead paragraph in src/. */ .lead, p.lead, p[class*="text-[22px]"], p[class*="text-[19.5px]"], p.text-lg, .type-lead, p.type-lead { font-size: 20px; line-height: 1.55; letter-spacing: 0; font-weight: 400; } /* -- 4. Class escape hatches — only for sizes outside headings -- Maps Tailwind utility classes onto the design-system ramp. Arbitrary text-[Npx] classes have been removed from source (0 usage confirmed in src/); only standard Tailwind scale classes remain. These are unlayered normal rules, so they already beat Tailwind's own layered utility of the same name — no !important required. Bang-prefixed (`!text-*`) variants had a dedicated @layer utilities rescue block here; removed in Phase 5 after confirming 0 usage in src/ (see git history if one is ever reintroduced — it will need the same layered !important treatment to win against Tailwind's own bang-prefixed utilities). */ .text-base { font-size: 16px; line-height: 1.65; letter-spacing: 0.003em; } .text-sm, .text-\[13px\], .text-\[11px\] { font-size: 14px; line-height: 1.55; letter-spacing: 0.005em; } .text-xs { font-size: 12px; line-height: 1.4; letter-spacing: 0.005em; } .text-xl { font-size: 20px; line-height: 1.5; letter-spacing: 0; font-weight: 400; } .text-2xl { font-size: 24px; line-height: 1.4; letter-spacing: -0.003em; font-weight: 400; } /* -- 12. Targeted bundle fixes -- The compiled React/Tailwind bundle ships a few utility combinations that produce broken layout. These are surgical overrides. */ /* Agents section row alignment. The three agent cards each render as `flex flex-col gap-5`, so every card sizes its rows independently. When one card has a longer subhead or body the image and CTA rows fall out of sync between columns. Promote the outer grid to a subgrid-aware layout so the five rows (title, subhead, image, body, buttons) auto-size to the tallest sibling and align horizontally across all three cards. Use row-gap: 0 and per-row margin-top instead of a uniform gap so we can keep the title→subhead pair tight while still giving the image and CTA rows generous breathing room. No !important needed: AgentsSection.tsx (src/components/AgentsSection.tsx) stamps only plain Tailwind utilities on the grid/article/card elements (no bang-prefixed `!*` classes), so override.css already wins as an unlayered rule regardless of specificity, per CSS Cascade Layers. */ @media (min-width: 1024px) { .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) { grid-template-rows: repeat(5, auto); row-gap: 0; } .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; column-gap: 0; } /* Equalise card widths so all three images render at identical dimensions. The bundle ships card 1 with `pl-0 border-l-0` and cards 2/3 with `pl-6 border-l`, leaving card 1 about 25 px wider than its siblings. Force the same left padding on every card; the visual dividers remain on cards 2 and 3. */ .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article { padding-left: 1.5rem; } /* Per-row spacing — subgrid still aligns rows across columns because every card has the same structure and the same margin-top values. */ .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article > *:nth-child(2) { margin-top: 0.5rem; /* title → subhead: 8 px */ } .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article > *:nth-child(3) { margin-top: 2rem; /* subhead → image: 32 px */ } .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article > *:nth-child(4) { margin-top: 1.5rem; /* image → body: 24 px */ } .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article > *:nth-child(5) { margin-top: 2rem; /* body → buttons: 32 px */ } } /* Agents section — typography. Title at 400 (already in the H3 ramp). Subhead at 300 for a noticeably lighter weight. Body description drops to 14 px (text-sm tier) at 400 to soften the column. No !important needed — see row-alignment comment above; the h3/p/rich-text elements here carry only plain Tailwind utilities (`type.h2`, `type.body`, `type.caption` from src/lib/typography.ts), never bang-prefixed classes. */ .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article h3 { font-weight: 400; } .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article > p { font-weight: 300; } .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article .rich-text, .grid.lg\:grid-cols-3:has(> article > div.aspect-\[1024\/852\]) > article .rich-text *:not(.tm-mark) { font-size: 14px; line-height: 1.55; font-weight: 400; } /* Agents section H2 — restore the missing character space between the `text-mine-shaft` and `text-silver-chalice` spans. The block ships the two colour runs as adjacent ``s with no whitespace between them, so we add right-margin to the first span equal to the width of a space character at the current font size. */ h2 > span.text-mine-shaft:has(+ span.text-silver-chalice) { margin-right: 0.25em; } /* Case-study cards (section 4 "Changing the game") — apply the same typography ramp as the agents cards. Article shape is unique to this module: a square image tile with bg-black followed by H3, subhead, quote, attribution and a CTA. Colour inherits from the light section so no explicit color is set here. No !important needed — ChangingSection.tsx (src/components/ChangingSection.tsx) stamps only plain `type.h3` / `type.body` / `type.caption` utilities here, never bang-prefixed classes, so the unlayered rule already wins. */ article:has(> div.aspect-square.bg-black) > h3 { font-weight: 400; } article:has(> div.aspect-square.bg-black) > p { font-weight: 300; } article:has(> div.aspect-square.bg-black) > .rich-text, article:has(> div.aspect-square.bg-black) > .rich-text *:not(.tm-mark) { font-size: 14px; line-height: 1.55; font-weight: 400; } /* Podcast episode cards (section 5 "Between Me, Myself & AI") — same ramp, scoped to the dark section's articles. There is no separate subhead

in this layout (both copy blocks are .rich-text divs), so we only style the H3 and the rich-text bodies. White text is already handled by the section.bg-black.text-white inherit rule. No !important needed — CustomerStories.tsx (src/components/CustomerStories.tsx) stamps only plain `type.h3` / `type.body` / `type.small` utilities here, never bang-prefixed classes, so the unlayered rule already wins. */ section.bg-black.text-white article > h3 { font-weight: 400; } section.bg-black.text-white article > .rich-text, section.bg-black.text-white article > .rich-text *:not(.tm-mark) { font-size: 14px; line-height: 1.55; font-weight: 400; } /* Video-band crosshatch overlay for readability. Every section that renders a looping video background also ships a dark tint overlay div. Two markup variants are in play: (a) legacy single-layer: `div.absolute.inset-0.bg-black/XX` (b) new SectionBackgroundMedia: a z-[2] overlay div whose tint class may be `bg-black/XX` or an arbitrary `bg-[rgb(...)]` so we match both — anywhere inside a video-bearing section. Layer a dense 1 px on / 2 px off line grid on top of that overlay so light text reads cleanly against the moving video. */ section:has(video) div.absolute.inset-0[class*="bg-black"], section:has(video) div.absolute.inset-0.z-\[2\], footer:has(video) div.absolute.inset-0[class*="bg-black"], footer:has(video) div.absolute.inset-0.z-\[2\], /* Image-band companion: static (non-video) dark hero/CTA bands ship the same tint-overlay markup with an instead of a