/* ============================================================================ JT HERO MODULE — v1.1.0 Figma component "Hero" (499:5307). Read from the node tree, not a screenshot. MEASURED Hero VERTICAL, gap 32, fills its column Header VERTICAL, gap 12 — the eyebrow and the title eyebrow the shared component: Index=off, Line=off, State=in view, so the "//" shows and the rule does not Title Heading/H1 — Tektur Bold 48 / line-height AUTO / letter-spacing +1px / #f0f7ff Description Exo 2 Light 16 / 26 / +1px / #bdd1e3 Actions HORIZONTAL, gap 20 — Button/primary + Button/ghost PER PAGE, from the instances rather than the component: content pages pad 120 / 0 / 64 / 0, width 1042 (the container's own width, so the title sits 80px left of the article text) landing pad 0, width 910, beside the 666-wide balance figure That padding is per-page variation, so it is a custom property here rather than a variant — see MODULES.md, "per-page variation is CSS". TWO THINGS CHANGED WHEN THIS BECAME A COMPONENT, and they apply to all 47 generated pages: • the eyebrow's rule became the "//" slashes (Line=on → Line=off) • the title uses the shared Heading/H1 role Both are confirmed intentional. NAMING Everything is --jt-hero- prefixed and .jt-hero scoped. This file styles nothing outside .jt-hero. ========================================================================== */ .jt-hero { /* --- knobs ------------------------------------------------------------- Space above and below. 0 by default, because the component itself has no padding — the padding belongs to each instance. A content page sets 120 / 64; the landing sets neither. */ --jt-hero-space-before: 0; --jt-hero-space-after: 0; /* The comp's 32 between the header and whatever follows it, and 12 inside the header. Both scale down before they scale a phone off the screen. */ --jt-hero-gap: clamp(20px, 2.5vw, 32px); --jt-hero-header-gap: 12px; /* Between the paragraphs of the description. See the note at `p + p`. */ --jt-hero-paragraph-gap: 18px; /* Title colour is the component's own #f0f7ff, a shade off the site's --ink (#f2f7fc). Named here rather than rounded to the nearer token, because the module must not read a property it does not declare. */ /* Text/Heading — the H1 Title in every page frame, verified per node. */ --jt-hero-title: #cbddea; /* Text/Paragraph — the Hero Description, Body/Paragraph 16/26. */ --jt-hero-body: #bdcddb; --jt-hero-font: "Tektur", ui-monospace, "SFMono-Regular", Menlo, monospace; --jt-hero-text: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif; /* How wide the block is. The comp fills its column on both pages; a page that wants it narrower says so here. */ --jt-hero-max: none; display: flex; flex-direction: column; gap: var(--jt-hero-gap); width: 100%; max-width: var(--jt-hero-max); margin-block: var(--jt-hero-space-before) var(--jt-hero-space-after); } .jt-hero__header { display: flex; flex-direction: column; gap: var(--jt-hero-header-gap); } /* The eyebrow is the shared .eyebrow component, styled in common.css. It carries no margin of its own — its spacing is the header's flex gap, here as everywhere else. */ /* --------------------------------------------------------------------------- Title 48px is the current Heading/H1 style, reached only where there is room. The floor is 30 rather than the old shell's 28 because the weight went up with the size: Bold at 28 on a phone is heavier than the page wants. ------------------------------------------------------------------------- */ .jt-hero__title { margin: 0; color: var(--jt-hero-title); font-family: var(--jt-hero-font); /* Heading/H1 — Tektur Bold 48 / AUTO / +1. The fluid floor keeps long translated titles usable on a phone; the ceiling is the style's own size. `line-height` was 1.3077, a number from when AUTO was measured on one string rather than read from the style. AUTO is `normal`. */ font-size: clamp(30px, 1.4rem + 1.9vw, 48px); font-weight: 700; line-height: normal; letter-spacing: 1px; text-wrap: balance; } /* One span per line of the heading. The landing's reveal masks each line separately, which needs them to be real elements — so the break is explicit in the markup and never left to wrapping. `block` on the outer span is what puts each on its own line; the inner one is what a mask animates. */ .jt-hero__line { display: block; overflow: hidden; } .jt-hero__line-inner { display: block; } /* --------------------------------------------------------------------------- Description The comp draws this as ONE text node with newlines. Each line is a paragraph and ships as a

; the spacing between them is the node's `paragraphSpacing` — see the note on `p + p` below, which is where that was got wrong. ------------------------------------------------------------------------- */ .jt-hero__description { /*max-width: 72ch;*/ color: var(--jt-hero-body); font-family: var(--jt-hero-text); /* Body/Paragraph is 16. The floor is a phone concession; the ceiling is the style. THIS CLAMP NEVER REACHED ITS CEILING. It was `0.5rem + 0.35vw`, which is 8px + 0.35% of the viewport — 13.3px at 1512, so the floor won and every hero description on the site rendered 15px against a comp that says 16. It would first have hit 16 at a 2286px viewport. A clamp whose preferred term cannot reach its own maximum is a fixed size wearing a disguise. `0.875rem + 0.15vw` is 14px + 0.15%: 15px up to ~360, 16px from ~1333 on. */ font-size: clamp(15px, 0.875rem + 0.15vw, 16px); font-weight: 300; line-height: 26px; letter-spacing: 1px; } /* PARAGRAPHS ARE SEPARATED. They were not, and the comment above explaining why was reasoning from a wrong premise: "the comp draws this as ONE text node with newlines, so the paragraphs carry no margin between them." A Figma text node with newlines has a `paragraphSpacing` property, and on every Description layer in the file it is 18 — the landing's five heroes and the content pages' body copy alike. "One text node" does not mean "no paragraph spacing"; it means the spacing lives in a property rather than in the layer tree, and nobody read it. So three paragraphs of hero copy ran together as one grey block on every page that shows a description. The value is the comp's 18, and the article prose now uses 18 between its paragraphs too — so a hero and the body under it share one rhythm because they are both reading the same drawing, not because someone matched them by hand. It was 20 on both for one commit, which is where the 20 in the git history comes from. `p + p`, not a bottom margin on every p: the last paragraph must not push the actions row down by a paragraph gap. */ .jt-hero__description p { margin: 0; } .jt-hero__description p + p { margin-top: var(--jt-hero-paragraph-gap); } .jt-hero__description strong { color: #dbe9f5; font-weight: 400; } .jt-hero__description em { font-style: italic; } /* --------------------------------------------------------------------------- Actions — comp: HORIZONTAL, gap 20 The buttons themselves are the shared .btn component from styles/common.css, which the host page already loads. See MODULE.md, Invariants: this module renders that component rather than growing a second button, because two buttons would drift and the design has one. ------------------------------------------------------------------------- */ .jt-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } /* --------------------------------------------------------------------------- Narrow viewports The comp draws one width; the breakpoint below is derived and is a candidate for a mobile frame. Buttons go full width because two 230px buttons and a 20px gap need 480, which is more than a phone has. ------------------------------------------------------------------------- */ @media (max-width: 520px) { .jt-hero__actions { display: grid; grid-template-columns: 1fr; } }