/* ========================================================================== Subfooter Featured Case Studies — Services §7 (Figma 10534:3933) The section is 1600 x 1222 in the frame. Horizontal geometry is a percentage of that 1600, so the section is either Chris's pixels exactly (in a 1600 box) or a faithful scale of them. Content runs x 53 -> 1546.34, i.e. a 3.3125% inset each side over a 1493.34 content width. Cards are 734 + 26 + 733 = 1493 inside it, which is why the grid is two equal tracks and a fixed 26px gutter rather than three percentages. Vertical rhythm, measured off the frame: 105 hairline (top of HorizontalBorder) 118 head row top -> 13px below the hairline 148 head row bottom -> the row is 30 tall 185 cards top -> 37px below the head row 1024.61 cards bottom -> 197.39 to the section's 1222 NO BADGE. The frame carries a 147.19 "Background" arrow tile at each figure's 0,0 (10534:3937 / 10534:3943), but the node is HIDDEN — it does not render in Chris's composed frame, and Ben ruled it out at build round 1: the card is the image, the title and the description, with nothing white sitting on the photo. THE ROW MUST BE FULL WIDTH / FULL CONTENT / 0 SIDE PADDING — the section owns its own 3.3125% inset, and a BB gutter on top of it doubles the margin. ========================================================================== */ .tbl-sfcs { --tbl-sfcs-ink: var(--Neutral-100, #0f0f0f); --tbl-sfcs-inset: 3.3125%; /* 53 / 1600 */ --tbl-sfcs-gap: 26px; /* 813 - (53 + 734) */ display: block; padding: 6.5625% 0 12.336875%; /* 105 / 1600 and 197.39 / 1600 */ /* No background-color. The section is transparent and inherits whatever the page or the BB row sits it on (Ben, build round 1) — painting White here drew a band against the page's own ground. */ color: var(--tbl-sfcs-ink); } /* -------------------------------------------------------------------------- Head row — hairline, label, view-all link -------------------------------------------------------------------------- */ /* The hairline IS this element's top border, not a separate rule: the frame node is called "HorizontalBorder" and the 13px sits between the line and the row. */ .tbl-sfcs__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 var(--tbl-sfcs-inset); padding-top: 13px; border-top: 1px solid var(--Neutral-20, #dbdbdb); min-height: 43px; /* 13 + the 30-tall row */ } /* Category - Small — 10 / 17.78 / ls 2 / Book Disp 405. design-system.md lists this token as having no custom property; these are the same metrics already hand-written in tbl-client-roster and tbl-case-studies-cta. A FOURTH copy is the point at which it should become a token — flagged, not created here. */ .tbl-sfcs__label { margin: 0; font-family: var(--body-font); font-size: 10px; line-height: 17.78px; font-weight: 405; letter-spacing: 2px; text-transform: uppercase; color: inherit; } /* Frame 11097:4779 only. The frame carries a SECOND Text Link instance at x=689.5 (10535:4642) which does not render — a hidden layer inherited from the Motto source file, not a second link. */ .tbl-sfcs__viewall { flex: 0 0 auto; font-family: var(--body-font); font-size: 16px; line-height: 30px; font-weight: var(--body-font-weight); color: inherit; transition: var(--button-easing); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ /* theme.css gives every ul an 18px padding-left, a 14px bottom margin and 6px of padding-bottom on every li that is not last. All three are list affordances this grid does not want. */ .tbl-sfcs__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tbl-sfcs-gap); margin: 37px var(--tbl-sfcs-inset) 0; padding: 0; list-style: none; } .tbl-sfcs__item { position: relative; margin: 0; padding: 0; list-style: none; } .tbl-sfcs__list .tbl-sfcs__item, .tbl-sfcs__list .tbl-sfcs__item:not(:last-child) { padding-bottom: 0; padding-left: 0; } /* theme.css draws an underline on every inside a li in .body-inner at (0,5,3) and non-important. theme.css is imported UNLAYERED, so this module's unlayered important is the stronger declaration and the card caption stays clean — the same settlement tbl-team-grid.css had to make. */ .tbl-sfcs__link { display: block; color: inherit; text-decoration-line: none !important; transition: var(--button-easing); } .tbl-sfcs__link:hover, .tbl-sfcs__link:focus-visible, .tbl-sfcs__link:active { color: inherit; text-decoration-line: none !important; } /* 733.61 x 761.61 in the frame. aspect-ratio rather than a percentage padding box so the image is a real child that can object-fit. */ .tbl-sfcs__figure { position: relative; margin: 0; padding: 0; overflow: hidden; aspect-ratio: 733.61 / 761.61; } .tbl-sfcs__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Rollover — a slight zoom inside the figure's own clip (Pastel #20). Bare var(--button-easing): prefixing it with a property makes the declaration invalid CSS and it is silently dropped. Pointer-guarded so a tap on touch does not leave a card stuck zoomed. */ @media (hover: hover) and (pointer: fine) { .tbl-sfcs__image { transition: var(--button-easing); } .tbl-sfcs__link:hover .tbl-sfcs__image, .tbl-sfcs__link:focus-visible .tbl-sfcs__image { transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .tbl-sfcs__image { transition: none; } .tbl-sfcs__link:hover .tbl-sfcs__image, .tbl-sfcs__link:focus-visible .tbl-sfcs__image { transform: none; } } /* -------------------------------------------------------------------------- Caption — Paragraph - Large, 20 / 30 / letterSpacing 1 (ONE PERCENT on this token = 0.2px at 20px), two lines: client name then project title. Figure bottom 761.61 -> title top 781.61 = 20px. -------------------------------------------------------------------------- */ .tbl-sfcs__title { display: block; margin-top: 20px; font-family: var(--body-font); font-size: 20px; line-height: 22px; /* Pastel #101 (Chris) — was 30px; tightens the two-line caption. */ font-weight: var(--body-font-weight); letter-spacing: 0.2px; color: inherit; } .tbl-sfcs__client, .tbl-sfcs__project { display: block; } /* -------------------------------------------------------------------------- Narrow -------------------------------------------------------------------------- */ @media (max-width: 767px) { .tbl-sfcs { padding: 14% 0 18%; } .tbl-sfcs__list { grid-template-columns: 1fr; gap: 40px; margin-top: 28px; } .tbl-sfcs__head { align-items: flex-start; gap: 12px; } .tbl-sfcs__title { margin-top: 16px; font-size: 18px; line-height: 26px; } }