/* The Wholesale Mart / TWM Foods (pId 6792) — "The TWM Story" page. Mirrors https://www.twmfoods.com/the-twm-story. Every selector is scoped under .twm-story so nothing leaks to other pages. Uses design tokens with hex fallbacks; --brand-primary is injected at runtime in . */ .twm-story { color: var(--text-primary, #201c1d); padding-bottom: var(--space-16, 64px); } .twm-story__container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* ── Hero ───────────────────────────────────────────────────────── */ .twm-story__hero { text-align: center; padding: var(--space-12, 48px) 0 var(--space-8, 32px); } .twm-story__title { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 16px; color: var(--text-primary, #201c1d); } .twm-story__lead { font-size: 17px; line-height: 1.55; max-width: 720px; margin: 0 auto; color: var(--text-secondary, #555); } /* ── Feature (image + copy) ─────────────────────────────────────── */ .twm-story__feature { padding: var(--space-6, 24px) 0; } .twm-story__grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6, 24px); } .twm-story__col, .twm-story__media { flex: 1 1 100%; } .twm-story__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, .12)); } .twm-story__subheading { font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--brand-primary, #d61c5c); } .twm-story__subheading--center { text-align: center; } .twm-story__p { font-size: 16px; line-height: 1.55; margin: 0 0 12px; text-align: justify; } /* ── Stats ──────────────────────────────────────────────────────── */ .twm-story__stats { padding: var(--space-8, 32px) 0; } .twm-story__stats-row { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); } .twm-story__stat { flex: 1 1 100%; text-align: center; padding: var(--space-6, 24px) var(--space-4, 16px); background: var(--bg-surface, #fff); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .06)); } .twm-story__stat-num { display: block; font-size: 30px; font-weight: 800; color: var(--brand-primary, #d61c5c); font-variant-numeric: tabular-nums; } .twm-story__stat-label { display: block; margin-top: 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, #555); } /* ── Pillars ────────────────────────────────────────────────────── */ .twm-story__pillars { padding: var(--space-8, 32px) 0; } .twm-story__pillar-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4, 16px); margin-top: var(--space-6, 24px); } .twm-story__pillar { text-align: center; padding: var(--space-6, 24px); background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-lg, 16px); } .twm-story__pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: var(--brand-primary, #d61c5c); margin-bottom: 12px; } .twm-story__pillar-icon svg { width: 28px; height: 28px; } .twm-story__pillar-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary, #201c1d); } .twm-story__pillar-desc { font-size: 15px; line-height: 1.5; margin: 0; color: var(--text-secondary, #555); } /* ── Follow our journey ─────────────────────────────────────────── */ .twm-story__follow { padding: var(--space-8, 32px) 0; text-align: center; } .twm-story__social { display: flex; justify-content: center; gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); } .twm-story__social-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--brand-primary, #d61c5c); transition: opacity .15s ease; } .twm-story__social-link:hover { opacity: .85; } .twm-story__social-link svg { width: 24px; height: 24px; } /* ── Desktop ────────────────────────────────────────────────────── */ @media (min-width: 768px) { .twm-story__title { font-size: 42px; } .twm-story__col, .twm-story__media { flex: 1 1 0; } .twm-story__stat { flex: 1 1 0; } .twm-story__pillar-grid { grid-template-columns: repeat(4, 1fr); } }