/* ============================================================================ JT RELATED READING MODULE — v2.0.0 Figma: frame "Related reading" inside "Warm-up" (218:2413); the cards are the component set "Related reading card" (236:2854), read variant by variant — State=Default and State=Hover both, never the default alone with the rest invented. Measured at the 1920px reference width: band 1042 wide — the content container's own width; the comp used to draw it at 1440, breaking out past the panel, and the rebuilt frames pulled it back in line lead 48 above it, as the component's own top padding band gap 32 between the eyebrow and the cards cards three at 315 with a 48 gutter: (1042 − 2×48) ÷ 3 card 315×218, radius 4, padding 24, 24 between the text group and the "Read →" flag; inside the group, 12. It is 22px taller than the 1440-wide version was, because a 315 column wraps the description to three lines instead of two. fill #3f4e52 at 8% hover 14% stroke 1px #4b616b at 20% hover 1px #7dd3fc at 42% effects background blur 12 (re-measured 2026-09-03; this note said 20 while the rule below has always said 12 — the rule was right) drop shadow 0 0 80 #00090e 25% inner shadow 0 0 70 #2ec7fe 5% hover 12% hover adds 0 0 32 #2ec7fe 12% kicker Tektur Medium 11 / +1.7 / upper / #00d4ff title Heading/H5: Tektur Medium 16 / +2 / #ebf2f8 desc Body/Paragraph Small: Exo 2 Light 14 / 24 / +1.2 / #8296aa cta Tektur Medium 11 / +1.7 / upper / #7dd3fc hover #00d4ff The card's box is deliberately the same recipe as the page's own content container — same fill, stroke, radius, blur and shadows. That is what the two comps say, and it is why they read as the same material at two sizes. NAMING Everything here is --jt- prefixed and .jt-related scoped, per MODULES.md. This file styles nothing outside .jt-related. ONE DEPENDENCY, DECLARED The band's label is the site's shared `.eyebrow` component, whose styling is in /styles/common.css. The module renders it rather than growing a second eyebrow of its own, because two eyebrows would drift apart and the design has exactly one. A host page must therefore load common.css — every generated page already does, and example.html does too. See MODULE.md, Invariants. ========================================================================== */ .jt-related { /* --- knobs --------------------------------------------------------------- The band is the same width as the panel — 1042 in the rebuilt frames. It used to break out to 1440; that is gone. Change it per page here. */ --jt-related-max: 1042px; --jt-related-gutter: clamp(20px, 3.33vw, 48px); --jt-related-gap: 32px; --jt-related-lead: clamp(48px, 4.33vw, 72px); --jt-related-fill: rgba(63, 78, 82, 0.08); --jt-related-fill-hover: rgba(63, 78, 82, 0.14); --jt-related-edge: rgba(75, 97, 107, 0.20); --jt-related-edge-hover: rgba(125, 211, 252, 0.42); --jt-related-kicker: #00d4ff; --jt-related-title: #cbddea; /* Text/Heading, Heading/H5 */ --jt-related-desc: #bdcddb; /* Text/Paragraph, 14/24 */ --jt-related-cta: #00d4ff; /* Text/Blue — the card CTA moved off the pale blue to the full one */ --jt-related-cta-hover: #00d4ff; /* Not in the component — variants hold positions, not time. 180ms matches the duration the motion spec gives every other hover on this site, so the band does not feel like it belongs to a different page. */ --jt-related-move: 180ms; --jt-related-ease: cubic-bezier(.16, 1, .3, 1); display: flex; flex-direction: column; gap: var(--jt-related-gap); width: 100%; max-width: var(--jt-related-max); margin: var(--jt-related-lead) auto 0; } /* --------------------------------------------------------------------------- The row Three columns ALWAYS, even when the band holds two cards or one. The comp's card is 315 wide and that width is what its type was set against; stretching two cards across the full 1042 would give a 497px box with a 267px text block in it. A short row therefore sits left with the empty column showing, which reads as a row that happens to be short rather than as cards of the wrong size. ------------------------------------------------------------------------- */ .jt-related__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jt-related-gutter); } /* Embedded data for related.js; never part of the visual component. */ .jt-related__data { display: none; } /* --------------------------------------------------------------------------- The card ------------------------------------------------------------------------- */ .jt-related__card { display: flex; flex-direction: column; gap: 24px; /* 24 + 130 of text + 24 + the flag = the comp's 218. Held as a minimum so a short description doesn't produce a shorter card beside a long one; the flag is pushed to the bottom rather than floating up. */ min-height: 218px; padding: 24px; border: 1px solid var(--jt-related-edge); border-radius: 4px; background: var(--jt-related-fill); box-shadow: 0 0 80px rgba(0, 9, 14, 0.25), inset 0 0 70px rgba(46, 199, 254, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-decoration: none; transition: background-color var(--jt-related-move) var(--jt-related-ease), border-color var(--jt-related-move) var(--jt-related-ease), box-shadow var(--jt-related-move) var(--jt-related-ease); } .jt-related__group { display: flex; flex-direction: column; gap: 12px; } .jt-related__kicker { color: var(--jt-related-kicker); font-family: "Tektur", ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.7px; line-height: normal; text-transform: uppercase; } .jt-related__title { color: var(--jt-related-title); font-family: "Tektur", ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 16px; font-weight: 500; letter-spacing: 2px; line-height: normal; } /* Three lines is what the comp draws at 315 wide and what the 218px card has room for — it was two when the card was 447. The descriptions in OUTPUT/ are written to that length; the clamp is the guard for the one that isn't, and it is a guard rather than the layout — a card whose description runs long grows the band rather than overlapping it, because the clamp truncates instead. */ .jt-related__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 72px; /* three lines at 24, so short cards align */ color: var(--jt-related-desc); font-family: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: 1.2px; line-height: 24px; } /* The `more` component (772:27004) — label plus arrow glyph, 4 apart. The module draws its own copy rather than reaching for `.more` in common.css: a frozen module may not depend on the host page declaring anything, and a related-reading band has to look right in its own example.html too. */ .jt-related__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; /* bottom-aligned, whatever the text above did */ color: var(--jt-related-cta); font-family: "Tektur", ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.7px; line-height: normal; text-transform: uppercase; transition: color var(--jt-related-move) var(--jt-related-ease); } /* The arrow glyph from the `more` component. It used to be the character "→" typed into the translated string, which put a piece of the drawing inside copy every language had to remember to carry. */ .jt-related__cta-icon { flex: none; width: 16px; height: 16px; } /* The label is a span so State=Hover can underline the WORD without dragging the glyph into the underline — which is what the component draws. */ .jt-related__cta-label { text-decoration: none; } /*.jt-related__card:hover .jt-related__cta-label, .jt-related__card:focus-visible .jt-related__cta-label { text-decoration: underline; } */ /* --- State=Hover ----------------------------------------------------------- The set has two variants and no separate focus one, which is the design saying they are the same state. :focus-visible therefore gets the hover treatment plus a real ring — a colour and shadow change alone is not a focus indicator, and the card is the only thing on the row that takes keyboard focus. */ .jt-related__card:hover, .jt-related__card:focus-visible { border-color: var(--jt-related-edge-hover); background: var(--jt-related-fill-hover); box-shadow: 0 0 80px rgba(0, 9, 14, 0.25), 0 0 32px rgba(46, 199, 254, 0.12), inset 0 0 70px rgba(46, 199, 254, 0.12); } .jt-related__card:hover .jt-related__cta, .jt-related__card:focus-visible .jt-related__cta { color: var(--jt-related-cta-hover); } .jt-related__card:focus-visible { outline: 2px solid var(--jt-related-cta-hover); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .jt-related__card, .jt-related__cta { transition: none; } } /* --------------------------------------------------------------------------- Responsive The comp draws one width. These breakpoints are derived, not measured, and are candidates for a mobile frame: ≤900 three 315 columns plus two gutters need 1042; below that the columns are narrower than the type was set for — drop to two. ≤620 two no longer fit either; one column, and the card stops being a fixed-height box because a single column has the room. ------------------------------------------------------------------------- */ @media (max-width: 900px) { .jt-related__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .jt-related { --jt-related-gap: 24px; } .jt-related__cards { grid-template-columns: minmax(0, 1fr); } .jt-related__card { min-height: 0; } .jt-related__desc { min-height: 0; } } @media (max-width: 767px) { .jt-related__card { padding: 24px 32px; } } @media (max-width: 509px) { .jt-related__card { padding: 18px 16px; } }