/** * About page — the parts of the design that are page-specific prose, not * generalized reusable components: the 2-column drop-cap story text, and * the page-level padding wrappers around the Values grid and Team blurb * (the grid/card styling itself lives in values-grid.css; this file only * adds the surrounding section padding, admin-adjustable via the * 'about_story'/'about_values'/'about_team' spacing settings). * * Note: Design Refrance's `.page` wrapper (max-width 1440px box with a * drop-shadow, sitting on a grey backdrop) was intentionally never carried * over site-wide in this theme — every other page renders full-bleed with * no shadow/backdrop treatment (--color-page-backdrop exists in * variables.css but is unused everywhere). Not introducing it here either, * to keep this page visually consistent with the rest of the site rather * than uniquely boxed. * * Values confirmed directly from Design Refrance's `.ab-story` in * TSI About.html. */ .ab-story { padding: var(--spacing-about_story-top) var(--spacing-about_story-side) var(--spacing-about_story-bottom); column-count: 2; column-gap: 56px; max-width: 1120px; margin: 0 auto; } .ab-story p { /* Explicit font-family/font-style (not just relying on inheritance from ) — the first paragraph below uses class "ab-lead" for its drop-cap; an EARLIER version used the plain class "lead", which silently collided with the sitewide `.lead` typography utility (assets/css/base/typography.css — Playfair Display italic, used for article ledes/deks elsewhere) and made this entire paragraph render in the wrong italic serif font instead of upright Archivo. Renamed to "ab-lead" to avoid the collision, and pinned explicitly here so no other global class can silently override it again. */ font-family: var(--font-primary); font-style: normal; font-size: 16.5px; line-height: 1.85; color: #2c352f; margin-bottom: 20px; break-inside: avoid; } .ab-story p b { color: var(--color-ink); font-weight: 600; } .ab-story p.ab-lead::first-letter { font-family: var(--font-secondary); font-weight: 900; font-size: 64px; line-height: .78; float: left; padding: 6px 12px 0 0; color: var(--color-primary-deep); } .ab-values { padding: var(--spacing-about_values-top) var(--spacing-about_values-side) var(--spacing-about_values-bottom); } .ab-team { padding: var(--spacing-about_team-top) var(--spacing-about_team-side) var(--spacing-about_team-bottom); } /* Team blurb's description paragraph is styled slightly differently from the generic .sec-intro p rule (section-intro.css) — larger, darker, width-capped — confirmed from the inline style on this exact element in Design Refrance's TSI About.html. */ .sec-intro--team p { font-size: 16.5px; line-height: 1.7; color: #2c352f; max-width: 760px; margin-inline: auto; } @media (max-width: 768px) { .ab-story { column-count: 1; padding-top: var(--spacing-about_story-top); padding-bottom: var(--spacing-about_story-bottom); padding-inline: 16px; } .ab-values { padding-top: var(--spacing-about_values-top); padding-bottom: var(--spacing-about_values-bottom); padding-inline: 16px; } .ab-team { padding-top: var(--spacing-about_team-top); padding-bottom: var(--spacing-about_team-bottom); padding-inline: 16px; } }