/** * Community — landing page, story cards, story page, reverse blocks. * * Reuses the theme tokens (style.css) and the .mp-cm-grid primitives * (catalog-public.css). Editorial typography on the story page. */ /* ── Landing page ──────────────────────────────────────────────────────── */ .mp-community__intro { max-width: 65ch; } .mp-community__cta { margin: var(--space-4, 1rem) 0 var(--space-8, 2rem); text-align: center; } .mp-community__cta-prompt { font-family: var(--font-serif); font-size: 1.25rem; margin: 0 0 var(--space-3, 0.75rem); } .mp-community__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 0.75rem); align-items: center; justify-content: center; } .mp-community__cta--footer { margin: var(--space-12, 3rem) 0 var(--space-8, 2rem); text-align: center; } /* Dismissable CTA: "Don't ask again" stores the choice in the browser; the class on (set by community-cta.js before paint) hides it on future visits. */ html.mp-cta-dismissed .mp-community__cta[data-mp-cta] { display: none; } .mp-community__cta-dismiss { /* Reset the global button treatment down to a quiet text link, on its own line below the CTA (block, so the top margin actually separates it). */ display: block; width: auto; min-width: 0; margin: var(--space-4, 1rem) auto 0; padding: 0; border: 0; box-shadow: none; background: none; color: var(--text-secondary, #555); font-size: 0.85rem; text-decoration: underline; cursor: pointer; -webkit-appearance: none; appearance: none; } .mp-community__cta-dismiss:hover, .mp-community__cta-dismiss:focus-visible { color: var(--text-primary, #1a1a1a); } .mp-community__section { margin: var(--space-12, 3rem) 0; } .mp-community__section-title { font-family: var(--font-serif); font-size: 1.75rem; margin: 0 0 var(--space-1, 0.25rem); } .mp-community__section-subtitle { color: var(--gray-600, #666); margin: 0 0 var(--space-6, 1.5rem); } .mp-community__empty { text-align: center; padding: var(--space-16, 4rem) var(--space-4, 1rem); } .mp-community__empty-title { font-family: var(--font-serif); } .mp-community__empty-actions { margin-top: var(--space-6, 1.5rem); } /* ── Featured story ────────────────────────────────────────────────────── */ .mp-community-featured { position: relative; display: block; border-radius: var(--radius-lg, 16px); overflow: hidden; margin: 0 0 var(--space-12, 3rem); min-height: clamp(300px, 45vw, 480px); background: var(--brand-forest, #1e3c2b); text-decoration: none; } .mp-community-featured__media { position: absolute; inset: 0; display: block; z-index: 0; } .mp-community-featured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The overlay sits above the media link; only its interactive children take pointer events, so clicking the empty hero still follows the media link. */ .mp-community-featured__overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; pointer-events: none; } .mp-community-featured__title a, .mp-community-featured__actions { pointer-events: auto; } .mp-community-featured__title a { color: inherit; text-decoration: none; } .mp-community-featured__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 0.75rem); margin-top: var(--space-3, 0.75rem); } .mp-community-featured--overlay-dark .mp-community-featured__overlay { background: linear-gradient(to top, rgba(18, 36, 24, 0.85), rgba(18, 36, 24, 0.05) 60%); color: #fff; } .mp-community-featured--overlay-light .mp-community-featured__overlay { background: linear-gradient(to top, rgba(250, 247, 240, 0.9), rgba(250, 247, 240, 0.05) 60%); color: var(--brand-forest-dark, #122418); } .mp-community-featured--overlay-none .mp-community-featured__overlay { color: #fff; } .mp-community-featured__inner { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); padding: var(--space-8, 2rem); max-width: 48rem; } .mp-community-featured__kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.85; } .mp-community-featured__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; } .mp-community-featured__standfirst { font-size: 1.05rem; opacity: 0.92; } .mp-community-featured__author { font-size: 0.9rem; opacity: 0.85; } /* ── Filter bar (search + section tags) ────────────────────────────────── */ .mp-community__filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4, 1rem); margin: 0 0 var(--space-8, 2rem); } /* Reuse the adaptive top-bar search component (.mp-search-box-wrapper / .mp-search-input — light/dark aware via theme tokens); size it to sit inline with the section tags rather than span the full row. */ .mp-community__search-form { flex: 1 1 20rem; max-width: 32rem; } /* Drop the browser's native clear glyph (off-brand blue, loose spacing); we render our own reset link that actually reloads to the unfiltered list. */ .mp-community__search-form .mp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .mp-community__search-clear { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--text-tertiary, #737373); text-decoration: none; transition: color 0.15s, background-color 0.15s; } .mp-community__search-clear:hover, .mp-community__search-clear:focus { color: var(--text-primary, #2e2820); background: var(--border-light, rgba(0, 0, 0, 0.06)); } .mp-community__search-clear svg { width: 16px; height: 16px; } .mp-community__tags { display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); } .mp-community__tag { display: inline-block; padding: 0.35rem 0.9rem; border: 1px solid var(--brand-sage, #b8c4ad); border-radius: 999px; font-size: 0.9rem; line-height: 1.2; text-decoration: none; color: var(--brand-forest-dark, #122418); background: transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mp-community__tag:hover, .mp-community__tag:focus { background: var(--brand-sage-soft, #e7ede0); } .mp-community__tag.is-active { background: var(--brand-forest, #1e3c2b); border-color: var(--brand-forest, #1e3c2b); color: #fff; } /* ── Story card ────────────────────────────────────────────────────────── */ /* Match the Brands/Stores landings: a fixed three-up so story cards get the same generous width as brand and sales-point cards (the base .mp-cm-grid auto-fills to a narrower four-up, which made these feel cramped). */ .mp-community-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 640px) { .mp-community-grid { grid-template-columns: 1fr; } } .mp-community-card { position: relative; display: flex; flex-direction: column; background: var(--white, #fff); border-radius: var(--radius-md, 10px); overflow: hidden; box-shadow: var(--shadow-sm); } .mp-community-card__media { position: relative; display: block; } .mp-community-card__hero { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .mp-community-card__hero--plain { display: block; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--brand-forest, #1e3c2b), var(--brand-sage, #5a7a47)); } .mp-community-card__chip { position: absolute; left: var(--space-4, 1rem); bottom: calc(-1 * var(--space-4, 1rem)); width: 72px; height: 72px; background: var(--white, #fff); box-shadow: var(--shadow-md); overflow: hidden; display: flex; align-items: center; justify-content: center; } .mp-community-card__chip--logo { border-radius: var(--radius-sm, 6px); padding: 6px; } .mp-community-card__chip--logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .mp-community-card__chip--portrait { border-radius: 50%; } .mp-community-card__chip--portrait img { width: 100%; height: 100%; object-fit: cover; } .mp-community-card__body { padding: var(--space-8, 2rem) var(--space-4, 1rem) var(--space-4, 1rem); display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-1, 0.25rem); } /* The section label on each card — same treatment as the brand name on a brand card (.mp-cm-card__brand): small, bold, uppercase, amber. */ .mp-community-card__section { margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary, #c07a28); } .mp-community-card__title { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.3; margin: 0; } .mp-community-card__title a { color: inherit; text-decoration: none; } .mp-community-card__title a:hover { text-decoration: underline; } .mp-community-card__author { font-size: 0.92rem; color: var(--text-secondary, #555); margin: 0; } .mp-community-card__standfirst { font-size: 1rem; line-height: 1.5; color: var(--text-primary, #222); margin: var(--space-2, 0.5rem) 0 0; } /* Action buttons pinned to the bottom so every card's button row lines up. */ .mp-community-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); margin-top: auto; padding-top: var(--space-4, 1rem); } .mp-community-card__actions .marketplace-btn { flex: 0 0 auto; justify-content: center; } /* The bookmark toggle overlays the card's top-right corner. */ .mp-community-card .mp-bookmark-toggle { position: absolute; top: var(--space-2, 0.5rem); right: var(--space-2, 0.5rem); } /* ── Reverse block ("From the community") ─────────────────────────────── */ .mp-community-reverse { margin: var(--space-12, 3rem) 0; } .mp-community-reverse__title { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 var(--space-6, 1.5rem); } /* ── Story page ────────────────────────────────────────────────────────── */ .mp-story__hero { position: relative; min-height: clamp(320px, 50vw, 540px); background: var(--brand-forest, #1e3c2b); display: flex; } .mp-story__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mp-story__hero-overlay { position: relative; display: flex; align-items: flex-end; width: 100%; } .mp-story__hero--overlay-dark .mp-story__hero-overlay { background: linear-gradient(to top, rgba(18, 36, 24, 0.85), rgba(18, 36, 24, 0.05) 60%); color: #fff; } .mp-story__hero--overlay-light .mp-story__hero-overlay { background: linear-gradient(to top, rgba(250, 247, 240, 0.9), rgba(250, 247, 240, 0.05) 60%); color: var(--brand-forest-dark, #122418); } .mp-story__hero--overlay-none .mp-story__hero-overlay { color: #fff; } .mp-story__hero-inner { width: 100%; max-width: var(--content-max-width, 1440px); margin: 0 auto; padding: var(--space-8, 2rem) var(--space-4, 1rem); } .mp-story__kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; opacity: 0.85; } .mp-story__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.12; margin: var(--space-2, 0.5rem) 0; /* Take the hero overlay's contrast colour (white on a dark veil, dark on a light veil); a bare global `h1 { color }` would otherwise win over the inherited value. */ color: inherit; } .mp-story__byline { font-size: 0.95rem; opacity: 0.9; margin: 0; } /* The region link sits in the byline over the hero. Take the byline's contrast colour (white on a dark veil); a bare global `a { color }` would otherwise paint it the dark link colour and make it invisible on the image. */ .mp-story__region-link { color: inherit; } .mp-story__region-link:hover, .mp-story__region-link:focus { color: inherit; text-decoration: none; } /* Standfirst (the "accroche"): a quiet editorial lead — larger muted serif with a thin brand-amber rule marking it as the intro, distinct from the body. */ .mp-story__standfirst { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.65; color: var(--text-secondary); max-width: 65ch; margin: var(--space-8, 2rem) auto var(--space-6, 1.5rem); padding-left: var(--space-4, 1rem); border-left: 3px solid var(--secondary); } .mp-story__body { max-width: 65ch; margin: var(--space-6, 1.5rem) auto; font-size: 1.08rem; line-height: 1.8; } .mp-story__body h3 { font-family: var(--font-serif); margin-top: var(--space-8, 2rem); } .mp-story__body blockquote { border-left: 3px solid var(--brand-amber, #c07a28); margin: var(--space-6, 1.5rem) 0; padding-left: var(--space-4, 1rem); font-style: italic; } .mp-story__author { display: flex; gap: var(--space-4, 1rem); align-items: flex-start; max-width: 65ch; margin: var(--space-12, 3rem) auto; padding: var(--space-6, 1.5rem); background: var(--gray-50, #faf7f0); border-radius: var(--radius-md, 10px); } .mp-story__author-img { flex: 0 0 96px; width: 96px; height: 96px; overflow: hidden; background: var(--white, #fff); display: flex; align-items: center; justify-content: center; } .mp-story__author-img--logo { border-radius: var(--radius-sm, 6px); padding: 8px; } .mp-story__author-img--logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .mp-story__author-img--portrait { border-radius: 50%; } .mp-story__author-img--portrait img { width: 100%; height: 100%; object-fit: cover; } .mp-story__author-name { font-weight: 700; font-size: 1.05rem; } .mp-story__author-bio { margin: var(--space-1, 0.25rem) 0; } .mp-story__links { max-width: 65ch; margin: var(--space-8, 2rem) auto; } .mp-story__links-title { font-family: var(--font-serif); font-size: 1.25rem; } .mp-story__links-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); margin: 0; padding: 0; } .mp-story__links-item { display: inline-flex; align-items: baseline; gap: 0.4em; background: var(--gray-50, #faf7f0); border: 1px solid var(--gray-200, #e5e0d5); border-radius: 999px; padding: 0.35em 0.9em; } .mp-story__links-kind { font-size: 0.75rem; color: var(--gray-600, #666); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 720px) { .mp-story__author { flex-direction: column; align-items: center; text-align: center; } }